Skip to content

deleted by mistake #298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
smily342 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

deleted by mistake #298

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f57ecc2
deleted by mistake
smily342 Sep 26, 2024
495b991
Requested changes
smily342 Oct 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<title>Chatbot</title>
</head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<title>Chatbot</title>
</head>

<body>
<h1>Welcome to my chatbot!</h1>
<main>
<section class="chat" id="chat"></section>
<div class="input-wrapper" id="input-wrapper">
<form id="name-form">
<label for="name-input">Name</label>
<input id="name-input" type="text" />
<button class="send-btn" type="submit">
Send
</button>
</form>
</div>
</main>
<body>
<h1>Welcome to my chatbot!</h1>
<main>
<section class="chat" id="chat"></section>
<div class="input-wrapper" id="input-wrapper">
<form id="name-form">
<label for="name-input">Name</label>
<input id="name-input" type="text" />
<button class="send-btn" type="submit">
Send
</button>
</form>
</div>
</main>

<script src="./script.js"></script>
</body>
<script src="./script.js"></script>
</body>

</html>
</html>
118 changes: 92 additions & 26 deletions code/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ const chat = document.getElementById('chat')

// A function that will add a chat bubble in the correct place based on who the sender is
const showMessage = (message, sender) => {
// The if statement checks if the sender is the user and if that's the case it inserts
// an HTML section inside the chat with the posted message from the user
if (sender === 'user') {
chat.innerHTML += `
<section class="user-msg">
Expand All @@ -15,9 +13,7 @@ const showMessage = (message, sender) => {
</div>
<img src="assets/user.png" alt="User" />
</section>
`
// The else if statement checks if the sender is the bot and if that's the case it inserts
// an HTML section inside the chat with the posted message from the bot
`;
} else if (sender === 'bot') {
chat.innerHTML += `
<section class="bot-msg">
Expand All @@ -26,28 +22,98 @@ const showMessage = (message, sender) => {
<p>${message}</p>
</div>
</section>
`
`;
}

// This little thing makes the chat scroll to the last message when there are too many to
// be shown in the chat box
chat.scrollTop = chat.scrollHeight
}
// Scroll to the last message when too many messages are in the chat box
chat.scrollTop = chat.scrollHeight;
};

// A function to start the conversation
// Function to start the conversation
const greetUser = () => {
// Here we call the function showMessage, that we declared earlier with the argument:
// "Hello there, what's your name?" for message, and the argument "bot" for sender
showMessage("Hello there, what's your name?", 'bot')
// Just to check it out, change 'bot' to 'user' here 👆 and see what happens
}

// Eventlisteners goes here 👇

// Here we invoke the first function to get the chatbot to ask the first question when
// the website is loaded. Normally we invoke functions like this: greeting()
// To add a little delay to it, we can wrap it in a setTimeout (a built in JavaScript function):
// and pass along two arguments:
// 1.) the function we want to delay, and 2.) the delay in milliseconds
// This means the greeting function will be called one second after the website is loaded.
setTimeout(greetUser, 1000)
showMessage("Hello there, what's your name?", 'bot');

const inputWrapper = document.getElementById('input-wrapper');
inputWrapper.innerHTML = `
<form id="name-form">
<input id="name-input" type="text" placeholder="Enter your name" required />
<button class="send-btn" type="submit">Submit</button>
</form>
`;

document.getElementById('name-form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent default form submission

const userName = document.getElementById('name-input').value;

if (userName) {
showMessage(userName, 'user');
setTimeout(() => {
showMessage(`Nice to meet you, ${userName}! Do you prefer a beach or a mountain trip?`, 'bot');
askForTripType(); // Ask for the trip type next
}, 1000);
}
});
};

// Function to ask for trip type
const askForTripType = () => {
const inputWrapper = document.getElementById('input-wrapper');
inputWrapper.innerHTML = `
<form id="trip-form">
<label for="trip-type">Choose your trip type:</label>
<select id="trip-type" required>
<option value="">Select...</option>
<option value="beach">Beach</option>
<option value="mountain">Mountain</option>
</select>
<button class="send-btn" type="submit">Submit</button>
</form>
`;

document.getElementById('trip-form').addEventListener('submit', function(event) {
event.preventDefault();
const tripType = document.getElementById('trip-type').value;

if (tripType === "beach") {
showMessage("Beach", 'user');
showMessage("I recommend visiting the Maldives for an amazing beach experience!", 'bot');
askForPreferences(); // Continue with the next question
} else if (tripType === "mountain") {
showMessage("Mountain", 'user');
showMessage("I recommend exploring the Swiss Alps for breathtaking mountain views!", 'bot');
askForPreferences(); // Continue with the next question
} else {
showMessage("Please select a valid option.", 'bot');
}
});
};

// Function to ask about travel preferences (updated with "With my partner" option)
const askForPreferences = () => {
const inputWrapper = document.getElementById('input-wrapper');
inputWrapper.innerHTML = `
<p>Do you like to travel alone, with friends, or with your partner?</p>
<button id="alone-btn">Alone</button>
<button id="friends-btn">With friends</button>
<button id="partner-btn">With my partner</button>
`;

document.getElementById('alone-btn').addEventListener('click', () => {
showMessage("Alone", 'user');
showMessage("Solo trips can be really peaceful! How about a quiet place in the mountains?", 'bot');
});

document.getElementById('friends-btn').addEventListener('click', () => {
showMessage("With friends", 'user');
showMessage("Trips with friends are so much fun! A beach resort could be perfect.", 'bot');
});

document.getElementById('partner-btn').addEventListener('click', () => {
showMessage("With my partner", 'user');
showMessage("Paris is the city of love! I recommend a romantic trip to Paris!", 'bot');
});
};

// Start the conversation with a delay
setTimeout(greetUser, 1000);
62 changes: 61 additions & 1 deletion code/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,4 +147,64 @@ button {
button:hover {
opacity: 0.9;
transition: all 0.2s ease;
}
}

/* Ajout de styles responsives */
@media (max-width: 600px) {
h1 {
font-size: 24px;
}

h2 {
font-size: 20px;
}

.chat {
width: 100%;
padding: 10px;
}

.bubble {
font-size: 14px;
padding: 10px 16px;
max-width: 60%; /* Les bulles prennent plus de place sur les petits écrans */
}

.bot-msg img,
.user-msg img {
width: 40px;
height: 40px;
}

input {
padding: 12px;
font-size: 14px;
}

button {
padding: 12px;
font-size: 14px;
}
}

@media (min-width: 1200px) {
main {
max-width: 1600px;
}

.bubble {
font-size: 18px;
padding: 20px;
max-width: 30%; /* Sur les grands écrans, les bulles prennent moins de place */
}

input {
padding: 18px;
font-size: 18px;
}

button {
padding: 18px;
font-size: 18px;
}
}