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/index.html b/code/index.html index 316eb187..1f4df1d7 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,32 @@ - - - - - - Chatbot - + + + + + + Jonas cafe + - -

Welcome to my chatbot!

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

Welcome to jonas cafe!

+
+
+
+
+ + + +
+
+
- - + + - + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 125d6904..ae4ebf11 100644 --- a/code/script.js +++ b/code/script.js @@ -1,53 +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') { - 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 J.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?

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, 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'); + 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 fab combo😂!

Your order will be deliverd in 15 min, enjoy🥳`, 'bot'); + isChoosingDish = false; // Stop asking for dishes after valid choice + }; + + + 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