Technigo · smily342 · Sep 26, 2024 · Oct 6, 2024
diff --git a/code/index.html b/code/index.html
@@ -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>
diff --git a/code/script.js b/code/script.js
@@ -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">
@@ -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">
@@ -26,28 +22,165 @@ 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}! I'm a travel bot, let's plan a nice trip. Will you be traveling solo, with friends, or as a couple?`, 'bot');
+        askForTripType(); // Ask for the trip type next
+      }, 1000);
+    }
+  });
+};
+
+// Function to ask for trip type (Solo, friends or couple)
+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="Solo">Solo</option>
+        <option value="Friends">Friends</option>
+        <option value="Couple">Couple</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 === "Solo") {
+      showMessage("Solo", 'user');
+      suggestSoloDestinations(); // Suggest solo destinations
+    } else if (tripType === "Friends") {
+      showMessage("With Friends", 'user');
+      suggestFriendsDestinations(); // Suggest friends destinations
+    } else if (tripType === "Couple") {
+      showMessage("As a Couple", 'user');
+      suggestCoupleDestinations(); // Suggest couple destinations
+    } else {
+      showMessage("Please select a valid option.", 'bot');
+    }
+  });
+};
+
+// Function to suggest solo destinations and let the user choose
+const suggestSoloDestinations = () => {
+  showMessage("How about a trip to Japan or New Zealand?", 'bot');
+
+  const inputWrapper = document.getElementById('input-wrapper');
+  inputWrapper.innerHTML = `
+    <button id="japan-btn">Japan</button>
+    <button id="nz-btn">New Zealand</button>
+  `;
+
+  // Event listeners for the destination choice
+  document.getElementById('japan-btn').addEventListener('click', () => {
+    confirmChoice("Japan");
+  });
+
+  document.getElementById('nz-btn').addEventListener('click', () => {
+    confirmChoice("New Zealand");
+  });
+};
+
+// Function to suggest destinations for friends and let the user choose
+const suggestFriendsDestinations = () => {
+  showMessage("How about a fun trip to Thailand or Spain?", 'bot');
+
+  const inputWrapper = document.getElementById('input-wrapper');
+  inputWrapper.innerHTML = `
+    <button id="thailand-btn">Thailand</button>
+    <button id="spain-btn">Spain</button>
+  `;
+
+  // Event listeners for the destination choice
+  document.getElementById('thailand-btn').addEventListener('click', () => {
+    confirmChoice("Thailand");
+  });
+
+  document.getElementById('spain-btn').addEventListener('click', () => {
+    confirmChoice("Spain");
+  });
+};
+
+// Function to suggest destinations for couples and let the user choose
+const suggestCoupleDestinations = () => {
+  showMessage("How about a romantic trip to Italy or Greece?", 'bot');
+
+  const inputWrapper = document.getElementById('input-wrapper');
+  inputWrapper.innerHTML = `
+    <button id="italy-btn">Italy</button>
+    <button id="greece-btn">Greece</button>
+  `;
+
+  // Event listeners for the destination choice
+  document.getElementById('italy-btn').addEventListener('click', () => {
+    confirmChoice("Italy");
+  });
+
+  document.getElementById('greece-btn').addEventListener('click', () => {
+    confirmChoice("Greece");
+  });
+};
+
+// Function to confirm the user's choice and provide a validation step
+const confirmChoice = (destination) => {
+  showMessage(`You selected ${destination}. Do you want to confirm this choice?`, 'bot');
+
+  const inputWrapper = document.getElementById('input-wrapper');
+  inputWrapper.innerHTML = `
+    <button id="confirm-btn">Confirm</button>
+    <button id="change-btn">Change destination</button>
+  `;
+
+  document.getElementById('confirm-btn').addEventListener('click', () => {
+    showMessage(`Confirmed! You will travel to ${destination}.`, 'user');
+    setTimeout(() => endConversation(), 1000);
+  });
+
+  document.getElementById('change-btn').addEventListener('click', () => {
+    if (destination === "Japan" || destination === "New Zealand") {
+      suggestSoloDestinations();
+    } else if (destination === "Thailand" || destination === "Spain") {
+      suggestFriendsDestinations();
+    } else if (destination === "Italy" || destination === "Greece") {
+      suggestCoupleDestinations();
+    }
+  });
+};
+
+// Function to end the conversation
+const endConversation = () => {
+  showMessage("Awesome choice! I'll send the tickets to your mail right away. Thank you for trusting me!", 'bot');
+};
+
+// Start the conversation with a delay
+setTimeout(greetUser, 1000);
diff --git a/code/style.css b/code/style.css
@@ -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;
+  }
+}