From 50efb672c2db619bb7065b76be33ffd87f5bf613 Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sat, 14 Sep 2024 23:31:50 +0200 Subject: [PATCH 1/8] Step 1 done, adjusted the timing for the message and added console.log --- .DS_Store | Bin 0 -> 6148 bytes code/script.js | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a4f46b703029a37dd2a94e8359919401a05aa256 GIT binary patch literal 6148 zcmeHK!A`?441FF&+Qfk!cR}hGOyUo^sXK7s!aiWIwL(Z`9b@C%J0HU*!m|@iT34;`9k$pr*N%2=o-v+Lw6cD*vW~D} zRK;(>_!2L)O3Sujrji*p9DA^SM?Se~{X-in~<;tV(g&cMH7K+kSU z|01Bb&VV!E3>+BH^C6`wW)Yi!c66|@5`dV{ZNk1i{fVhMh*`uYAUzZbp~Mg>vBZ#A zIY(h_&k`#XiG_!xHXV`$^wt@0296mx3+7Po|JnET|8bC8&VV!U zrx=hVpXXC9Dc-Foi_^O{rQTCjbY2ti5WMuRub Iz>hNU1zDI*EdT%j literal 0 HcmV?d00001 diff --git a/code/script.js b/code/script.js index 125d6904..1a0f0d53 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(messag) chat.innerHTML += `
Bot @@ -33,7 +34,6 @@ const showMessage = (message, sender) => { // 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: @@ -50,4 +50,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, 200) From 00a59ea0063da96af5931cbf21f70c26c5a5b9b5 Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sun, 15 Sep 2024 20:36:11 +0200 Subject: [PATCH 2/8] Step 2, changed welcome message --- .DS_Store | Bin 6148 -> 6148 bytes code/script.js | 3 ++- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.DS_Store b/.DS_Store index a4f46b703029a37dd2a94e8359919401a05aa256..bc490a527ad7c3b7430df23a457b6b394ac7e793 100644 GIT binary patch delta 226 zcmZoMXfc@J&&akhU^gQp+hiUlllr9c;)0}{{3Hejh8;--Ihn;J1_sv{nV4Bv+1NSQ zIk-7ugER8WgG&-iN{gKmi=siiko^3dBp5p}DJ(O!JYGP=IX|x?F*7f<2&^G9B^9V7 zCOk7QCBNJ$zceqU7_2uKBEiAQ!5J?gQSDl7WN4_PU}9iVtD{hDX=DIo8=KYEa&m|& n>strKXXoVR<#z!c2Lz0a5SoD(O2eq`%_dCDtee?6{_+C=)h0cd delta 31 ncmZoMXfc@J&&awlU^gQp>tr4#lg$Fm-&rO$T-eOc@s}R}oHPnn diff --git a/code/script.js b/code/script.js index 1a0f0d53..c8463788 100644 --- a/code/script.js +++ b/code/script.js @@ -5,6 +5,8 @@ const chat = document.getElementById('chat') // A function that will add a chat bubble in the correct place based on who the sender is const showMessage = (message, sender) => { + + console.log("sender: ", 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') { @@ -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(messag) chat.innerHTML += `
Bot From f77eff2d57acc7b44238f717bd09d66c79289ebd Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sun, 15 Sep 2024 21:15:41 +0200 Subject: [PATCH 3/8] Step 3, first input added accordingly,next question now visible --- code/script.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/code/script.js b/code/script.js index c8463788..39f2e2dc 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 nameInput = document.getElementById('name-input') +const nameForm = document.getElementById('name-form') +const inputWrapper = document.getElementById('input-wrapper') // Functions goes here 👇 @@ -43,6 +46,30 @@ const greetUser = () => { // Just to check it out, change 'bot' to 'user' here 👆 and see what happens } +const handleNameInput = () => { + // event.preventDefault() + // Store the value in a variable so we can access it after we + // clear it from the input + const name = nameInput.value + showMessage(name, "user") + nameInput.value = "" + + // After 1 second, show the next question by invoking the next function. + // passing the name into it to have access to the user's name if we want + // to use it in the next question from the bot. + //showFoodOptions(name) + setTimeout( () => showFoodOptions(name), 1000); +} + +const showFoodOptions = (name) => { + showMessage(`hello ${name}! what would you like to order?`,'bot') + inputWrapper.innerHTML = ` + + + + ` +} + // Eventlisteners goes here 👇 // Here we invoke the first function to get the chatbot to ask the first question when @@ -51,4 +78,7 @@ 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. + +nameForm.addEventListener('submit', () => handleNameInput()) + setTimeout(greetUser, 200) From 0fab85888aaabbca61ec2b6dd254d001a8ad839e Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sun, 15 Sep 2024 22:26:21 +0200 Subject: [PATCH 4/8] Added step 4, added aditional options to the conversation, added drop down menu --- code/script.js | 101 +++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 90 insertions(+), 11 deletions(-) diff --git a/code/script.js b/code/script.js index 39f2e2dc..085a16c6 100644 --- a/code/script.js +++ b/code/script.js @@ -46,21 +46,24 @@ const greetUser = () => { // Just to check it out, change 'bot' to 'user' here 👆 and see what happens } -const handleNameInput = () => { - // event.preventDefault() +const handleNameInput = (event) => { + //event.preventDefault() // Store the value in a variable so we can access it after we // clear it from the input - const name = nameInput.value - showMessage(name, "user") - nameInput.value = "" + const name = nameInput.value.trim() + if (name !== "") { + showMessage(name, "user") + nameInput.value = "" + showFoodOptions(name) + } else { + showMessage('Please enter a valid name.', 'bot') // After 1 second, show the next question by invoking the next function. // passing the name into it to have access to the user's name if we want // to use it in the next question from the bot. - //showFoodOptions(name) - setTimeout( () => showFoodOptions(name), 1000); -} - + } +} +// Eventlisteners goes here 👇 const showFoodOptions = (name) => { showMessage(`hello ${name}! what would you like to order?`,'bot') inputWrapper.innerHTML = ` @@ -68,10 +71,86 @@ const showFoodOptions = (name) => { ` + + document.getElementById('tacosButton').addEventListener('click', () => handleFoodSelection('Tacos')) + document.getElementById('pizzaButton').addEventListener('click', () => handleFoodSelection('Pizza')) + document.getElementById('pastaButton').addEventListener('click', () => handleFoodSelection('Pasta')) } -// Eventlisteners goes here 👇 +const handleFoodSelection = (food) => { + showMessage(`I would like to have ${food}! thanks 🥰`, 'user') + askForDrink() +} + +const askForDrink = () => { + showMessage("amazing! would you like a drink with that?", 'bot') + inputWrapper.innerHTML = ` + + + `; + + document.getElementById('yesButton').addEventListener('click', () => handleDrinkSelection(true)) + document.getElementById('noButton').addEventListener('click', () => handleDrinkSelection(false)) +}; + +const handleDrinkSelection = (wantsDrink) => { + if (wantsDrink) { + showMessage("Yes, I would like a drink.", 'user') + setTimeout(() => showDrinkOptions(), 1000) + } else { + showMessage("No, thanks.", 'user'); + setTimeout(() => askForDessert(), 1000) + } +}; + +const showDrinkOptions = () => { + showMessage("What drink would you like?", 'bot') + inputWrapper.innerHTML = ` + + + `; + + document.getElementById('selectDrinkButton').addEventListener('click', () => { + const selectedDrink = document.getElementById('drinkSelect').value + if (selectedDrink) { + showMessage(`I'll have a ${selectedDrink}.`, 'user') + setTimeout(() => askForDessert(), 1000) + } else { + showMessage("Please select a drink.", 'bot') + } + }); +}; + +const askForDessert = () => { + showMessage("Would you like some dessert?", 'bot') + inputWrapper.innerHTML = ` + + + `; + + document.getElementById('dessertYesButton').addEventListener('click', () => handleDessertSelection(true)) + document.getElementById('dessertNoButton').addEventListener('click', () => handleDessertSelection(false)) +}; + +const handleDessertSelection = (wantsDessert) => { + if (wantsDessert) { + showMessage("Yes, I would love some dessert!", 'user') + setTimeout(() => showFinalMessage(), 1000) + } else { + showMessage("No, I'm good.", 'user') + setTimeout(() => showFinalMessage(), 1000); + } +} +const showFinalMessage = () => { + showMessage("Thank you for your order! It will be ready soon. Have a great day!", 'bot'); + inputWrapper.innerHTML = "" // Clear the input wrapper +}; // 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): @@ -79,6 +158,6 @@ const showFoodOptions = (name) => { // 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. -nameForm.addEventListener('submit', () => handleNameInput()) +nameForm.addEventListener('submit', () => handleNameInput(event)) setTimeout(greetUser, 200) From aedd6a6ec044b5f8dc1e42671a9dfba77e05ca88 Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sun, 15 Sep 2024 22:43:36 +0200 Subject: [PATCH 5/8] Added step 5, added comments, code cleanup, enabled function that was commented out --- code/script.js | 39 ++++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/code/script.js b/code/script.js index 085a16c6..54b8c425 100644 --- a/code/script.js +++ b/code/script.js @@ -47,7 +47,7 @@ const greetUser = () => { } const handleNameInput = (event) => { - //event.preventDefault() + event.preventDefault() // Store the value in a variable so we can access it after we // clear it from the input const name = nameInput.value.trim() @@ -64,6 +64,7 @@ const handleNameInput = (event) => { } } // Eventlisteners goes here 👇 +//First menu option const showFoodOptions = (name) => { showMessage(`hello ${name}! what would you like to order?`,'bot') inputWrapper.innerHTML = ` @@ -71,12 +72,14 @@ const showFoodOptions = (name) => { ` - +//Here we listen for the event/click that selects the food document.getElementById('tacosButton').addEventListener('click', () => handleFoodSelection('Tacos')) document.getElementById('pizzaButton').addEventListener('click', () => handleFoodSelection('Pizza')) document.getElementById('pastaButton').addEventListener('click', () => handleFoodSelection('Pasta')) } +//Return message telling which food was selected +//Call the function askForDrink const handleFoodSelection = (food) => { showMessage(`I would like to have ${food}! thanks 🥰`, 'user') askForDrink() @@ -87,22 +90,23 @@ const askForDrink = () => { inputWrapper.innerHTML = ` - `; + ` document.getElementById('yesButton').addEventListener('click', () => handleDrinkSelection(true)) document.getElementById('noButton').addEventListener('click', () => handleDrinkSelection(false)) -}; +} const handleDrinkSelection = (wantsDrink) => { if (wantsDrink) { showMessage("Yes, I would like a drink.", 'user') setTimeout(() => showDrinkOptions(), 1000) } else { - showMessage("No, thanks.", 'user'); + showMessage("No, thanks.", 'user') setTimeout(() => askForDessert(), 1000) } -}; +} +//A dropdown is presented to select the type of drink. const showDrinkOptions = () => { showMessage("What drink would you like?", 'bot') inputWrapper.innerHTML = ` @@ -113,8 +117,8 @@ const showDrinkOptions = () => { - `; - + ` +//Conditional Checks: The bot uses if...else statements to handle different responses document.getElementById('selectDrinkButton').addEventListener('click', () => { const selectedDrink = document.getElementById('drinkSelect').value if (selectedDrink) { @@ -123,19 +127,19 @@ const showDrinkOptions = () => { } else { showMessage("Please select a drink.", 'bot') } - }); -}; + }) +} const askForDessert = () => { showMessage("Would you like some dessert?", 'bot') inputWrapper.innerHTML = ` - `; + ` document.getElementById('dessertYesButton').addEventListener('click', () => handleDessertSelection(true)) document.getElementById('dessertNoButton').addEventListener('click', () => handleDessertSelection(false)) -}; +} const handleDessertSelection = (wantsDessert) => { if (wantsDessert) { @@ -143,14 +147,17 @@ const handleDessertSelection = (wantsDessert) => { setTimeout(() => showFinalMessage(), 1000) } else { showMessage("No, I'm good.", 'user') - setTimeout(() => showFinalMessage(), 1000); + setTimeout(() => showFinalMessage(), 1000) } } const showFinalMessage = () => { - showMessage("Thank you for your order! It will be ready soon. Have a great day!", 'bot'); + showMessage("Thank you for your order! It will be ready soon. Have a great day!", 'bot') inputWrapper.innerHTML = "" // Clear the input wrapper -}; +} + +nameForm.addEventListener('submit', () => handleNameInput(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): @@ -158,6 +165,4 @@ const showFinalMessage = () => { // 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. -nameForm.addEventListener('submit', () => handleNameInput(event)) - setTimeout(greetUser, 200) From 083b8043ec4c4cb1d7e9ceaca0fc468977047da1 Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sun, 15 Sep 2024 22:47:29 +0200 Subject: [PATCH 6/8] final clean up --- code/script.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/script.js b/code/script.js index 54b8c425..76cec356 100644 --- a/code/script.js +++ b/code/script.js @@ -118,7 +118,7 @@ const showDrinkOptions = () => { ` -//Conditional Checks: The bot uses if...else statements to handle different responses + //Conditional Checks: The bot uses if...else statements to handle different responses document.getElementById('selectDrinkButton').addEventListener('click', () => { const selectedDrink = document.getElementById('drinkSelect').value if (selectedDrink) { @@ -136,14 +136,13 @@ const askForDessert = () => { ` - document.getElementById('dessertYesButton').addEventListener('click', () => handleDessertSelection(true)) document.getElementById('dessertNoButton').addEventListener('click', () => handleDessertSelection(false)) } const handleDessertSelection = (wantsDessert) => { if (wantsDessert) { - showMessage("Yes, I would love some dessert!", 'user') + showMessage("Yes, I would love some dessert! 🍰", 'user') setTimeout(() => showFinalMessage(), 1000) } else { showMessage("No, I'm good.", 'user') From 7c24b1903311edf4702fe71bec62b36d33d6e595 Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sun, 15 Sep 2024 22:57:13 +0200 Subject: [PATCH 7/8] update Readme file --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 60f55e53..cb7469dd 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,19 @@ 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. +For the project week # we had to create a chatbot that can interact with users, ask questions, display messages, and respond with precision, using mostly JS. + + ## 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 was again stick to the steps that we go, and I readed carefully the predeterminated comments that were added to the file, and trying out what was already there helped me to understand a bit more each function. + +I had problems setting the time with setTimeout for the second message, and I still trying to understand what happened there, if I had more time I would fix it to make it work in a smoother way. + +This time I repeated a few times some of the videos in the weekly material for a deeper understanding, I tried to watch some youtube videos in my native language and english to have more clear the concepts, and as usual I got a some help from chatgpt and w3school and stack overflow. + ## 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. From 799a46009afba0c4ed70da0dffeb36f8e3d8ab77 Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sun, 15 Sep 2024 23:06:38 +0200 Subject: [PATCH 8/8] added netlify link --- README.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index cb7469dd..ae7b99ad 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,10 @@ # 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. - -For the project week # we had to create a chatbot that can interact with users, ask questions, display messages, and respond with precision, using mostly JS. +For the project week #5 we had to create a chatbot that can interact with users, ask questions, display messages, and respond with precision, using mostly JS. ## 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 was again stick to the steps that we go, and I readed carefully the predeterminated comments that were added to the file, and trying out what was already there helped me to understand a bit more each function. I had problems setting the time with setTimeout for the second message, and I still trying to understand what happened there, if I had more time I would fix it to make it work in a smoother way. @@ -19,4 +13,4 @@ This time I repeated a few times some of the videos in the weekly material for a ## 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://chatbotestefanny.netlify.app/ \ No newline at end of file