Technigo · gittebe · Sep 10, 2024 · Sep 12, 2024 · Sep 13, 2024 · Sep 14, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +1,40 @@
-# Project Name
+# Seafood Restaurant Chatbot Ordering System
+This project is an interactive chatbot that allows users to order food from a fictional seafood restaurant. The chatbot guides users through the ordering process, helping them choose from a menu of seafood dishes, confirming their order, and providing a user-friendly chat interface.
 
-Replace this readme with your own information about your project.
+# Features:
+Greeting & Interaction: The bot greets the user and asks if they are ready to start the order.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+User Name Collection: The chatbot asks for the user's name and stores it for personalized communication throughout the session.
 
-## The problem
+Food Type Selection: The bot offers the user the choice of different types of seafood dishes, such as Fish, Shellfish, and Mollusks.
 
-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?
+Dish Selection: Based on the chosen food type, the user can select specific dishes like Grilled Salmon, Fish and Chips, Shrimp, Lobster, Paella, and Calamari.
 
-## View it live
+Order Confirmation: Once a dish is selected, the bot confirms the order and asks the user if they are sure about their choice, simulating an order confirmation process.
+
+Chat UI: An intuitive and simple interface for the user to interact with the bot. It displays the chat in a "bubble" format with both user and bot messages, and the user can respond by selecting buttons.
+
+# Technologies Used
+HTML5 for the basic page structure.
+
+CSS for styling the chat and page layout.
+
+JavaScript for managing user input, dynamic content updates, and chatbot logic.
+
+Control Chatbot Flow: Based on the user’s input, the chatbot dynamically updates the conversation by adding new messages to the chat. JavaScript is responsible for triggering events, such as when a user clicks a button or enters their name.
+
+Event Handling: JavaScript listens for user interactions, like button clicks, and updates the chat UI accordingly. For example, when a user selects a type of seafood or a dish, the chatbot responds by showing new options.
 
-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.
+DOM Manipulation: JavaScript dynamically creates and appends new HTML elements (such as buttons, messages, and forms) into the chat area by manipulating the DOM (Document Object Model). This ensures that the page content updates without needing to reload the entire page.
+
+Order Flow Management: The bot’s logic handles the sequence of steps, guiding the user from the greeting phase to dish selection, order confirmation, and final messages. JavaScript ensures that the chatbot remembers the user’s previous choices and asks follow-up questions accordingly.
+
+# Improvements
+The chatbot could be enhanced to handle more complex interactions, such as adding multiple items to the cart, tracking orders, and providing delivery options.
+
+A backend API could be integrated to store and retrieve orders, making the system dynamic.
+
+Improved error handling and input validation to ensure a smooth user experience.
+
+## View it live
+https://seafood-restaurant-order-bot.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/assets/.DS_Store b/code/assets/.DS_Store
diff --git a/code/assets/background-bubbles.jpg b/code/assets/background-bubbles.jpg
diff --git a/code/assets/bot-chat.png b/code/assets/bot-chat.png
diff --git a/code/assets/crab.png b/code/assets/crab.png
diff --git a/code/assets/hero-bubbles.jpg b/code/assets/hero-bubbles.jpg
diff --git a/code/assets/user-chat.png b/code/assets/user-chat.png
diff --git a/code/index.html b/code/index.html
@@ -1,32 +1,26 @@
 <!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>Seafood Restaurant</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 id='body'>
+  <header id="header">
+    <h1>Seafood Restaurant</h1>
+  </header>
+  <main id="main">
+    <section class="chat" id="chat"></section>
+    <form id="form" class="form">
+    </form>
+  </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
@@ -1,53 +1,237 @@
-// DOM selectors (variables that point to selected DOM elements) goes here 👇
-const chat = document.getElementById('chat')
+const chat = document.getElementById("chat")
+const main = document.getElementById("main")
 
-// 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') {
+  if (sender === "user") {
     chat.innerHTML += `
-      <section class="user-msg">
-        <div class="bubble user-bubble">
+        <section class="user-message">
+          <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') {
+          </div>
+          <img src="./assets/user-chat.png" alt="user image" class="user-message-img"/>
+        </section>
+        `
+  } else if (sender === "bot") {
     chat.innerHTML += `
-      <section class="bot-msg">
-        <img src="assets/bot.png" alt="Bot" />
-        <div class="bubble bot-bubble">
-          <p>${message}</p>
-        </div>
-      </section>
-    `
+            <section class="bot-message">
+               <img src="./assets/bot-chat.png" alt="user image" class="bot-message-img"/>
+              <div class="bubble bot-bubble">
+                <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
 }
 
-// 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
+// 5. Confirm order with yes/no
+// Confirm order shrimp
+const confirmOrder = (username) => {
+  form.innerHTML += `
+  <div class="confirm-container" id="confirm-container">
+         <button class="confirm-button" id="yes-button" type="button">Yes</button>
+         <button class="confirm-button" id="no-button" type="button">No</button>
+       </div>
+  `
+  document
+    .getElementById("yes-button")
+    .addEventListener("click", () => {
+      showMessage("yes", "user")
+      showMessage(`Thank you,  for your order, ${username}!`, "bot")
+      form.innerHTML = ""
+    })
+  document
+    .getElementById("no-button")
+    .addEventListener("click", () => {
+      showMessage("no", "user")
+      showMessage("Maybe another time", "bot")
+      form.innerHTML = ""
+    })
+}
+
+// 4. Select dish and display message 
+// Select fish dish
+const chooseFish = (username) => {
+  form.innerHTML += `
+  <div class="dish-container" id="dish-container">
+         <button class="dish-button" id="salmon-button" type="button">Grilled Salmon</button>
+         <button class="dish-button" id="fish-chips-button" type="button">Fish and Chips</button>
+       </div>
+ `
+  document
+    .getElementById("salmon-button")
+    .addEventListener("click", () => {
+      showMessage("salmon", "user")
+      showMessage(`The Salmon for you. That will be $15. Are you sure you want to order this?`, "bot")
+      form.innerHTML = ""
+      confirmOrder(username)
+    })
+  document
+    .getElementById("fish-chips-button")
+    .addEventListener("click", () => {
+      showMessage("fish and chips", "user")
+      showMessage(`${username}, you like to order Fish and Chips. Great! That will be $15. Are you sure you want to order this?`, "bot")
+      form.innerHTML = ""
+      confirmOrder(username)
+    })
+}
+
+
+//  select shellfish dish
+
+const chooseShellfish = (username) => {
+
+  form.innerHTML += `
+   <div class="dish-container" id="dish-container">
+          <button class="dish-button" id="shrimp-button" type="button">Shrimp</button>
+          <button class="dish-button" id="lobster-button" type="button">Lobster</button>
+        </div>
+  `
+
+  document
+    .getElementById("shrimp-button")
+    .addEventListener("click", () => {
+      showMessage("shrimp", "user")
+      showMessage(`${username}You like to order Shrimp. Great choice! That will be $15. Are you sure you want to order this?`, "bot")
+      form.innerHTML = ""
+      confirmOrder(username)
+    }
+    )
+
+  document
+    .getElementById("lobster-button")
+    .addEventListener("click", () => {
+      showMessage("lobster", "user")
+      showMessage(`Great choice, ${username}! That will be $15. Are you sure you want to order this?`, "bot")
+      form.innerHTML = ""
+      confirmOrder(username)
+    })
+}
+
+const chooseMollusks = (username) => {
+
+  form.innerHTML += `
+   <div class="dish-container" id="dish-container">
+          <button class="dish-button" id="paella-button" type="button">Paella</button>
+          <button class="dish-button" id="calamari-button" type="button">Calamari</button>
+        </div>
+  `
+
+  document
+    .getElementById("paella-button")
+    .addEventListener("click", () => {
+      showMessage("paella", "user")
+      showMessage(`Great choice, ${username}! That will be $15. Are you sure you want to order this?`, "bot")
+      form.innerHTML = ""
+      confirmOrder(username)
+    }
+    )
+
+  document
+    .getElementById("calamari-button")
+    .addEventListener("click", () => {
+      showMessage("calamari", "user")
+      showMessage(`Great choice, ${username}! That will be $15. Are you sure you want to order this?`, "bot")
+      form.innerHTML = ""
+      confirmOrder(username)
+    })
 }
 
-// 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)
+//3. Select Foodtype
+
+const selectFoodtype = (username) => {
+  showMessage(`Nice to meet you, ${username}! What type of food would you like to eat?`, "bot")
+
+  // Buttons to select the food type
+  form.innerHTML += `
+ <div class="foodtype-container" id="foodtype-container">
+        <button class="foodtype-button" id="fish-button" type="button">🐟 Fish</button>
+        <button class="foodtype-button" id="shellfish-button" type="button">🦀 Shellfish</button>
+        <button class="foodtype-button" id="mollusks-button" type="button">🦪 Mollusks</button>
+      </div>
+`
+  //  Buttons to select the dishes & message
+
+  document
+    .getElementById("fish-button")
+    .addEventListener("click", () => {
+      showMessage("fish", "user")
+      showMessage("Great choice! Select something from the menu!", "bot")
+      form.innerHTML = ""
+      chooseFish(username)
+    })
+
+  document
+    .getElementById("shellfish-button")
+    .addEventListener("click", () => {
+      showMessage("shellfish", "user")
+      showMessage("Great choice! Select something from the menu!", "bot")
+      form.innerHTML = ""
+      chooseShellfish(username)
+    })
+
+  document
+    .getElementById("mollusks-button")
+    .addEventListener("click", () => {
+      showMessage("mollusks", "user")
+      showMessage(`${username}, you like to order mullusks. Please choose a dish!`, "bot")
+      form.innerHTML = ""
+      chooseMollusks(username)
+    })
+}
+
+//2. Asking for the users name, storing the name and display in chat
+
+const askName = () => {
+  showMessage("Wonderful! What is your name?", "bot")
+
+  form.innerHTML += `
+  <input class="input" id="name-input"></input>
+      <button class="input-button" id="send-button" type="submit">ok</button>
+  `
+
+  const inputButton = document.getElementById("send-button")
+  const input = document.getElementById('name-input')
+
+
+  inputButton.addEventListener("click", (event) => {
+    event.preventDefault()
+
+    const username = input.value
+
+    if (username) {
+      showMessage(username, "user")
+      input.style.display = "none"
+      form.innerHTML = ""
+      selectFoodtype(username)
+    }
+    else {
+      showMessage("Please enter your name.", "bot")
+    }
+  }
+  )
+}
+
+
+// 1. Greeting and displaying the button
+
+const greetUser = () => {
+  showMessage("Hello! Are you ready to start the order?", "bot")
+
+  form.innerHTML += `
+
+        <button id="button" class="confirm-button" type="button">yes!</button>
+      `
+
+  const sendButton = document.getElementById("button")
+  //Event: when user clicks the button, 'ok' will be displayed in the chat and the button will be taken off the screene
+
+  sendButton.addEventListener("click", () => {
+    showMessage("Yes!", "user")
+    form.innerHTML = ""
+    askName()
+  })
+
+}
+greetUser()