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
@@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t
 
 ## 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://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,31 @@
 <!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>
-
-  <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>
-
-</html>
+<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 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>
+
+</html>
diff --git a/code/script.js b/code/script.js
@@ -1,53 +1,247 @@
-// DOM selectors (variables that point to selected DOM elements) goes here 👇
-const chat = document.getElementById('chat')
 
-// Functions goes here 👇
+const chat = document.getElementById("chat")
+const main = document.getElementById("main")
+
+
 
-// 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)
+    })
+}
+
+
+//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)
+    })
 }
 
-// Eventlisteners goes here 👇
+//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')
+
 
-// 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)
+  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()