From c3729e2beb75ba0b5f6140cbb730a548e2a3617e Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Wed, 11 Sep 2024 15:44:23 +0200 Subject: [PATCH 1/7] First update - Step 1 --- code/script.js | 2 ++ code/style.css | 1 + 2 files changed, 3 insertions(+) diff --git a/code/script.js b/code/script.js index 125d6904..5736c8a8 100644 --- a/code/script.js +++ b/code/script.js @@ -19,6 +19,8 @@ const showMessage = (message, sender) => { // 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') { + console.log(`Welcome to the chat`); + chat.innerHTML += `
Bot diff --git a/code/style.css b/code/style.css index a275402f..17e48a07 100644 --- a/code/style.css +++ b/code/style.css @@ -51,6 +51,7 @@ input { main { margin: 0 auto; width: 100%; + /* row 55 and 56 makes it responsive */ max-width: 700px; height: 600px; border-radius: 30px; From 8c07479e54e8368091d974e7d8b142ec24d59462 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Wed, 11 Sep 2024 16:24:58 +0200 Subject: [PATCH 2/7] Update - Step 2 --- code/index.html | 52 ++++++++++++++++++++++++------------------------- code/script.js | 2 +- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/code/index.html b/code/index.html index 316eb187..9423c2f0 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,32 @@ - - - - - - Chatbot - + + + + + + Chatbot + - -

Welcome to my chatbot!

-
-
-
-
- - - -
-
-
+ +

Elina's Pizzeria 👨‍🍳🍕

+
+
+
+
+ + + +
+
+
- - + + - + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 5736c8a8..b5362d20 100644 --- a/code/script.js +++ b/code/script.js @@ -40,7 +40,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 there, welcome to Elina's Pizzeria! What's your name?", 'bot') // Just to check it out, change 'bot' to 'user' here 👆 and see what happens } From 41878d8e1bb263b7e690e5e5e28316c47b37cb9d Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Fri, 13 Sep 2024 14:14:30 +0200 Subject: [PATCH 3/7] Update - Step 3,4 & 5 --- code/index.html | 4 +- code/script.js | 103 ++++++++++++++++++++++++++++++++---------------- code/style.css | 8 ++++ 3 files changed, 79 insertions(+), 36 deletions(-) diff --git a/code/index.html b/code/index.html index 9423c2f0..45c7562b 100644 --- a/code/index.html +++ b/code/index.html @@ -12,7 +12,9 @@ -

Elina's Pizzeria 👨‍🍳🍕

+

🍕Elina's Daily Surprise Pizzeria 🍕

+

Here's how it works: We’ve got three amazing choices today but here’s the twist – the + exact dish is a surprise!

diff --git a/code/script.js b/code/script.js index b5362d20..c7b7d57b 100644 --- a/code/script.js +++ b/code/script.js @@ -1,14 +1,47 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 -const chat = document.getElementById('chat') +document.addEventListener("DOMContentLoaded", () => { -// Functions goes here 👇 + // The form element + const form = document.getElementById("name-form"); + // The input where the name is typed + const nameInput = document.getElementById("name-input"); + // The chat container where messages are shown + const chat = document.getElementById("chat"); + let inputWrapper = document.getElementById("inputWrapper"); -// 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') { - chat.innerHTML += ` + // Functions goes here 👇 + const handleNameInput = (event) => { + event.preventDefault(); + // Store the value in a variable so we can access it after we + // clear it from the input + const name = nameInput.value; + showMessage(name, "user"); + nameInput.value = ""; + + // After 1 second, show the next question by invoking the next function. + // passing the name into it to have access to the user's name if we want + // to use it in the next question from the bot. + setTimeout(() => showFoodOptions(name), 1000); + }; + + const showFoodOptions = (name) => { + if ((name === "Pizza") || (name === "pizza")) { + showMessage("You've ordered a Daily Surprise Pizza! It'll be ready for pick up in 15 minutes, pay upon arrival.
Adult size = 150SEK Child size = 100SEK 😋", "bot"); + } else if ((name === "Pasta") || (name === "pasta")) { + showMessage("You've ordered a Daily Surprise Pasta! It'll be ready for pick up in 15 minutes, pay upon arrival.
Adult size = 130SEK Child size = 80SEK 😋", "bot"); + } else if ((name === "Salad") || (name === "salad")) { + showMessage("You've ordered a Daily Surprise Salad! It'll be ready for pick up in 15 minutes, pay upon arrival.
Adult size = 120SEK Child size = 70SEK 😋", "bot"); + } else { + showMessage(`Hello ${name}, what type of food would you like today?\nPlease write your option:\nPizza, \nPasta\n or Salad 🍽️`, "bot"); + } + } + + // 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') { + chat.innerHTML += `

${message}

@@ -16,12 +49,12 @@ const showMessage = (message, sender) => { User
` - // 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') { - console.log(`Welcome to the chat`); + // 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') { + console.log(`Welcome to the chat`); - chat.innerHTML += ` + chat.innerHTML += `
Bot
@@ -29,27 +62,27 @@ const showMessage = (message, sender) => {
` + } + + // 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: + showMessage("Hello there, welcome to Elina's Pizzeria! What's your name?", "bot") } - // 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, welcome to Elina's Pizzeria! What's your name?", 'bot') - // Just to check it out, change 'bot' to 'user' here 👆 and see what happens -} - -// 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) + // Eventlisteners goes here + form.addEventListener("submit", handleNameInput); + + // 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) +}); \ No newline at end of file diff --git a/code/style.css b/code/style.css index 17e48a07..f03c8427 100644 --- a/code/style.css +++ b/code/style.css @@ -26,6 +26,14 @@ h2 { margin-bottom: 36px; } +h4 { + font-weight: bold; + font-size: 18px; + line-height: 34px; + color: #fff; + text-align: center; +} + p { font-size: 18px; font-weight: 600; From c8f94a62c5640d481d3c375f74cbabc97ebf3180 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 15 Sep 2024 11:20:07 +0200 Subject: [PATCH 4/7] Update - added content to readme file & media queries to CSS file --- README.md | 7 ++----- code/index.html | 4 ++-- code/script.js | 24 ++++++++++-------------- code/style.css | 38 ++++++++++++++++++++++++++++++++++++-- 4 files changed, 50 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 60f55e53..7d85cb73 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,9 @@ # Project Name +The assigment was to create a functional chatbot using Javascript, HTML and CSS. I've made a pizzeria called "Elina's daily surprise pizzeria". -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. ## The problem - -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? +I've struggled a alot this week. I've found it very hard to make sense out of the starter code and how to add the right code in general. I tried making buttons and select options but I could never make it work. Therefor I approached the different steps in another way than I think we were suppose to. I kept looking at the videos on disco but for me it was very hard to apply the content to this weeks assigment. Since I didn't figure out how to make buttons and select options I did a simple version of the chatbot. The customer can't pick the type of pizza, pasta or salad only the food type, hence the "Daily Surprise" solution. Tools I used were chatgbpt, stack overflow, the material on disco and google. ## View it live diff --git a/code/index.html b/code/index.html index 45c7562b..627b2405 100644 --- a/code/index.html +++ b/code/index.html @@ -12,8 +12,8 @@ -

🍕Elina's Daily Surprise Pizzeria 🍕

-

Here's how it works: We’ve got three amazing choices today but here’s the twist – the +

Elina's Daily Surprise Pizzeria 👨‍🍳🍕

+

Here's how it works: We've got three amazing choices today but here's the twist - the exact dish is a surprise!

diff --git a/code/script.js b/code/script.js index c7b7d57b..5fc70856 100644 --- a/code/script.js +++ b/code/script.js @@ -1,6 +1,5 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 document.addEventListener("DOMContentLoaded", () => { - // The form element const form = document.getElementById("name-form"); // The input where the name is typed @@ -12,27 +11,25 @@ document.addEventListener("DOMContentLoaded", () => { // Functions goes here 👇 const handleNameInput = (event) => { event.preventDefault(); - // Store the value in a variable so we can access it after we - // clear it from the input + // Store the value in a variable so we can access it after we clear it from the input const name = nameInput.value; showMessage(name, "user"); nameInput.value = ""; // After 1 second, show the next question by invoking the next function. - // passing the name into it to have access to the user's name if we want - // to use it in the next question from the bot. + // passing the name into it to have access to the user's name if we want to use it in the next question from the bot. setTimeout(() => showFoodOptions(name), 1000); }; const showFoodOptions = (name) => { if ((name === "Pizza") || (name === "pizza")) { - showMessage("You've ordered a Daily Surprise Pizza! It'll be ready for pick up in 15 minutes, pay upon arrival.
Adult size = 150SEK Child size = 100SEK 😋", "bot"); + showMessage("You've ordered a Daily Surprise Pizza! It'll be ready for pick up in 15 minutes, pay upon arrival😋
Adult size = 150SEK Child size = 100SEK", "bot"); } else if ((name === "Pasta") || (name === "pasta")) { - showMessage("You've ordered a Daily Surprise Pasta! It'll be ready for pick up in 15 minutes, pay upon arrival.
Adult size = 130SEK Child size = 80SEK 😋", "bot"); + showMessage("You've ordered a Daily Surprise Pasta! It'll be ready for pick up in 15 minutes, pay upon arrival😋
Adult size = 130SEK Child size = 80SEK", "bot"); } else if ((name === "Salad") || (name === "salad")) { - showMessage("You've ordered a Daily Surprise Salad! It'll be ready for pick up in 15 minutes, pay upon arrival.
Adult size = 120SEK Child size = 70SEK 😋", "bot"); + showMessage("You've ordered a Daily Surprise Salad! It'll be ready for pick up in 15 minutes, pay upon arrival😋
Adult size = 120SEK Child size = 70SEK", "bot"); } else { - showMessage(`Hello ${name}, what type of food would you like today?\nPlease write your option:\nPizza, \nPasta\n or Salad 🍽️`, "bot"); + showMessage(`Hello ${name}, what type of food would you like today?
Please write your option: Pizza, Pasta or Salad 🍽️`, "bot"); } } @@ -40,7 +37,7 @@ document.addEventListener("DOMContentLoaded", () => { 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 += `
@@ -51,7 +48,7 @@ document.addEventListener("DOMContentLoaded", () => { ` // 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') { + } else if (sender === "bot") { console.log(`Welcome to the chat`); chat.innerHTML += ` @@ -64,15 +61,14 @@ document.addEventListener("DOMContentLoaded", () => { ` } - // This little thing makes the chat scroll to the last message when there are too many to - // be shown in the chat box + // 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: - showMessage("Hello there, welcome to Elina's Pizzeria! What's your name?", "bot") + showMessage("Hello there!
Welcome to Elina's Daily Surprise Pizzeria!
What's your name?", "bot") } // Eventlisteners goes here diff --git a/code/style.css b/code/style.css index f03c8427..3a64bf25 100644 --- a/code/style.css +++ b/code/style.css @@ -11,7 +11,7 @@ body { h1 { font-weight: bold; - font-size: 28px; + font-size: 30px; line-height: 34px; color: #fff; text-align: center; @@ -28,7 +28,7 @@ h2 { h4 { font-weight: bold; - font-size: 18px; + font-size: 24px; line-height: 34px; color: #fff; text-align: center; @@ -156,4 +156,38 @@ button { button:hover { opacity: 0.9; transition: all 0.2s ease; +} + +/* Media Queries */ +/* Mobile */ +@media only screen and (min-width: 320px) and (max-width: 767px) { + h1 { + font-size: 20px; + } + + h4 { + font-size: 14px; + } +} + +/* Tablet */ +@media only screen and (min-width: 768px) and (max-width: 1023px) { + h1 { + font-size: 24px; + } + + h4 { + font-size: 18px; + } +} + +/* Desktop */ +@media only screen and (min-width: 1024px) and (max-width: 1600px) { + h1 { + font-size: 30px; + } + + h4 { + font-size: 24px; + } } \ No newline at end of file From bf6b2ad8ba4cd41ba45f3bb0e7bd81659bd03fec Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 15 Sep 2024 11:22:28 +0200 Subject: [PATCH 5/7] Update - changed readme file --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7d85cb73..d644103d 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ The assigment was to create a functional chatbot using Javascript, HTML and CSS. ## The problem -I've struggled a alot this week. I've found it very hard to make sense out of the starter code and how to add the right code in general. I tried making buttons and select options but I could never make it work. Therefor I approached the different steps in another way than I think we were suppose to. I kept looking at the videos on disco but for me it was very hard to apply the content to this weeks assigment. Since I didn't figure out how to make buttons and select options I did a simple version of the chatbot. The customer can't pick the type of pizza, pasta or salad only the food type, hence the "Daily Surprise" solution. Tools I used were chatgbpt, stack overflow, the material on disco and google. +I've struggled alot this week. I've found it very hard to make sense out of the starter code and how to add the right code in general. I tried making buttons and select options but I could never make it work. Therefor I approached the different steps in another way than I think we were suppose to. I kept looking at the videos on disco but for me it was very hard to apply the content to this weeks assigment. Since I didn't figure out how to make buttons and select options I did a simple version of the chatbot. The customer can't pick the type of pizza, pasta or salad only the food type, hence the "Daily Surprise" solution. Tools I used were chatgbpt, stack overflow, the material on disco and google. ## View it live From 724f64243bf4fb668a0de7551e01018934224f5e Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 15 Sep 2024 11:30:45 +0200 Subject: [PATCH 6/7] Added deployed link to readme file --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index d644103d..1050a51f 100644 --- a/README.md +++ b/README.md @@ -6,5 +6,4 @@ The assigment was to create a functional chatbot using Javascript, HTML and CSS. I've struggled alot this week. I've found it very hard to make sense out of the starter code and how to add the right code in general. I tried making buttons and select options but I could never make it work. Therefor I approached the different steps in another way than I think we were suppose to. I kept looking at the videos on disco but for me it was very hard to apply the content to this weeks assigment. Since I didn't figure out how to make buttons and select options I did a simple version of the chatbot. The customer can't pick the type of pizza, pasta or salad only the food type, hence the "Daily Surprise" solution. Tools I used were chatgbpt, stack overflow, the material on disco and google. ## 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://sprightly-gecko-87af32.netlify.app/ From eea88e05b01ab9a0813cd8242a38ed8adcd3acc8 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Mon, 30 Sep 2024 23:17:59 +0200 Subject: [PATCH 7/7] Update changes requested - changed chatbot and added buttons and drop down menu and deleted the surprise pizza concept --- code/index.html | 8 +-- code/script.js | 149 +++++++++++++++++++++++++++++++++--------------- 2 files changed, 107 insertions(+), 50 deletions(-) diff --git a/code/index.html b/code/index.html index 627b2405..2e48f169 100644 --- a/code/index.html +++ b/code/index.html @@ -6,18 +6,16 @@ Chatbot -

Elina's Daily Surprise Pizzeria 👨‍🍳🍕

-

Here's how it works: We've got three amazing choices today but here's the twist - the - exact dish is a surprise!

+

Elina's Pizzeria 👨‍🍳🍕

-
+
diff --git a/code/script.js b/code/script.js index 5fc70856..eefd95d9 100644 --- a/code/script.js +++ b/code/script.js @@ -1,56 +1,122 @@ -// DOM selectors (variables that point to selected DOM elements) goes here 👇 +// DOM selectors👇 document.addEventListener("DOMContentLoaded", () => { - // The form element const form = document.getElementById("name-form"); - // The input where the name is typed const nameInput = document.getElementById("name-input"); - // The chat container where messages are shown const chat = document.getElementById("chat"); let inputWrapper = document.getElementById("inputWrapper"); - // Functions goes here 👇 + // Function to handle the name input const handleNameInput = (event) => { event.preventDefault(); - // Store the value in a variable so we can access it after we clear it from the input const name = nameInput.value; showMessage(name, "user"); nameInput.value = ""; + setTimeout(() => askForFood(name), 1000); // Ask for food choice + }; + + // Function to ask for food options with buttons + const askForFood = (name) => { + showMessage(`Nice to meet you ${name}, what would you like to order today?`, "bot"); + + inputWrapper.innerHTML = ` + + + + `; + + document.getElementById("pizzaBtn").addEventListener("click", () => handleFoodChoice("Pizza")); + document.getElementById("pastaBtn").addEventListener("click", () => handleFoodChoice("Pasta")); + document.getElementById("saladBtn").addEventListener("click", () => handleFoodChoice("Salad")); + }; + + // Function to handle the food choice and show specific options based on food type + const handleFoodChoice = (food) => { + showMessage(`You've selected ${food}. Please choose an option:`, "bot"); + + let options = ""; + if (food === "Pizza") { + options = ` + + `; + } else if (food === "Pasta") { + options = ` + + `; + } else if (food === "Salad") { + options = ` + + `; + } + + inputWrapper.innerHTML = `${options} `; + + document.getElementById("selectOptionBtn").addEventListener("click", () => { + const selectedFoodOption = document.getElementById("foodOptions").value; + showMessage(`You've chosen ${selectedFoodOption}.`, "user"); + setTimeout(() => askForSize(selectedFoodOption, food), 1000); // Pass food type and option to ask for size + }); + }; - // After 1 second, show the next question by invoking the next function. - // passing the name into it to have access to the user's name if we want to use it in the next question from the bot. - setTimeout(() => showFoodOptions(name), 1000); + // Function to ask for the size of the selected food + const askForSize = (selectedFoodOption, foodType) => { + showMessage(`What size would you like for your ${selectedFoodOption}?`, "bot"); + + inputWrapper.innerHTML = ` + + + `; + + document.getElementById("adultSizeBtn").addEventListener("click", () => handleFoodSize(selectedFoodOption, foodType, "Adult")); + document.getElementById("childSizeBtn").addEventListener("click", () => handleFoodSize(selectedFoodOption, foodType, "Child")); + }; + + // Function to handle the size selection and confirm the order + const handleFoodSize = (selectedFoodOption, foodType, size) => { + showMessage(`You've selected ${size} size for your ${selectedFoodOption}.`, "user"); + setTimeout(() => confirmOrder(selectedFoodOption, foodType, size), 1000); }; - const showFoodOptions = (name) => { - if ((name === "Pizza") || (name === "pizza")) { - showMessage("You've ordered a Daily Surprise Pizza! It'll be ready for pick up in 15 minutes, pay upon arrival😋
Adult size = 150SEK Child size = 100SEK", "bot"); - } else if ((name === "Pasta") || (name === "pasta")) { - showMessage("You've ordered a Daily Surprise Pasta! It'll be ready for pick up in 15 minutes, pay upon arrival😋
Adult size = 130SEK Child size = 80SEK", "bot"); - } else if ((name === "Salad") || (name === "salad")) { - showMessage("You've ordered a Daily Surprise Salad! It'll be ready for pick up in 15 minutes, pay upon arrival😋
Adult size = 120SEK Child size = 70SEK", "bot"); - } else { - showMessage(`Hello ${name}, what type of food would you like today?
Please write your option: Pizza, Pasta or Salad 🍽️`, "bot"); + // Function to confirm the order and show the final message + const confirmOrder = (selectedFoodOption, foodType, size) => { + let price = 0; + + if (foodType === "Pizza") { + price = size === "Adult" ? 150 : 100; + } else if (foodType === "Pasta") { + price = size === "Adult" ? 130 : 80; + } else if (foodType === "Salad") { + price = size === "Adult" ? 120 : 70; } - } - // A function that will add a chat bubble in the correct place based on who the sender is + showMessage(`Thank you! Your ${size} ${selectedFoodOption} will be ready in 15 minutes. The price is ${price} SEK. Please pay upon arrival! 😋`, "bot"); + + inputWrapper.innerHTML = ""; // Clear inputWrapper for no further input + }; + + // Function to show messages in the chat 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") { chat.innerHTML += `

${message}

- User + User
- ` - // 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") { - console.log(`Welcome to the chat`); - chat.innerHTML += `
Bot @@ -58,27 +124,20 @@ document.addEventListener("DOMContentLoaded", () => {

${message}

- ` + `; } - // 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 - } + chat.scrollTop = chat.scrollHeight; + }; - // A function to start the conversation + // Function to start the conversation const greetUser = () => { - // Here we call the function showMessage, that we declared earlier with the argument: - showMessage("Hello there!
Welcome to Elina's Daily Surprise Pizzeria!
What's your name?", "bot") - } + showMessage("Hello there!
Welcome to Elina's Pizzeria!
What's your name?", "bot"); + }; - // Eventlisteners goes here + // Event listeners go here form.addEventListener("submit", handleNameInput); - // 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) -}); \ No newline at end of file + // Start the bot with a delay when the page loads + setTimeout(greetUser, 1000); +});