From 592c266d20014bbc30f224dbbc8d8d7acec1f863 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hel=C3=A9ne?= Date: Sat, 14 Sep 2024 13:33:27 +0200 Subject: [PATCH 1/8] tested the code and added console logs --- .DS_Store | Bin 0 -> 6148 bytes code/script.js | 3 +++ 2 files changed, 3 insertions(+) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..cffe449da3bc277d532a49649403c065001fed00 GIT binary patch literal 6148 zcmeHK!EVz)5S>j!YpX)!0HPNpOI)Lpk_riNaYK6Gz@pHlk_h5h0j~cHhqIys`FeXa+kzx(#OLO}k_r7ug0X zQ{zdgPt#JT@J&Inzh42fcU?LqO&R5D`*(!7{U2<+kX2qfuP1JwzonD1sGGsyyXtIp zuWj#mJKnDMI(nz)QIj;YdX!9G8t<9bWqLkN(&t4!k9#*C>#9kLDxWf;$a18-dQnuF zo{#jb%4+6DcEa;LKknULEQZ5=aBw(W_JhU4`-6UPIDD{N`rfU(_a2?Z@5{4Ff3nIe z{4Lq8J3NQa7_64_F`8DTuHGVM@^4T<71h+xlxC2ofv-8TPiK^^iS!kWUq#xZ30Nh5 zG59%sfR}T%7?pBVm|!m9@rHWp&RRX6PUx79XiQImn;2i#7;wcz0Z~8{xLN`Ca`bku zPLo+tKos~76)^9I0L@_Nu(imq4s?740Co{(!JiIGt2zQF>886u79smUVmP{6GHv{r@6KJW)Ut z_@@+5-ElM?VM*?6y|g%U)&^*A(2SY9*5ZnS0UyQ4HAnFt8XMw)8303vtwls&@*%)7 LNGA&XQ3ZYi2u*~= literal 0 HcmV?d00001 diff --git a/code/script.js b/code/script.js index 125d6904..8a22dcee 100644 --- a/code/script.js +++ b/code/script.js @@ -19,6 +19,9 @@ 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') { + // add a console.log here to see when it's being logged and not + console.log("Message is:", message); + console.log("Sender is:", sender); chat.innerHTML += `
Bot From fb18007536e9b840c3582f00af2753e7013ec079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hel=C3=A9ne?= Date: Sat, 14 Sep 2024 14:02:05 +0200 Subject: [PATCH 2/8] named the bot and changed greetUser message --- 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..22208e55 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,32 @@ - - - - - - Chatbot - + + + + + + Weather Wardrobe + - -

Welcome to my chatbot!

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

Welcome to Weather Wardrobe!

+
+
+
+
+ + + +
+
+
- - + + - + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 8a22dcee..c03ea9fb 100644 --- a/code/script.js +++ b/code/script.js @@ -41,7 +41,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, want to know today’s weather? I can also suggest what to wear!", 'bot') // Just to check it out, change 'bot' to 'user' here 👆 and see what happens } From f8972658f895cec0619955cd1397bb175176cdf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hel=C3=A9ne?= Date: Sat, 14 Sep 2024 18:18:53 +0200 Subject: [PATCH 3/8] added conversation and conditional statements --- code/index.html | 6 +- code/script.js | 179 ++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 176 insertions(+), 9 deletions(-) diff --git a/code/index.html b/code/index.html index 22208e55..599eafe6 100644 --- a/code/index.html +++ b/code/index.html @@ -16,9 +16,9 @@

Welcome to Weather Wardrobe!

-
- - + + + diff --git a/code/script.js b/code/script.js index c03ea9fb..ba8c9b44 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,8 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 const chat = document.getElementById('chat') +const locationForm = document.getElementById('location-form') // Form to capture the user's input +const locationInput = document.getElementById('location-input') // Input field for user's location + // Functions goes here 👇 @@ -39,18 +42,182 @@ const showMessage = (message, sender) => { // 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, want to know today’s weather? I can also suggest what to wear!", 'bot') - // Just to check it out, change 'bot' to 'user' here 👆 and see what happens + showMessage("Hello, I can help you choose the perfect outfit based on the weather. What's your location?", 'bot') +} + +// A function to handle the location input and continue the conversation +const handleLocationInput = (event) => { + event.preventDefault() // Prevent form from submitting and refreshing the page + + const userLocation = locationInput.value // Get the user's input from the input field + + if (userLocation) { // Check if user entered a location + // Show user's location as their message + showMessage(userLocation, 'user') + + // Clear the input field after submission + locationInput.value = '' + + // Remove the event listener for location input after we've handled it + locationForm.removeEventListener('submit', handleLocationInput); + + // Simulate a bot response with a weather-related message after 1 second + setTimeout(() => { + showMessage(`Checking the weather for ${userLocation}...`, 'bot') + + // Simulate checking the weather + setTimeout(() => { + const weather = "sunny☀️ and between 18-20 degrees" + showMessage(`It looks like it's going to be ${weather} today in ${userLocation}.`, 'bot') + + setTimeout(showClothingOptions, 1000) // Wait 1 second and show clothing options + }, 2000) // Wait 2 seconds before showing the weather message + }, 1000) // Wait 1 second before showing the "checking weather" message + } +} + + +// Function to create buttons for casual or formal clothing choice +const showClothingOptions = () => { + // Remove existing event listener for invalid input to avoid duplicates + locationForm.removeEventListener('submit', handleInvalidInput); + + chat.innerHTML += ` +
+ Bot +
+

Would you prefer casual or formal clothing?

+ + +
+
+ ` + + // Function to handle clothing choice + const handleClothingChoice = (event) => { + const choice = event.target.getAttribute('data-choice'); + + if (choice) { + // Show the user's choice + showMessage(`I want ${choice} clothing.`, 'user'); + + // Remove event listeners to prevent multiple triggers + const buttons = document.querySelectorAll('.clothing-choice'); + buttons.forEach(button => { + button.removeEventListener('click', handleClothingChoice); + }); + + // Remove event listener for invalid input after a valid choice + locationForm.removeEventListener('submit', handleInvalidInput); + + // Ask about the occasion after a short delay + setTimeout(() => { + askForOccasion(choice); + }, 1000); + } + } + + // Add event listeners to the buttons to handle the user's choice + const buttons = document.querySelectorAll('.clothing-choice'); + buttons.forEach(button => { + button.addEventListener('click', handleClothingChoice); + }); + + // Add event listener to handle invalid input during this phase + locationForm.addEventListener('submit', handleInvalidInput); + + chat.scrollTop = chat.scrollHeight +} + +// Function to handle invalid input (user typing text instead of clicking buttons) +const handleInvalidInput = (event) => { + event.preventDefault(); + + const userInput = locationInput.value.trim(); + + if (userInput) { + // Show user's message + showMessage(userInput, 'user'); + + // Show bot's response + showMessage("That's not a valid answer. Please refresh the chat and try again.", 'bot'); + + // Clear the input field + locationInput.value = ''; + } +}; + +// Function to ask about the occasion +const askForOccasion = (clothingChoice) => { + showMessage("Are you dressing for a specific occasion or activity (e.g., work, party, exercise)?", 'bot'); + + // Add event listener to handle user's occasion input + const occasionInputHandler = (event) => handleOccasionInput(event, clothingChoice, occasionInputHandler); + locationForm.addEventListener('submit', occasionInputHandler); +} + +// Function to handle the occasion input +const handleOccasionInput = (event, clothingChoice, occasionInputHandler) => { + event.preventDefault(); + + const occasion = locationInput.value.trim(); + if (occasion) { + showMessage(occasion, 'user'); + locationInput.value = ''; + + // Remove the event listener to prevent duplicates + locationForm.removeEventListener('submit', occasionInputHandler); + + setTimeout(() => { + provideOutfitSuggestion(clothingChoice, occasion); + }, 1000); + } +} + +// Function to provide the final outfit suggestion +const provideOutfitSuggestion = (clothingChoice, occasion) => { + let suggestion = ''; + + if (clothingChoice === 'casual') { + if (occasion.toLowerCase().includes('work')) { + suggestion = "A casual shirt and chinos might be perfect for work. 👔"; + } else if (occasion.toLowerCase().includes('party')) { + suggestion = "How about jeans and a stylish t-shirt for the party? 🎉"; + } else if (occasion.toLowerCase().includes('exercise')) { + suggestion = "Athletic wear would be great for exercising! 🏃"; + } else { + suggestion = "A t-shirt and jeans would be great! 👕👖"; + } + } else if (clothingChoice === 'formal') { + if (occasion.toLowerCase().includes('work')) { + suggestion = "A blazer with dress pants would suit you well for work. 💼"; + } else if (occasion.toLowerCase().includes('party')) { + suggestion = "A cocktail dress or a sharp suit would be ideal for the party. 🥂"; + } else if (occasion.toLowerCase().includes('exercise')) { + suggestion = "For exercise, comfort is key! Maybe opt for formal sportswear. 😉"; + } else { + suggestion = "A suit and tie might be a great option! 👔"; + } + } + + showMessage(suggestion, 'bot'); + + // End the conversation or reset as needed + setTimeout(() => { + showMessage("Let me know if you need anything else!", 'bot'); + }, 2000); } -// Eventlisteners goes here 👇 +// Event listeners 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): +// 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) + +// Listen for the form submit event to capture user's location input +locationForm.addEventListener('submit', handleLocationInput) From 2dc0d537336aaf93acd9e4e07810478601d81575 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hel=C3=A9ne?= Date: Sat, 14 Sep 2024 18:40:46 +0200 Subject: [PATCH 4/8] added css and responsive design --- code/index.html | 2 +- code/script.js | 2 +- code/style.css | 203 +++++++++++++++++++++++++++++++++++------------- 3 files changed, 151 insertions(+), 56 deletions(-) diff --git a/code/index.html b/code/index.html index 599eafe6..06443f03 100644 --- a/code/index.html +++ b/code/index.html @@ -12,7 +12,7 @@ -

Welcome to Weather Wardrobe!

+

Welcome to Weather Wardrobe!🌤️

diff --git a/code/script.js b/code/script.js index ba8c9b44..1e03cad0 100644 --- a/code/script.js +++ b/code/script.js @@ -42,7 +42,7 @@ const showMessage = (message, sender) => { // A function to start the conversation const greetUser = () => { - showMessage("Hello, I can help you choose the perfect outfit based on the weather. What's your location?", 'bot') + showMessage("Hello, I can help you choose the perfect outfit based on the weather. What's your location?📍", 'bot') } // A function to handle the location input and continue the conversation diff --git a/code/style.css b/code/style.css index a275402f..dc1ac8a9 100644 --- a/code/style.css +++ b/code/style.css @@ -5,24 +5,24 @@ body { margin: 0; padding: 0; - font-family: 'Montserrat', sans-serif; - background: #0026ff; + font-family: 'Open Sans', sans-serif; + background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec); } -h1 { - font-weight: bold; - font-size: 28px; - line-height: 34px; - color: #fff; +h1, +h2 { + font-weight: 700; + color: #102a43; text-align: center; } +h1 { + font-size: 32px; + margin-top: 20px; +} + h2 { - font-weight: bold; font-size: 24px; - line-height: 34px; - color: #fff; - text-align: center; margin-bottom: 36px; } @@ -31,21 +31,19 @@ p { font-weight: 600; line-height: 28px; margin: 0; + color: #334e68; } input { - box-sizing: border-box; - border: none; - border-radius: 4px 0 0 4px; - background: #e5e9ff; - color: #0026ff; + border: 1px solid #bcccdc; + border-radius: 8px 0 0 8px; + background: #fff; + color: #102a43; padding: 16px; font-size: 16px; - font-family: 'Montserrat'; - font-weight: 600; - line-height: 26px; flex: 1; width: 100%; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } main { @@ -53,66 +51,70 @@ main { width: 100%; max-width: 700px; height: 600px; - border-radius: 30px; + border-radius: 16px; background: #fff; padding: 20px 24px; - padding-top: 0; box-sizing: border-box; display: flex; flex-direction: column; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .chat { flex: 1; display: flex; - justify-content: flex-start; - overflow: scroll; flex-direction: column; + overflow-y: auto; padding-bottom: 16px; } -.bot-msg { +.bot-msg, +.user-msg { display: flex; - margin: 16px 8px 0 0; - flex-shrink: 0; + margin-top: 16px; +} + +.bot-msg { + align-items: flex-start; } .user-msg { - display: flex; + align-items: flex-end; justify-content: flex-end; - margin: 16px 0 0 8px; - flex-shrink: 0; } .bot-msg img, .user-msg img { - width: 60px; - height: 60px; + width: 50px; + height: 50px; + border-radius: 50%; } .bubble { - background: #e5e9ff; - font-weight: 600; + background: #f0f4f8; + font-weight: 500; font-size: 16px; - line-height: 26px; - padding: 16px 24px; - color: #0026ff; - max-width: 40%; + line-height: 24px; + padding: 12px 20px; + color: #102a43; + max-width: 60%; } .bot-bubble { - border-radius: 0px 26px 26px 26px; - margin-left: 8px; + border-radius: 12px 12px 12px 0; + margin-left: 12px; } .user-bubble { - border-radius: 26px 0 26px 26px; - margin-right: 8px; + background: #d9e2ec; + border-radius: 12px 12px 0 12px; + margin-right: 12px; } .input-wrapper { display: flex; justify-content: center; + margin-top: 16px; } .input-wrapper form { @@ -123,28 +125,121 @@ main { label { font-size: 16px; - font-family: 'Montserrat'; font-weight: 500; - color: #0026ff; - margin-right: 20px; + color: #102a43; + margin-right: 16px; } button { - background-color: #0026ff; + background-color: #3e7cb1; color: white; border: none; - border-radius: 4px; - padding: 16px 20px; - margin-right: 4px; + border-radius: 0 8px 8px 0; + padding: 16px 24px; font-size: 16px; - line-height: 26px; - font-family: 'Montserrat'; - font-weight: 500; + font-weight: 600; cursor: pointer; - transition: all 0.3s ease; + transition: background-color 0.3s ease; } button:hover { - opacity: 0.9; - transition: all 0.2s ease; + background-color: #2a6f97; +} + +button:focus, +input:focus { + outline: none; + border-color: #3e7cb1; +} + +/* Media Queries for Responsiveness */ +@media (max-width: 768px) { + h1 { + font-size: 1.75em; + } + + h2 { + font-size: 1.25em; + } + + .bubble { + font-size: 0.95em; + padding: 0.65em 0.9em; + } + + input, + button { + padding: 0.65em; + font-size: 0.95em; + } + + .bot-msg img, + .user-msg img { + width: 40px; + height: 40px; + } +} + +@media (max-width: 480px) { + main { + width: 95%; + margin: 0.5em auto; + padding: 1em; + } + + h1 { + font-size: 1.5em; + } + + h2 { + font-size: 1.1em; + } + + .bubble { + font-size: 0.9em; + padding: 0.5em 0.8em; + } + + input, + button { + padding: 0.5em; + font-size: 0.9em; + } + + .bot-msg img, + .user-msg img { + width: 35px; + height: 35px; + } +} + +@media (min-width: 1200px) { + main { + max-width: 1200px; + } + + h1 { + font-size: 2.5em; + } + + h2 { + font-size: 2em; + } + + .bubble { + font-size: 1.1em; + padding: 1em 1.5em; + } + + input, + button { + padding: 1em; + font-size: 1.1em; + } + + .bot-msg img, + .user-msg img { + width: 60px; + height: 60px; + } } \ No newline at end of file From bf3f749c80795e4da9ee6b64f3a328fe6c68e5be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hel=C3=A9ne?= Date: Sun, 15 Sep 2024 15:50:15 +0200 Subject: [PATCH 5/8] smaller changes --- README.md | 10 +++--- code/script.js | 90 +++++++++++++++++++------------------------------- 2 files changed, 40 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index 60f55e53..6affbf44 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,14 @@ # 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 project was to create a chatbot that interacts with the user using DOM, functions and event listeners ## 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 tackled the project by creating a scenario for how the conversation would flow and then trying to set up functions for each step of the conversation. + +If there had been more time I would have tried to get the chatbot to fetch real weather data. The chatbot does not show a message for invalid input when typing in something else than the suggested occasions, which I would add if I had more time for the project, alternatively using buttons for the options as well. + + ## View it live diff --git a/code/script.js b/code/script.js index 1e03cad0..9ea3dca5 100644 --- a/code/script.js +++ b/code/script.js @@ -1,7 +1,7 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 const chat = document.getElementById('chat') -const locationForm = document.getElementById('location-form') // Form to capture the user's input -const locationInput = document.getElementById('location-input') // Input field for user's location +const locationForm = document.getElementById('location-form') +const locationInput = document.getElementById('location-input') // Functions goes here 👇 @@ -38,6 +38,9 @@ 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 + + // Clear the input field after submission + locationInput.value = '' } // A function to start the conversation @@ -45,41 +48,33 @@ const greetUser = () => { showMessage("Hello, I can help you choose the perfect outfit based on the weather. What's your location?📍", 'bot') } -// A function to handle the location input and continue the conversation +// A function for the location input const handleLocationInput = (event) => { - event.preventDefault() // Prevent form from submitting and refreshing the page - - const userLocation = locationInput.value // Get the user's input from the input field + event.preventDefault() // Prevent from refreshing the page + const userLocation = locationInput.value - if (userLocation) { // Check if user entered a location - // Show user's location as their message + if (userLocation) { showMessage(userLocation, 'user') - // Clear the input field after submission - locationInput.value = '' - // Remove the event listener for location input after we've handled it + // Remove the event listener for location input after being hanlded locationForm.removeEventListener('submit', handleLocationInput); - // Simulate a bot response with a weather-related message after 1 second + // Checking weather... setTimeout(() => { showMessage(`Checking the weather for ${userLocation}...`, 'bot') - // Simulate checking the weather setTimeout(() => { const weather = "sunny☀️ and between 18-20 degrees" showMessage(`It looks like it's going to be ${weather} today in ${userLocation}.`, 'bot') - - setTimeout(showClothingOptions, 1000) // Wait 1 second and show clothing options - }, 2000) // Wait 2 seconds before showing the weather message - }, 1000) // Wait 1 second before showing the "checking weather" message + setTimeout(showClothingOptions, 1000) + }, 2000) + }, 1000) } } - -// Function to create buttons for casual or formal clothing choice +// Function to create buttons for choosing casual or formal clothing const showClothingOptions = () => { - // Remove existing event listener for invalid input to avoid duplicates locationForm.removeEventListener('submit', handleInvalidInput); chat.innerHTML += ` @@ -98,10 +93,9 @@ const showClothingOptions = () => { const choice = event.target.getAttribute('data-choice'); if (choice) { - // Show the user's choice - showMessage(`I want ${choice} clothing.`, 'user'); + showMessage(`I prefer ${choice} clothing.`, 'user'); - // Remove event listeners to prevent multiple triggers + // Remove event listeners const buttons = document.querySelectorAll('.clothing-choice'); buttons.forEach(button => { button.removeEventListener('click', handleClothingChoice); @@ -110,57 +104,50 @@ const showClothingOptions = () => { // Remove event listener for invalid input after a valid choice locationForm.removeEventListener('submit', handleInvalidInput); - // Ask about the occasion after a short delay + // Ask about the occasion setTimeout(() => { askForOccasion(choice); }, 1000); } } - // Add event listeners to the buttons to handle the user's choice + // Function to ask about the occasion + const askForOccasion = (clothingChoice) => { + showMessage("Are you dressing for a specific occasion or activity (e.g., work, party, exercise)?", 'bot'); + + const occasionInputHandler = (event) => handleOccasionInput(event, clothingChoice, occasionInputHandler); + locationForm.addEventListener('submit', occasionInputHandler); + } + + // Eevent listeners to the buttons to handle the user's choice const buttons = document.querySelectorAll('.clothing-choice'); buttons.forEach(button => { button.addEventListener('click', handleClothingChoice); }); - // Add event listener to handle invalid input during this phase + // Event listener to handle invalid input locationForm.addEventListener('submit', handleInvalidInput); - chat.scrollTop = chat.scrollHeight } // Function to handle invalid input (user typing text instead of clicking buttons) const handleInvalidInput = (event) => { event.preventDefault(); - const userInput = locationInput.value.trim(); + const userInput = locationInput.value; if (userInput) { - // Show user's message showMessage(userInput, 'user'); - - // Show bot's response showMessage("That's not a valid answer. Please refresh the chat and try again.", 'bot'); - // Clear the input field - locationInput.value = ''; } }; -// Function to ask about the occasion -const askForOccasion = (clothingChoice) => { - showMessage("Are you dressing for a specific occasion or activity (e.g., work, party, exercise)?", 'bot'); - - // Add event listener to handle user's occasion input - const occasionInputHandler = (event) => handleOccasionInput(event, clothingChoice, occasionInputHandler); - locationForm.addEventListener('submit', occasionInputHandler); -} - // Function to handle the occasion input const handleOccasionInput = (event, clothingChoice, occasionInputHandler) => { event.preventDefault(); - const occasion = locationInput.value.trim(); + const occasion = locationInput.value; if (occasion) { showMessage(occasion, 'user'); locationInput.value = ''; @@ -169,13 +156,13 @@ const handleOccasionInput = (event, clothingChoice, occasionInputHandler) => { locationForm.removeEventListener('submit', occasionInputHandler); setTimeout(() => { - provideOutfitSuggestion(clothingChoice, occasion); + OutfitSuggestion(clothingChoice, occasion); }, 1000); } } -// Function to provide the final outfit suggestion -const provideOutfitSuggestion = (clothingChoice, occasion) => { +// Function for outfit suggestion +const OutfitSuggestion = (clothingChoice, occasion) => { let suggestion = ''; if (clothingChoice === 'casual') { @@ -202,21 +189,12 @@ const provideOutfitSuggestion = (clothingChoice, occasion) => { showMessage(suggestion, 'bot'); - // End the conversation or reset as needed + // End the conversation setTimeout(() => { showMessage("Let me know if you need anything else!", 'bot'); }, 2000); } -// Event listeners 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) // Listen for the form submit event to capture user's location input From a934627da41592451683f4ad627016af6c77bc5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hel=C3=A9ne?= Date: Sun, 15 Sep 2024 15:52:59 +0200 Subject: [PATCH 6/8] changed files --- .DS_Store | Bin 6148 -> 6148 bytes README.md | 2 +- code/.DS_Store | Bin 0 -> 6148 bytes code/index.html => index.html | 0 code/script.js => script.js | 0 code/style.css => style.css | 0 6 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 code/.DS_Store rename code/index.html => index.html (100%) rename code/script.js => script.js (100%) rename code/style.css => style.css (100%) diff --git a/.DS_Store b/.DS_Store index cffe449da3bc277d532a49649403c065001fed00..b98ebec3c456e0c3946e91d4225cec6e4f7d4258 100644 GIT binary patch delta 219 zcmZoMXfc=|#>B!ku~2NHo+2aX#(>?7i$5?kF>-F^VG?3ATRWE~p|r!a12=iui6I(_p)=I_jt`9&N#7#SFtfT|ca JM~JLp1^^&pLvR29 delta 72 zcmZoMXfc=|#>B)qu~2NHo+2aL#(>?7jBJ~EScDiS2eBU5T*21QxUpdt(`I%Keh#3z a&4L`?nJ4p$IC3xm0V4wg%jO7?HOv6D0}*Qg diff --git a/README.md b/README.md index 6affbf44..39d3f2c4 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ The project was to create a chatbot that interacts with the user using DOM, func ## The problem -I tackled the project by creating a scenario for how the conversation would flow and then trying to set up functions for each step of the conversation. +I tackled the project by creating a scenario for how the conversation would flow and then tried to set up functions for each step of the conversation. If there had been more time I would have tried to get the chatbot to fetch real weather data. The chatbot does not show a message for invalid input when typing in something else than the suggested occasions, which I would add if I had more time for the project, alternatively using buttons for the options as well. diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..3596f51df58c679b11bef41bdbe784d93f566e4b GIT binary patch literal 6148 zcmeHKF-`+P474Fak$bdgd7`m1;sKTBq83n{r!P|%?9$(~)G zXZLQ3^R1cr;^Xz+Y;I;#IMF^C#>V^fkzG~BfpDzxZu`gW?q##xZAR6X6Xf35+V;5K z&iH(&2l(9~?D7K2N&zV#1*Cu!kOIF_fV~$soh2$t0VyB_z7^p2p}~p0a7c_#2SOYH zfD@#{FpjeXurUGbg+n4TFi$Elsa{76Pdf6g>U!ajm~`{l8SB)}UMCcf-H~rmZr&3W zrGOMTRp2_ObN2rg{D<@ZDM>RaAO-%F0zO$jEf;vD>aC-fW3O%SXELQZ@f33g~LF60L literal 0 HcmV?d00001 diff --git a/code/index.html b/index.html similarity index 100% rename from code/index.html rename to index.html diff --git a/code/script.js b/script.js similarity index 100% rename from code/script.js rename to script.js diff --git a/code/style.css b/style.css similarity index 100% rename from code/style.css rename to style.css From bde7b58ded02c8d9e183016caf83ea22269936d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hel=C3=A9ne?= Date: Sun, 15 Sep 2024 15:58:14 +0200 Subject: [PATCH 7/8] fixed the img --- .DS_Store | Bin 6148 -> 6148 bytes code/assets/bot.png => bot.png | Bin code/.DS_Store | Bin 6148 -> 6148 bytes code/assets/.DS_Store | Bin 0 -> 6148 bytes script.js | 4 ++-- code/assets/user.png => user.png | Bin 6 files changed, 2 insertions(+), 2 deletions(-) rename code/assets/bot.png => bot.png (100%) create mode 100644 code/assets/.DS_Store rename code/assets/user.png => user.png (100%) diff --git a/.DS_Store b/.DS_Store index b98ebec3c456e0c3946e91d4225cec6e4f7d4258..25e94f88887f9898001cc485dccac79459043782 100644 GIT binary patch delta 211 zcmZoMXfc@JFUrlpz`)4BAi%&-z>vp~?wOOHoRqU!kYhQsK1hn4A&DWMp@cyXSvo%n zC? s=-w*bNuB80H75<^8f$< delta 124 zcmZoMXfc@JFUrZlz`)4BAi&_6lb@WFlb;0S3v3qTSkBDIIoXOun$dA{7>gt$AH!du z#Nz)@Fu9i1ka7Lw^{oDkvXlP<+1-;3*$jEJQPkwKsq)@L7TH)hg>f@G$6tN`x(qRA diff --git a/code/assets/bot.png b/bot.png similarity index 100% rename from code/assets/bot.png rename to bot.png diff --git a/code/.DS_Store b/code/.DS_Store index 3596f51df58c679b11bef41bdbe784d93f566e4b..3ab66bc8d971c36976af9057898c5f03d1078bb4 100644 GIT binary patch delta 316 zcmZoMXfc=|#>B)qu~2NHo+2aj!~pA!7aACWj2``ZHikroVjxUqC}Aj0DlaZb%E?b+ zU|`suRFIQdTw-8wjgg6&g_Vt+gPnt$BQ`iAzdX1kv81%vDX}OT#0$yK&q;!@6O+O+ zQ_JH8M4a>UN)j{kQj5SEGE-84N@Bt@^HTE5o$^cbQi{QPgEMo%G8~*7obdwU)z!wv zItqp+# delta 72 zcmZoMXfc=|#>CJzu~2NHo+2aT!~knX#>qTP`kT#|FS2ZQV6JA`%+A5j0aUWtkoi0F aWPTA{PDTa>h66y%FxiGjdUK4(5@rCSP7z`N diff --git a/code/assets/.DS_Store b/code/assets/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 {

${message}

- User + User
` // The else if statement checks if the sender is the bot and if that's the case it inserts @@ -27,7 +27,7 @@ const showMessage = (message, sender) => { console.log("Sender is:", sender); chat.innerHTML += `
- Bot + Bot

${message}

diff --git a/code/assets/user.png b/user.png similarity index 100% rename from code/assets/user.png rename to user.png From 0bdc2af50e8d74d2596939bbd82c4869bfc009cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hel=C3=A9ne?= Date: Sun, 15 Sep 2024 16:02:45 +0200 Subject: [PATCH 8/8] added link in readme file --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 39d3f2c4..0742d21a 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,4 @@ If there had been more time I would have tried to get the chatbot to fetch real ## 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://rococo-stroopwafel-4da0eb.netlify.app/ \ No newline at end of file