Technigo · IamLise · Sep 14, 2024 · Sep 15, 2024 · Sep 15, 2024
diff --git a/README.md b/README.md
@@ -11,3 +11,5 @@ 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://splendorous-pegasus-012d17.netlify.app/
diff --git a/code/index.html b/code/index.html
@@ -12,17 +12,61 @@
   </head>
 
   <body>
-    <h1>Welcome to my chatbot!</h1>
+    <h1>Welcome to my Café-bot!</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">
+          <button id="send-btn" class="send-btn" type="submit">
             Send
           </button>
         </form>
+        <form id="optionForm">
+          <button id="beverage-btn" class="beverage-btn" type="submit">
+            Beverage
+          </button>
+          <button id="pastry-btn" class="pastry-btn" type="submit">
+            Pastry
+          </button>
+          <button id="cake-btn" class="cake-btn" type="submit">
+            Cake
+          </button>
+        </form>
+        <form id="optionForm2">
+          <button id="coffee-btn" class="coffee-btn" type="submit">
+            Coffee
+          </button>
+          <button id="tea-btn" class="tea-btn" type="submit">
+            Tea
+          </button>
+          <button id="chocolate-btn" class="chocolate-btn" type="submit">
+            Chocolate
+          </button>
+        </form>
+        <form id="optionForm3">
+          <button id="cinnamon-btn" class="cinnamon-btn" type="submit">
+            Cinnamon roll
+          </button>
+          <button id="danish-btn" class="danish-btn" type="submit">
+            Danish pastry
+          </button>
+          <button id="chocolateBall-btn" class="chocolateBall-btn" type="submit">
+            Chocolate ball
+          </button>
+        </form>
+        <form id="optionForm4">
+          <button id="princess-btn" class="princess-btn" type="submit">
+            Princess cake
+          </button>
+          <button id="almond-btn" class="almond-btn" type="submit">
+            Almond cake
+          </button>
+          <button id="chocolateCake-btn" class="chocolateCake-btn" type="submit">
+            Chocolate cake
+          </button>
+        </form>
       </div>
     </main>
 

diff --git a/code/script.js b/code/script.js
@@ -38,10 +38,58 @@ const showMessage = (message, sender) => {
 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')
+  showMessage("Hello and welcome to the café-bot, what's your name?", 'bot')
   // Just to check it out, change 'bot' to 'user' here 👆 and see what happens
 }
 
+const foodOptionsForm4 = document.getElementById("optionForm4")
+foodOptionsForm4.style.display = "none"
+
+const foodOptionsForm3 = document.getElementById("optionForm3")
+foodOptionsForm3.style.display = "none"
+
+const foodOptionsForm2 = document.getElementById("optionForm2")
+foodOptionsForm2.style.display = "none"
+
+const foodOptionsForm = document.getElementById("optionForm")
+foodOptionsForm.style.display = "none"
+const inputForm = document.getElementById("name-form")
+
+const foodOptions = (name) => {
+  showMessage(`Nice to meet you ${name}. What would you like to order?`, "bot")
+  foodOptionsForm.style.display = "block"
+  inputForm.style.display = "none"
+}
+
+const beverageOptions = () => {
+  showMessage("what kind of beverage would you like?", "bot")
+  foodOptionsForm2.style.display = "block"
+  foodOptionsForm.style.display = "none"
+  inputForm.style.display = "none"
+}
+
+const pastryOptions = () => {
+  showMessage("what kind of pastry would you like?", "bot")
+  foodOptionsForm3.style.display = "block"
+  foodOptionsForm.style.display = "none"
+  inputForm.style.display = "none"
+}
+
+const cakeOptions = () => {
+  showMessage("what kind of cake would you like?", "bot")
+  foodOptionsForm4.style.display = "block"
+  foodOptionsForm.style.display = "none"
+  inputForm.style.display = "none"
+}
+
+const hideOptions = () => {
+  showMessage("Thank you for your order, your order will arrive soon.", "bot")
+  foodOptionsForm4.style.display = "none"
+  foodOptionsForm3.style.display = "none"
+  foodOptionsForm2.style.display = "none"
+}
+
+
 // Eventlisteners goes here 👇
 
 // Here we invoke the first function to get the chatbot to ask the first question when
@@ -51,3 +99,119 @@ const greetUser = () => {
 // 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)
+
+const button = document.getElementById("send-btn")
+
+const nameInput = document.getElementById("name-input")
+
+button.onclick = (event) => {
+  event.preventDefault()
+  const name = nameInput.value
+  showMessage(name, "user")
+  nameInput.value = ""
+  setTimeout(() => foodOptions(name), 1000)
+}
+
+const beverageButton = document.getElementById("beverage-btn")
+
+beverageButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Beverage", "user")
+  beverageOptions()
+}
+
+const pastryButton = document.getElementById("pastry-btn")
+
+pastryButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Pastry", "user")
+  pastryOptions()
+}
+
+const cakeButton = document.getElementById("cake-btn")
+
+cakeButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Cake", "user")
+  cakeOptions()
+}
+
+/*what type of beverage*/ 
+
+
+const coffeeButton = document.getElementById("coffee-btn")
+
+coffeeButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Coffee", "user")
+  hideOptions()
+}
+
+const teaButton = document.getElementById("tea-btn")
+
+teaButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Tea", "user")
+  hideOptions()
+}
+
+const chocolateButton = document.getElementById("chocolate-btn")
+
+chocolateButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Chocolate", "user")
+  hideOptions()
+}
+
+/*what type of pastry*/
+
+const cinnamonButton = document.getElementById("cinnamon-btn")
+
+cinnamonButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Cinnamon roll", "user")
+  hideOptions()
+}
+
+const danishButton = document.getElementById("danish-btn")
+
+danishButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Danish pastry", "user")
+  hideOptions()
+}
+
+const chocolateBallButton = document.getElementById("chocolateBall-btn")
+
+chocolateBallButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Chocolate ball", "user")
+  hideOptions()
+}
+
+/*what type of cake*/
+
+const princessButton = document.getElementById("princess-btn")
+
+princessButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Princess cake", "user")
+  hideOptions()
+}
+
+const almondButton = document.getElementById("almond-btn")
+
+almondButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Almond cake", "user")
+  hideOptions()
+}
+
+const chocolateCakeButton = document.getElementById("chocolateCake-btn")
+
+chocolateCakeButton.onclick = (event) => {
+  event.preventDefault()
+  showMessage("Chocolate cake", "user")
+  hideOptions()
+}
+