From 8b7ad1b227c5bfd391a5650e7c479b6dfe85e468 Mon Sep 17 00:00:00 2001 From: Jonash189 Date: Thu, 12 Sep 2024 09:25:29 +0200 Subject: [PATCH 1/3] adding console.log to see when things is being logged or not. --- code/index.html | 52 ++++++++++++++++++++++++------------------------- code/script.js | 1 + 2 files changed, 27 insertions(+), 26 deletions(-) diff --git a/code/index.html b/code/index.html index 316eb187..620e8296 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,32 @@ - - - - - - Chatbot - + + + + + + Chatbot + - -

Welcome to my chatbot!

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

Welcome to my chatbot!

+
+
+
+
+ + + +
+
+
- - + + - + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 125d6904..f347a27d 100644 --- a/code/script.js +++ b/code/script.js @@ -19,6 +19,7 @@ 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(sender) chat.innerHTML += `
Bot From 674d18a07bc2314e16ddbe8719e156bb209b0b1a Mon Sep 17 00:00:00 2001 From: Jonash189 Date: Sun, 15 Sep 2024 16:32:00 +0200 Subject: [PATCH 2/3] Adding DOM selectors. Global variables for food and drink. Adding if statements for drink and then food. Adding event listeners to the send button. Removing 'Name' from the input field. --- code/index.html | 6 +- code/script.js | 212 ++++++++++++++++++++++++++++++++++++------------ code/style.css | 4 + 3 files changed, 165 insertions(+), 57 deletions(-) diff --git a/code/index.html b/code/index.html index 620e8296..1f4df1d7 100644 --- a/code/index.html +++ b/code/index.html @@ -8,18 +8,18 @@ - Chatbot + Jonas cafe -

Welcome to my chatbot!

+

Welcome to jonas cafe!

-
diff --git a/code/script.js b/code/script.js index f347a27d..421ae492 100644 --- a/code/script.js +++ b/code/script.js @@ -1,54 +1,158 @@ -// DOM selectors (variables that point to selected DOM elements) goes here 👇 -const chat = document.getElementById('chat') - -// 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 - if (sender === 'user') { - chat.innerHTML += ` -
-
-

${message}

-
- 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(sender) - 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 -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') - // 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) +document.addEventListener('DOMContentLoaded', () => { + // DOM selectors + const chat = document.getElementById('chat'); + const nameInput = document.getElementById('name-input'); // The input field for the name + const sendButton = document.getElementById('send-btn'); // The send button + let userName = ""; + let isAskingForDrink = false; // To track whether we're asking for a drink + let isAskingForFood = false; // To track whether we're asking for food + let isChoosingDish = false; // To track whether we're asking for a specific dish + + // Declare global variables to store the chosen drink and food + let drink = ""; // Global variable to store drink choice + let food = ""; // Global variable to store food choice + + // A function to display a message + const showMessage = (message, sender) => { + if (sender === 'user') { + chat.innerHTML += ` +
+
+

${message}

+
+ User +
+ `; + } else if (sender === 'bot') { + chat.innerHTML += ` +
+ Bot +
+

${message}

+
+
+ `; + } + + // Auto scroll to the latest message + chat.scrollTop = chat.scrollHeight; + }; + + // Greet the user + const greetUser = () => { + showMessage("Welcome to Jonas Cafe! What's your name?", 'bot'); + }; + + // Handle the name input + const handleNameInput = (input) => { + // Check if input is not empty + if (input) { + userName = input; // Save the user's name + showMessage(userName, 'user'); // Show the user's message + nameInput.value = ""; // Clear the input field + + // Bot responds after 1 second + setTimeout(() => { + showMessage(`Hi, ${userName}! What would you like to order today?

1. Black Coffee
2. Latte
3. Tea
4. Soft Drink`, 'bot'); + isAskingForDrink = true; // Now we are asking for a drink choice + }, 1000); + } + }; + + // Handle drink choice + const handleDrinkChoice = (choice) => { + if (choice === "1") { + drink = "Black Coffee"; + } else if (choice === "2") { + drink = "Latte"; + } else if (choice === "3") { + drink = "Tea"; + } else if (choice === "4") { + drink = "Soft Drink"; + } else { + // Handle invalid input but keep waiting for a valid choice + showMessage("Sorry, I didn't understand that. Please choose 1, 2, 3, or 4.", 'bot'); + return; // Keep asking for a valid drink choice + } + + // If the user chose a valid option, show the drink message and ask if they want food + showMessage(`You chose ${drink}.

Would you like to order some food as well, ${userName}?

1. Yes
2. No`, 'bot'); + + // Now waiting for food choice + isAskingForDrink = false; // Reset drink flag + isAskingForFood = true; // Now we're asking for food + }; + + // Handle food choice + const handleFoodChoice = (foodchoice) => { + if (foodchoice === "1") { + showMessage("Great! What would you like to eat?

1. Tacos
2. Cesar Salad
3. Tuna Sandwich
4. Pasta Carbonara", 'bot'); + + isAskingForFood = false; // Stop asking for Yes/No + isChoosingDish = true; // Now waiting for dish choice + return; + } else if (foodchoice === "2") { + showMessage("No problem, enjoy your drink!😍", 'bot'); + isAskingForFood = false; // Stop asking for food + return; // Exit if user doesn't want to eat + } else { + showMessage("Sorry, I didn't understand that. Please choose 1 or 2.", 'bot'); + return; // Exit and wait for a valid choice + } + }; + + // Handle specific dish choice + const handleDishChoice = (dishChoice) => { + if (dishChoice === "1") { + food = "Tacos"; + } + // User chooses Cesar Salad + else if (dishChoice === "2") { + food = "Cesar Salad"; + } + // User chooses Tuna Sandwich + else if (dishChoice === "3") { + food = "Tuna Sandwich"; + } + // User chooses Pasta Carbonara + else if (dishChoice === "4") { + food = "Pasta Carbonara"; + } + // Handle invalid choice + else { + showMessage("Sorry, I didn't understand that. Please choose 1, 2, 3, or 4.", 'bot'); + return; // Wait for a valid dish choice + } + + // Show summary of the user's order + showMessage(`You have chosen:
${food} and ${drink}! What a fantastic combo😂!

Your order will be deliverd in 15 min, enjoy🥳`, 'bot'); + isChoosingDish = false; // Stop asking for dishes after valid choice + }; + + // Example of how you might handle user input based on the phase of the conversation + const handleUserInput = (event) => { + event.preventDefault(); + const input = nameInput.value; // Get input from user + nameInput.value = ""; // Clear input field + + if (!isAskingForDrink && !isAskingForFood && !isChoosingDish) { + // Handle name input + handleNameInput(input); + } else if (isAskingForDrink) { + // Handle drink choice input + handleDrinkChoice(input); + } else if (isAskingForFood) { + // Handle yes/no food choice input + handleFoodChoice(input); + } else if (isChoosingDish) { + // Handle specific dish choice input + handleDishChoice(input); + } + }; + + // Attach event listener to the send button + sendButton.addEventListener('click', handleUserInput); + + // Start the conversation after 1 second + setTimeout(greetUser, 1000); // Start with greeting +}); diff --git a/code/style.css b/code/style.css index a275402f..83003407 100644 --- a/code/style.css +++ b/code/style.css @@ -147,4 +147,8 @@ button { button:hover { opacity: 0.9; transition: all 0.2s ease; +} + +label { + display: none; } \ No newline at end of file From 513b147bfb5646ee039562319ad9134ef0a3fdc0 Mon Sep 17 00:00:00 2001 From: Jonash189 Date: Sun, 15 Sep 2024 16:51:14 +0200 Subject: [PATCH 3/3] Adding last changes to the copy and adding info in readmefile --- README.md | 10 +++++----- code/script.js | 16 ++++++++-------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 60f55e53..cd8e8f2a 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # Project Name -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 task was to create an interactive chatbot. ## 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? +Initially, I had trouble getting the JavaScript file to function correctly in the HTML file. Another challenge was managing the flow of user interactions, specifically making sure that the bot stopped responding when the user chose "No" for ordering food. I used JavaScript techniques such as conditionals and functions to address these issues. If I had more time, I would refine the conversation logic and add more complex food ordering options. + +I struggled with adding line breaks in the chatbot's responses. I attempted different methods, but only the old
tag worked. ## 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://jonas-chatbot.netlify.app/ diff --git a/code/script.js b/code/script.js index 421ae492..ae4ebf11 100644 --- a/code/script.js +++ b/code/script.js @@ -40,7 +40,7 @@ document.addEventListener('DOMContentLoaded', () => { // Greet the user const greetUser = () => { - showMessage("Welcome to Jonas Cafe! What's your name?", 'bot'); + showMessage("Welcome to J.Cafe! What's your name?", 'bot'); }; // Handle the name input @@ -53,7 +53,7 @@ document.addEventListener('DOMContentLoaded', () => { // Bot responds after 1 second setTimeout(() => { - showMessage(`Hi, ${userName}! What would you like to order today?

1. Black Coffee
2. Latte
3. Tea
4. Soft Drink`, 'bot'); + showMessage(`Hi ${userName}🥰! What would you like to order?

1. Black Coffee
2. Latte
3. Tea
4. Soft Drink`, 'bot'); isAskingForDrink = true; // Now we are asking for a drink choice }, 1000); } @@ -76,7 +76,7 @@ document.addEventListener('DOMContentLoaded', () => { } // If the user chose a valid option, show the drink message and ask if they want food - showMessage(`You chose ${drink}.

Would you like to order some food as well, ${userName}?

1. Yes
2. No`, 'bot'); + showMessage(`You chose ${drink}.

Would you like to order some food as well, ${userName}?😋

1. Yes
2. No`, 'bot'); // Now waiting for food choice isAskingForDrink = false; // Reset drink flag @@ -92,11 +92,11 @@ document.addEventListener('DOMContentLoaded', () => { isChoosingDish = true; // Now waiting for dish choice return; } else if (foodchoice === "2") { - showMessage("No problem, enjoy your drink!😍", 'bot'); + showMessage("No problem, your drink will be deliverd in 15 min, enjoy!😍", 'bot'); isAskingForFood = false; // Stop asking for food return; // Exit if user doesn't want to eat } else { - showMessage("Sorry, I didn't understand that. Please choose 1 or 2.", 'bot'); + showMessage("Sorry🙈, I didn't understand that. Please choose 1 or 2.", 'bot'); return; // Exit and wait for a valid choice } }; @@ -120,16 +120,16 @@ document.addEventListener('DOMContentLoaded', () => { } // Handle invalid choice else { - showMessage("Sorry, I didn't understand that. Please choose 1, 2, 3, or 4.", 'bot'); + showMessage("Sorry🙈, I didn't understand that. Please choose 1, 2, 3, or 4.", 'bot'); return; // Wait for a valid dish choice } // Show summary of the user's order - showMessage(`You have chosen:
${food} and ${drink}! What a fantastic combo😂!

Your order will be deliverd in 15 min, enjoy🥳`, 'bot'); + showMessage(`You have chosen:
${food} and ${drink}! What a fab combo😂!

Your order will be deliverd in 15 min, enjoy🥳`, 'bot'); isChoosingDish = false; // Stop asking for dishes after valid choice }; - // Example of how you might handle user input based on the phase of the conversation + const handleUserInput = (event) => { event.preventDefault(); const input = nameInput.value; // Get input from user