From 267bf5ede6a452be07d46bc1e5f346d91d4ea5a3 Mon Sep 17 00:00:00 2001 From: IamLise Date: Sat, 14 Sep 2024 23:56:35 +0200 Subject: [PATCH 1/3] step one --- code/index.html | 4 ++-- code/script.js | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/code/index.html b/code/index.html index 316eb187..16a807bc 100644 --- a/code/index.html +++ b/code/index.html @@ -12,14 +12,14 @@ -

Welcome to my chatbot!

+

Welcome to my Café-bot!

-
diff --git a/code/script.js b/code/script.js index 125d6904..b64ebf68 100644 --- a/code/script.js +++ b/code/script.js @@ -38,7 +38,7 @@ 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 } @@ -51,3 +51,18 @@ 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 = "" +} + + + + From 6f6ce6f1dac5549f8bc17b994faf5603a5f7152b Mon Sep 17 00:00:00 2001 From: IamLise Date: Sun, 15 Sep 2024 22:38:46 +0200 Subject: [PATCH 2/3] =?UTF-8?q?caf=C3=A9-bot?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- code/index.html | 44 ++++++++++++++ code/script.js | 149 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 193 insertions(+) diff --git a/code/index.html b/code/index.html index 16a807bc..b9c4a5af 100644 --- a/code/index.html +++ b/code/index.html @@ -23,6 +23,50 @@

Welcome to my Café-bot!

Send +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
diff --git a/code/script.js b/code/script.js index b64ebf68..5c00e781 100644 --- a/code/script.js +++ b/code/script.js @@ -42,6 +42,54 @@ const greetUser = () => { // 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 @@ -61,8 +109,109 @@ button.onclick = (event) => { 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() +} From 004644b279f495a56d85e078853f3811bae22f46 Mon Sep 17 00:00:00 2001 From: IamLise Date: Sun, 15 Sep 2024 23:07:09 +0200 Subject: [PATCH 3/3] changes --- README.md | 2 ++ 1 file changed, 2 insertions(+) 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