Technigo · mikaeber · Sep 13, 2024 · Sep 13, 2024 · Sep 15, 2024 · Sep 15, 2024
diff --git a/README.md b/README.md
@@ -1,13 +1,7 @@
-# Project Name
+# Chatbot
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## The problem
-
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+An assignment to create an interactive chatbot using form
 
 ## View it live
 
-Have you deployed your project somewhere? Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://mikaschatbot.netlify.app
diff --git a/code/assets/.DS_Store b/code/assets/.DS_Store
diff --git a/code/index.html b/code/index.html
@@ -1,32 +1,28 @@
-<!DOCTYPE html>
+<!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>
+      rel="stylesheet"
+    />
+    <title>Mika's 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>
+        <form id="form">
           <input id="name-input" type="text" />
-          <button class="send-btn" type="submit">
-            Send
-          </button>
+          <button id="btn" class="send-btn" type="submit">Send</button>
         </form>
       </div>
     </main>
 
     <script src="./script.js"></script>
   </body>
-
 </html>
diff --git a/code/script.js b/code/script.js
@@ -1,53 +1,148 @@
-// DOM selectors (variables that point to selected DOM elements) goes here 👇
-const chat = document.getElementById('chat')
+// DOM selectors 👇
+const chat = document.getElementById("chat");
+const userInput = document.getElementById("name-input");
+const form = document.getElementById("form");
 
-// Functions goes here 👇
-
-// 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') {
+// Function that will add a chat bubble in the correct place based on who the sender is
+const showMessage = (message, sender, isLoading = false) => {
+  const messageClass = isLoading ? "loading-message" : "";
+  if (sender === "user") {
     chat.innerHTML += `
       <section class="user-msg">
         <div class="bubble user-bubble">
           <p>${message}</p>
         </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') {
+    `;
+  } else if (sender === "bot") {
     chat.innerHTML += `
       <section class="bot-msg">
         <img src="assets/bot.png" alt="Bot" />
-        <div class="bubble bot-bubble">
+        <div class="bubble bot-bubble ${messageClass}">
           <p>${message}</p>
         </div>
       </section>
-    `
+    `;
+  }
+  chat.scrollTop = chat.scrollHeight;
+};
+
+// Function to start the conversation
+const greetUser = () => {
+  showMessage("Hey you, what's your name?", "bot");
+};
+
+let numberOfFormSubmits = 0; // initializing the logic to trigger new messages in the form
+
+// Function to handle the form submission
+const handleSubmit = (event) => {
+  event.preventDefault();
+  numberOfFormSubmits++;
+
+  switch (numberOfFormSubmits) {
+    case 1: // Name input
+      const name = userInput.value;
+      showMessage(name, "user");
+      showMessage(`Nice to meet you, ${name}`, "bot");
+      userInput.value = "";
+
+      setTimeout(() => {
+        showMessage(
+          "What would you like to eat? Pizza, Burger, or Salad?",
+          "bot"
+        );
+        updateFormForFoodSelection();
+      }, 1000);
+      break;
+
+    case 2: // Food selection
+      const selectedFood = document.getElementById("food").value;
+      showMessage(selectedFood, "user");
+      showMessage(`${selectedFood} coming up!`, "bot");
+
+      setTimeout(() => {
+        showMessage("What would you like to drink?", "bot");
+        updateFormForDrinkSelection();
+      }, 1000);
+      break;
+
+    case 3: // Drink selection and order confirmation
+      const selectedDrink = document.getElementById("drink").value;
+      showMessage(selectedDrink, "user");
+      showMessage(`${selectedDrink} is a great choice!`, "bot");
+
+      setTimeout(() => {
+        showMessage("Are you sure you want to order?", "bot");
+        updateFormForOrderConfirmation(); // This function also triggers confirmation message
+      }, 1000);
+      break;
+
+    // add more questions here
   }
+}
 
-  // 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
+const updateFormForFoodSelection = () => {
+  form.innerHTML = `
+    <label for="food">Select your food:</label>
+    <select id="food" name="food" required>
+      <option value="" disabled selected>Choose your food</option>
+      <option value="Salad">Salad</option>
+      <option value="Burger">Burger</option>
+      <option value="Pasta">Pasta</option>
+    </select>
+    <button id="btn" class="send-btn" type="submit">Send</button>
+  `;
 }
 
-// A 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
+const updateFormForDrinkSelection = () => {
+  form.innerHTML = `
+    <label for="drink">Select your drink:</label>
+    <select id="drink" name="drink" required>
+      <option value="" disabled selected>Choose your drink</option>
+      <option value="Coca Cola">Coca Cola</option>
+      <option value="Water">Water</option>
+      <option value="Wine">Wine</option>
+    </select>
+    <button id="btn" class="send-btn" type="submit">Send</button>
+  `;
+}
+
+const updateFormForOrderConfirmation = () => {
+  form.innerHTML = `
+    <button type="button" id="confirmation" onclick="orderConfirmation('Yes')">Yes</button>
+    <button type="button" id="confirmation" onclick="orderConfirmation('No')">No</button>
+  `;
+}
+
+const orderConfirmation = (confirmation) => {
+  showMessage(confirmation, "user");
+
+  if (confirmation === "Yes") {
+    showMessage("Preparing your order", "bot", true);
+
+    setTimeout(() => {
+      const loadingMessage = document.querySelector(".loading-message");
+      if (loadingMessage) {
+        loadingMessage.classList.remove("loading-message");
+        loadingMessage.querySelector("p").textContent =
+          "Thanks for ordering! The food will be ready soon 🍽️";
+      }
+      clearForm();
+    }, 3000);
+  } else {
+    setTimeout(() => {
+      showMessage("Please come back another time!", "bot");
+      clearForm();
+    }, 1000);
+  }
+}
+
+const clearForm = () => {
+  form.innerHTML = "";
 }
 
-// Eventlisteners goes here 👇
+// Eventlisteners👇
+form.addEventListener("submit", (event) => handleSubmit(event));
 
-// 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)
+setTimeout(greetUser, 1000);
diff --git a/code/style.css b/code/style.css
@@ -5,7 +5,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
   background: #0026ff;
 }
 
@@ -33,15 +33,16 @@ p {
   margin: 0;
 }
 
-input {
+input,
+select {
   box-sizing: border-box;
   border: none;
   border-radius: 4px 0 0 4px;
   background: #e5e9ff;
   color: #0026ff;
   padding: 16px;
   font-size: 16px;
-  font-family: 'Montserrat';
+  font-family: "Montserrat";
   font-weight: 600;
   line-height: 26px;
   flex: 1;
@@ -123,7 +124,7 @@ main {
 
 label {
   font-size: 16px;
-  font-family: 'Montserrat';
+  font-family: "Montserrat";
   font-weight: 500;
   color: #0026ff;
   margin-right: 20px;
@@ -138,7 +139,7 @@ button {
   margin-right: 4px;
   font-size: 16px;
   line-height: 26px;
-  font-family: 'Montserrat';
+  font-family: "Montserrat";
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
@@ -147,4 +148,48 @@ button {
 button:hover {
   opacity: 0.9;
   transition: all 0.2s ease;
-}
+}
+
+#confirmation {
+  display: flex;
+  justify-content: center;
+  width: 80%;
+}
+
+select,
+input[type="range"] {
+  padding: 16px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  height: 30px;
+  width: 10px;
+}
+
+@keyframes loadingDots {
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
+  }
+}
+
+.loading-message::after {
+  content: "";
+  display: inline-block;
+  animation: loadingDots 1.5s infinite;
+}