From 246bc0bd83638584986796796af66b87df43c69c Mon Sep 17 00:00:00 2001 From: Mika Date: Fri, 13 Sep 2024 11:21:35 +0200 Subject: [PATCH 1/5] console log tests and changed greeting message --- code/index.html | 11 ++++------- code/script.js | 23 ++++++++++++----------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/code/index.html b/code/index.html index 316eb187..e5ae3b76 100644 --- a/code/index.html +++ b/code/index.html @@ -1,13 +1,13 @@ - + - + rel="stylesheet" + /> Chatbot @@ -19,14 +19,11 @@

Welcome to my chatbot!

- +
- diff --git a/code/script.js b/code/script.js index 125d6904..d790928d 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,5 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 -const chat = document.getElementById('chat') +const chat = document.getElementById("chat"); // Functions goes here 👇 @@ -7,7 +7,7 @@ const chat = document.getElementById('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') { + if (sender === "user") { chat.innerHTML += `
@@ -15,10 +15,11 @@ 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') { + } else if (sender === "bot") { + console.log("bot"); chat.innerHTML += `
Bot @@ -26,21 +27,21 @@ const showMessage = (message, sender) => {

${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 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("Hey you, what's your name?", "bot"); // Just to check it out, change 'bot' to 'user' here 👆 and see what happens -} +}; // Eventlisteners goes here 👇 @@ -48,6 +49,6 @@ const greetUser = () => { // 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 +// 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) +// setTimeout(greetUser, 1000); From 2c680e898aad3c86883baba7a3a426a9b2f9620b Mon Sep 17 00:00:00 2001 From: Mika Date: Fri, 13 Sep 2024 13:14:40 +0200 Subject: [PATCH 2/5] added user message to chat and added functions to handle submit and count number of submissions to show accurate next prompt --- code/index.html | 2 +- code/script.js | 46 ++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/code/index.html b/code/index.html index e5ae3b76..aa4438e2 100644 --- a/code/index.html +++ b/code/index.html @@ -19,7 +19,7 @@

Welcome to my chatbot!

- +
diff --git a/code/script.js b/code/script.js index d790928d..13b2afca 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,7 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 const chat = document.getElementById("chat"); +const userInput = document.getElementById("name-input"); +const form = document.getElementById("name-form"); // Functions goes here 👇 @@ -19,7 +21,6 @@ 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("bot"); chat.innerHTML += `
Bot @@ -43,7 +44,48 @@ const greetUser = () => { // Just to check it out, change 'bot' to 'user' here 👆 and see what happens }; +function showFoodOptions() { + showMessage("What would you like to eat? Pizza, Burger, or Salad?", "bot"); +} + +function handleFoodChoice(choice) { + showMessage( + `Great choice! ${choice} it is. What would you like to drink?`, + "bot" + ); +} + +function handleDrinkChoice(choice) { + showMessage(`Excellent! I'll get you a ${choice} right away.`, "bot"); + // You could end the conversation here or continue with more questions +} + +let numberOfFormSubmits = 0; // first the + +// Function to handle the form submission +function handleSubmit(event) { + event.preventDefault(); // Prevent the form from submitting normally + showMessage(userInput.value, "user"); // set message to input message // Clear the input field after submission + + numberOfFormSubmits++; //counts how many times this function is used to prompt next message + console.log(numberOfFormSubmits); + + switch (numberOfFormSubmits) { + case 1: + showMessage(`Nice to meet you, ${userInput.value}`, "bot"); + userInput.value = ""; + setTimeout(() => showFoodOptions(), 1000); + break; + case 2: + showMessage(`${userInput.value} is a great choice!`); + break; + default: + console.log("hej default switch"); + } +} + // Eventlisteners goes here 👇 +form.addEventListener("submit", (event) => handleSubmit(event, "greetUser")); // 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() @@ -51,4 +93,4 @@ const greetUser = () => { // 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); +setTimeout(greetUser, 1000); From b46f8b25b950a470473ce1d1ba89b6bea48be1c9 Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 15 Sep 2024 22:26:39 +0200 Subject: [PATCH 3/5] refactor of code and final implementations --- code/index.html | 5 +- code/script.js | 160 ++++++++++++++++++++++++++++++++---------------- code/style.css | 57 +++++++++++++++-- 3 files changed, 159 insertions(+), 63 deletions(-) diff --git a/code/index.html b/code/index.html index aa4438e2..869ba572 100644 --- a/code/index.html +++ b/code/index.html @@ -8,7 +8,7 @@ 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" /> - Chatbot + Mika's Chatbot @@ -16,8 +16,7 @@

Welcome to my chatbot!

-
- +
diff --git a/code/script.js b/code/script.js index 13b2afca..cc02b1b7 100644 --- a/code/script.js +++ b/code/script.js @@ -1,14 +1,11 @@ -// DOM selectors (variables that point to selected DOM elements) goes here 👇 +// DOM selectors 👇 const chat = document.getElementById("chat"); const userInput = document.getElementById("name-input"); -const form = document.getElementById("name-form"); +const form = document.getElementById("form"); -// Functions goes here 👇 - -// 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 +// Function that will add a chat bubble in the correct place based on who the sender is +const showMessage = (message, sender, isLoading = false) => { + const messageClass = isLoading ? "loading-message" : ""; if (sender === "user") { chat.innerHTML += `
@@ -18,79 +15,134 @@ 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") { chat.innerHTML += `
Bot -
+

${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; }; -// 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: - // "Hello there, what's your name?" for message, and the argument "bot" for sender showMessage("Hey you, what's your name?", "bot"); - // Just to check it out, change 'bot' to 'user' here 👆 and see what happens }; -function showFoodOptions() { - showMessage("What would you like to eat? Pizza, Burger, or Salad?", "bot"); +let numberOfFormSubmits = 0; // initializing the logic to trigger new messages in the form + +// Function to handle the form submission +function handleSubmit(event) { + event.preventDefault(); + numberOfFormSubmits++; + + switch (numberOfFormSubmits) { + case 1: // Name input + const name = userInput.value; + showMessage(name, "user"); + showMessage(`Nice to meet you, ${name}`, "bot"); + userInput.value = ""; + + setTimeout(() => { + showMessage( + "What would you like to eat? Pizza, Burger, or Salad?", + "bot" + ); + updateFormForFoodSelection(); + }, 1000); + break; + + case 2: // Food selection + const selectedFood = document.getElementById("food").value; + showMessage(selectedFood, "user"); + showMessage(`${selectedFood} coming up!`, "bot"); + + setTimeout(() => { + showMessage("What would you like to drink?", "bot"); + updateFormForDrinkSelection(); + }, 1000); + break; + + case 3: // Drink selection and order confirmation + const selectedDrink = document.getElementById("drink").value; + showMessage(selectedDrink, "user"); + showMessage(`${selectedDrink} is a great choice!`, "bot"); + + setTimeout(() => { + showMessage("Are you sure you want to order?", "bot"); + updateFormForOrderConfirmation(); // This function also triggers confirmation message + }, 1000); + break; + + // add more questions here + } } -function handleFoodChoice(choice) { - showMessage( - `Great choice! ${choice} it is. What would you like to drink?`, - "bot" - ); +function updateFormForFoodSelection() { + form.innerHTML = ` + + + + `; } -function handleDrinkChoice(choice) { - showMessage(`Excellent! I'll get you a ${choice} right away.`, "bot"); - // You could end the conversation here or continue with more questions +function updateFormForDrinkSelection() { + form.innerHTML = ` + + + + `; } -let numberOfFormSubmits = 0; // first the +function updateFormForOrderConfirmation() { + form.innerHTML = ` + + + `; +} -// Function to handle the form submission -function handleSubmit(event) { - event.preventDefault(); // Prevent the form from submitting normally - showMessage(userInput.value, "user"); // set message to input message // Clear the input field after submission +function orderConfirmation(confirmation) { + showMessage(confirmation, "user"); - numberOfFormSubmits++; //counts how many times this function is used to prompt next message - console.log(numberOfFormSubmits); + if (confirmation === "Yes") { + showMessage("Preparing your order", "bot", true); - switch (numberOfFormSubmits) { - case 1: - showMessage(`Nice to meet you, ${userInput.value}`, "bot"); - userInput.value = ""; - setTimeout(() => showFoodOptions(), 1000); - break; - case 2: - showMessage(`${userInput.value} is a great choice!`); - break; - default: - console.log("hej default switch"); + setTimeout(() => { + const loadingMessage = document.querySelector(".loading-message"); + if (loadingMessage) { + loadingMessage.classList.remove("loading-message"); + loadingMessage.querySelector("p").textContent = + "Thanks for ordering! The food will be ready soon 🍽️"; + } + clearForm(); + }, 3000); + } else { + setTimeout(() => { + showMessage("Please come back another time!", "bot"); + clearForm(); + }, 1000); } } -// Eventlisteners goes here 👇 -form.addEventListener("submit", (event) => handleSubmit(event, "greetUser")); +function clearForm() { + form.innerHTML = ""; +} + +// Eventlisteners👇 +form.addEventListener("submit", (event) => handleSubmit(event)); -// 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); diff --git a/code/style.css b/code/style.css index a275402f..edcb29b2 100644 --- a/code/style.css +++ b/code/style.css @@ -5,7 +5,7 @@ body { margin: 0; padding: 0; - font-family: 'Montserrat', sans-serif; + font-family: "Montserrat", sans-serif; background: #0026ff; } @@ -33,7 +33,8 @@ p { margin: 0; } -input { +input, +select { box-sizing: border-box; border: none; border-radius: 4px 0 0 4px; @@ -41,7 +42,7 @@ input { color: #0026ff; padding: 16px; font-size: 16px; - font-family: 'Montserrat'; + font-family: "Montserrat"; font-weight: 600; line-height: 26px; flex: 1; @@ -123,7 +124,7 @@ main { label { font-size: 16px; - font-family: 'Montserrat'; + font-family: "Montserrat"; font-weight: 500; color: #0026ff; margin-right: 20px; @@ -138,7 +139,7 @@ button { margin-right: 4px; font-size: 16px; line-height: 26px; - font-family: 'Montserrat'; + font-family: "Montserrat"; font-weight: 500; cursor: pointer; transition: all 0.3s ease; @@ -147,4 +148,48 @@ button { button:hover { opacity: 0.9; transition: all 0.2s ease; -} \ No newline at end of file +} + +#confirmation { + display: flex; + justify-content: center; + width: 80%; +} + +select, +input[type="range"] { + padding: 16px; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + cursor: pointer; +} + +input[type="range"]::-webkit-slider-thumb { + height: 30px; + width: 10px; +} + +@keyframes loadingDots { + 0% { + content: ""; + } + 25% { + content: "."; + } + 50% { + content: ".."; + } + 75% { + content: "..."; + } + 100% { + content: ""; + } +} + +.loading-message::after { + content: ""; + display: inline-block; + animation: loadingDots 1.5s infinite; +} From c39c636c8a0dd595114159de3599f094c02fb66c Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 15 Sep 2024 22:27:30 +0200 Subject: [PATCH 4/5] readme --- README.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 60f55e53..aa78ecdd 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,7 @@ -# Project Name +# Chatbot -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? +An assignment to create an interactive chatbot using form ## 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://mikaschatbot.netlify.app \ No newline at end of file From b95b379c37794a1610022863ae528bc41c7e0971 Mon Sep 17 00:00:00 2001 From: Mika Date: Mon, 16 Sep 2024 12:34:49 +0200 Subject: [PATCH 5/5] functions reformatting --- code/assets/.DS_Store | Bin 0 -> 6148 bytes code/script.js | 12 ++++++------ 2 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 code/assets/.DS_Store diff --git a/code/assets/.DS_Store b/code/assets/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..0a13ebfc63cf48c0ba25f1cf8b960afe4e4928d8 GIT binary patch literal 6148 zcmeHKOG*Pl5PhWq2SkiJmwf>Pp1?6g#C0y9(I7%}LNp6q%?&(?M;u>um0?CFTM?-m zx?gp5Rdx4+=??%IukTKQA%KEKQB>&>HTQPyxbuK0ImZ%DxW8Idx3fi0qQ7X;x$j|y z3NIL;HUDbH9;M}+Wz=M$1{`2Y-y5v>z2XFq)SqdYV`VGfL|)SSy%l-1J(6R;;Q`BT z203JgGt1C4)C;UR7Dw7L*AM!%=gMYCFc1s`1HnKr@QneU*($}pVbsAuFc1uE7|{J8 zu_%^~wPD^mSmh@GQLoWisOzO!W0GU(SR1m3A{I)tQ1K^*SUBy;{YuB$(83}9_z)lY z>+vFabmmXl9a0)b9Sj5mT?TfoIn?w2g1=1fBflFGtzaM+_-72rU^1PIxhOwde=JYW w+Qf3rqN0AaDirFSO8^_Xj~wSt>rblFuXL;pHH+GFI592)nUJW0fnQ+Y6LiK&H2?qr literal 0 HcmV?d00001 diff --git a/code/script.js b/code/script.js index cc02b1b7..f15f94a4 100644 --- a/code/script.js +++ b/code/script.js @@ -36,7 +36,7 @@ const greetUser = () => { let numberOfFormSubmits = 0; // initializing the logic to trigger new messages in the form // Function to handle the form submission -function handleSubmit(event) { +const handleSubmit = (event) => { event.preventDefault(); numberOfFormSubmits++; @@ -82,7 +82,7 @@ function handleSubmit(event) { } } -function updateFormForFoodSelection() { +const updateFormForFoodSelection = () => { form.innerHTML = ` @@ -108,14 +108,14 @@ function updateFormForDrinkSelection() { `; } -function updateFormForOrderConfirmation() { +const updateFormForOrderConfirmation = () => { form.innerHTML = ` `; } -function orderConfirmation(confirmation) { +const orderConfirmation = (confirmation) => { showMessage(confirmation, "user"); if (confirmation === "Yes") { @@ -138,7 +138,7 @@ function orderConfirmation(confirmation) { } } -function clearForm() { +const clearForm = () => { form.innerHTML = ""; }