diff --git a/README.md b/README.md
index 60f55e53..90fa9462 100644
--- 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/
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index 316eb187..b9c4a5af 100644
--- a/code/index.html
+++ b/code/index.html
@@ -12,17 +12,61 @@
- Welcome to my chatbot!
+ Welcome to my Café-bot!
+
+
+
+
diff --git a/code/script.js b/code/script.js
index 125d6904..5c00e781 100644
--- 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()
+}
+