diff --git a/README.md b/README.md index 60f55e53..8cd4f7b6 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,28 @@ -# Project Name +# Project Chatbot -Replace this readme with your own information about your project. +The assignment was to build a functional chatbot interface using JavaScript, HTML, and CSS. The chatbot should interact with users, ask questions, display messages, and respond with precision. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +## The problems -## The problem +**1. Creativity went wild** +When I started working on my project, my creativity took over when I read, "Step 2 - Have it your way 👋". I envisioned a coffee shop chatbot, like a Starbucks order flow, but soon realized that my idea was far too complex. Options for hot or cold drinks, different coffee shop locations, milk choices depending on the coffee type, drop-downs, buttons - the scope was way beyond my skills. Instead of realizing this right away, I stumbled across more issues as I progressed, forcing me to simplify my plan. I read through all the instructions before picking up my code again, and limited the scope to be more like my previous project (Project Javascript Pizzeria) with a very limited amount of options for the user, similar if else statement, etc. -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? +**2. Attention to details issues** +I was a bit hasty and made several spelling mistakes, forgot to delete parts of the code and variables when I renamed/replaced/stopped using things in the code, which led to unnecessary (and time consuming) issues that could have been avoided. + +## If you had more time, what would be next? + +*** UPDATE *** I rearranged the script, to go from the bottom up, and this solved most of the problems below. + +**1.** Figure out a way to move line 17-27 further down in the script. It looks awkward to me to have "Handle user name input" above the "Start conversation", but the code broke when I moved it so I didn't dare to continue since time was running out. + +**2.** This part was suggested by ChatGPT: `document.addEventListener("DOMContentLoaded", () => {`. While I understand that it ensures all elements are fully loaded before the code runs, I haven't grasped why it's necessary in my code or when to use it. If I had more time, I would try to figure that out. + +**3.** I used `nameForm.removeEventListener("submit", handleUserInput)` because I wanted the "Start conversation" button to be the only visible option in the chat, forcing the user to click it to begin, but the event listener for the name form is still active. If I had more time, I would address this issue. + +**4.** The buttons seem to have a life of their own, and the input field remains visible in the background (likely related to the previous issue). If I had more time, I would fix this, but at this point, I'm just glad they're working. I struggled with this earlier in the project and almost abandoned the idea altogether. ## 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. +**Netlify:** https://johannaschatbot.netlify.app + diff --git a/code/index.html b/code/index.html index 316eb187..6a4e6f27 100644 --- a/code/index.html +++ b/code/index.html @@ -8,25 +8,27 @@ - Chatbot + Chatbot Coffee Joe -

Welcome to my chatbot!

+

Welcome to the Coffee Bot!

+
-
+ + +
- - -
- - + + - diff --git a/code/script.js b/code/script.js index 125d6904..876d8568 100644 --- a/code/script.js +++ b/code/script.js @@ -1,12 +1,162 @@ +//Global LET variables that will be used in the confirmation + +let userName = '' +let selectedCoffee = '' +let sizeChoice = '' +let coffeeShop = '' + // DOM selectors (variables that point to selected DOM elements) goes here 👇 const chat = document.getElementById('chat') +const startButton = document.getElementById('start-button') +const inputWrapper = document.getElementById('input-wrapper') +const userInput = document.getElementById("user-input") +const nameForm = document.getElementById('name-form') + +// 10. Handle summary + +const showSummary = () => { + showMessage(`Thank you, ${userName}, for your order of ${coffeeChoice} (${sizeChoice} size), which you will pick up at Coffee JoE in ${coffeeShop}.`, 'bot') + + //Remove input field after Confirmation + + document.getElementById('name-form').remove() +} +// 9. Handle Coffeeshop input +const userAnswer = (selectCoffeeShop) => { + coffeeShop = selectCoffeeShop + showMessage(` Coffee JoE in ${coffeeShop}.`, 'user') + showMessage(`You have selected ${coffeeShop}.`, 'bot') + + //Remove Coffeeshop buttons + document.getElementById("stockholm").remove() + document.getElementById("gothenburg").remove() + document.getElementById("kiruna").remove() + document.getElementById("falun").remove() + setTimeout(showSummary, 3000) // Move on to Summary +} + +// 8. Select Coffee Shop +const handleCoffeeShopInput = () => { + inputWrapper.classList.add("hidden") + showMessage("Where would you like to pick up your coffee?", 'bot') + chat.innerHTML += ` +
+ + + + +
+ ` + document.getElementById('stockholm').addEventListener("click", () => userAnswer('Stockholm')) + document.getElementById('gothenburg').addEventListener("click", () => userAnswer('Gothenburg')) + document.getElementById('kiruna').addEventListener("click", () => userAnswer('Kiruna')) + document.getElementById('falun').addEventListener("click", () => userAnswer('Falun')) +} + +// 7. Handle coffee size input +const handleSizeChoice = (size) => { + sizeChoice = size + showMessage(`${size} size!`, 'user') + + document.getElementById("regularButton").remove() + document.getElementById("smallButton").remove() + + showMessage("Great choice! Your coffee is almost on the way.", 'bot') + + setTimeout(handleCoffeeShopInput, 3000) // Move on to Coffee shop question +} + +// 6. Coffee size +const askForSize = () => { + inputWrapper.classList.add("hidden") + showMessage("What size would you like?", 'bot') + + // Add two Size buttons + chat.innerHTML += ` +
+ + +
+ ` + + document.getElementById("regularButton").addEventListener("click", () => handleSizeChoice("Regular")) + document.getElementById("smallButton").addEventListener("click", () => handleSizeChoice("Small")) +} +// 5. Handle Coffee choice input + +const handleCoffeeInput = (selectedCoffee) => { + coffeeChoice = selectedCoffee // Update the global variable + if (coffeeChoice === "Pumpkin Spice Latte") { + showMessage(`${coffeeChoice}, please.`, 'user') + showMessage("Ah, Pumpkin Spice Latte, perfect choice!", 'bot') + } else if (coffeeChoice === "Espresso") { + showMessage(`${coffeeChoice}, please.`, 'user') + showMessage("An Espresso coming up! Excellent choice.", 'bot') + } else if (coffeeChoice === "Cappuccino") { + showMessage(`${coffeeChoice}, please.`, 'user') + showMessage("Creamy Cappuccino it is!", 'bot') + } else if (coffeeChoice === "Americano") { + showMessage(`${coffeeChoice}, please.`, 'user') + showMessage("A classic Americano for you!", 'bot') + } else { + showMessage(`${coffeeChoice}, please.`, 'user') + showMessage(`${coffeeChoice} sounds great, but we don't have that option right now!`, 'bot') + return + } -// Functions goes here 👇 + document.getElementById("pumpkin").remove() + document.getElementById("cappuccino").remove() + document.getElementById("americano").remove() + document.getElementById("espresso").remove() -// A function that will add a chat bubble in the correct place based on who the sender is + setTimeout(askForSize, 2000) // Move on to Ask for size +} + +// 4. Select Coffee + +const selectCoffee = () => { + inputWrapper.classList.add("hidden") + + showMessage(`Nice to meet you, ${userName}.`, 'bot') + + setTimeout(() => { + showMessage(`Please start your order by selecting your coffee. Here are your options:`, 'bot') + + chat.innerHTML += ` +
+ + + + +
+ ` + + document.getElementById("pumpkin").addEventListener("click", () => handleCoffeeInput("Pumpkin Spice Latte")) + document.getElementById("cappuccino").addEventListener("click", () => handleCoffeeInput("Cappuccino")) + document.getElementById("americano").addEventListener("click", () => handleCoffeeInput("Americano")) + document.getElementById("espresso").addEventListener("click", () => handleCoffeeInput("Espresso")) + + nameForm.removeEventListener("submit", handleUserInput) // Remove Event listener for Name + + }, 1500) //Move on to Handle Coffee choice input +} + +// 3. Handle user name input +const handleUserInput = (event) => { + event.preventDefault() + + userName = userInput.value + showMessage(userName, "user") + userInput.value = "" // Clear input field + + document.getElementById('input-wrapper').remove() + + setTimeout(selectCoffee, 1000) // Move on to Select coffee +} + +// Funtion to show messages from bot and user 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 + // Posted message from the user if (sender === 'user') { chat.innerHTML += `
@@ -16,8 +166,7 @@ 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 + // Posted message from the bot } else if (sender === 'bot') { chat.innerHTML += `
@@ -29,25 +178,26 @@ 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 + // Scroll to the last message when chat is too long. + // requestAnimationFrame to avoid scrolling to see selection-buttons in the chat + requestAnimationFrame(() => { + chat.scrollTop = chat.scrollHeight + }) } +startButton.addEventListener("click", () => { + startChat() + document.getElementById('name-form').addEventListener("submit", handleUserInput) +}) + +// 2. Greet user -// 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 + showMessage("Hello fellow Java Junkie! What's your name?", 'bot') } -// 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) +//1. Click Start Conversation button +const startChat = () => { + greetUser() + startButton.classList.add("hidden") // Hide Start conversation button when clicked + document.getElementById('name-form').classList.add('show') // Show name input field +} \ No newline at end of file diff --git a/code/style.css b/code/style.css index a275402f..650a7151 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,66 @@ +img { + display: block; + max-width: 100%; +} +/* Responsive settings for mobile*/ +@media (max-width: 600px) { + main { + padding: 10px; + max-width: 100%; + } + body { + font-size: 16px; + } + .start-button { + width: 100%; + padding: 15px; + } + .chat { + width: 100%; + min-height: 200px; + max-height: 400px; + } + .bot-msg img, + .user-msg img { + display: none; + } + .bot-msg .bubble { + max-width: 90%; /* Make the bot bubble wider*/ + margin-right: auto; /* Move the bot bubble closer to user bubble*/ + margin-left: 10px; + } + .user-msg .bubble { + max-width: 80%; + margin-left: auto; + } + label[for="user-input"] { + display: none; + } + .bot-msg .selection-button { + flex: 1 1 20px; + width: auto; + height: 50px; + text-align: center; + white-space: nowrap; + } +} +/* Responsive settings for tablet */ + @media (min-width: 601px) and (max-width: 1024px) { + .bot-msg .selection-button { + flex: 1 1 120px; + width: auto; + height: 50px; + text-align: center; + white-space: nowrap; + } + main { + max-width: 90%; + } + body { + font-size: 17px; + } + } + * { box-sizing: border-box; } @@ -71,12 +134,46 @@ main { padding-bottom: 16px; } +.start-button { + display: flex; + justify-content: center; +} + +#name-form { + display: none; +} +#name-form.show { + display: flex; /* Show name input field*/ + align-items: center +} + +.hidden { /*Hide Start conversation button */ + display: none; +} + +.selection-button { + display: inline-block; /*Make buttons visible*/ + padding: 10px 20px; + margin: 1px; + gap: 1px; + background-color: #0026ff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + width: auto; /*Adapt buttons to device widht */ +} + +.size-button:hover { + opacity: 0.9; +} .bot-msg { display: flex; margin: 16px 8px 0 0; flex-shrink: 0; + flex-wrap: wrap; + max-width: 100%; } - .user-msg { display: flex; justify-content: flex-end; @@ -97,7 +194,8 @@ main { line-height: 26px; padding: 16px 24px; color: #0026ff; - max-width: 40%; + max-width: 60%; + word-wrap: break-word } .bot-bubble { @@ -147,4 +245,10 @@ button { button:hover { opacity: 0.9; transition: all 0.2s ease; +} +footer { + display: flex; + justify-content: center; + margin-top: 20px; + color: white; } \ No newline at end of file