From ea72aa9ed48eab44b4cb2adbe5cb78e2f9caf92d Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Thu, 12 Sep 2024 00:37:23 +0200 Subject: [PATCH 01/11] started with project chatbot --- code/index.html | 52 +++++++++++++++++++------------------- code/script.js | 66 +++++++++++++++++++++++++++++++++++-------------- code/style.css | 6 +++-- 3 files changed, 78 insertions(+), 46 deletions(-) diff --git a/code/index.html b/code/index.html index 316eb187..b2312c1f 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,32 @@ - - - - - - Chatbot - + + + + + + Movie-chatbot + - -

Welcome to my chatbot!

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

Welcome to the Movie-chatbot!

+
+
+
+
+ + + +
+
+
- - + + - + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 125d6904..97551139 100644 --- a/code/script.js +++ b/code/script.js @@ -1,13 +1,15 @@ + // DOM selectors (variables that point to selected DOM elements) goes here 👇 const chat = document.getElementById('chat') +const nameInput = document.getElementById('name-input') +const form = document.getElementById('name-form'); // 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 + // 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') { + console.log("message from user") chat.innerHTML += `
@@ -16,9 +18,9 @@ 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 + // 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("message from bot") chat.innerHTML += `
Bot @@ -28,26 +30,54 @@ 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 + // 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 + +} + +const handleNameInput = (event) => { + //this default does something + event.preventDefault(); + //This stores the name for the session + sessionStorage.setItem('username', name); + //This connects with the html and collects the input value for name in form + const name = nameInput.value; + //This shows the message in the chatbubble + showMessage(name, "user"); + //This clears the input field... somehow? + 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. + setTimeout(() => showMovieGenreOptions(name), 1000); +}; + +//this stores the username +const storedName = sessionStorage.getItem('username'); + +if (storedName) { + showMessage(storedName, 'user'); + setTimeout(() => showMovieGenreOptions(storedName), 1000); + // Continue with the flow using the storedName } -// Eventlisteners goes here 👇 +//eventlistener to ensure the answer is submitted when button is clicked +if (form) { + form.addEventListener('submit', handleNameInput); +} else { + console.error('Form element not found'); +} +// 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: -// 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) + +const greetBot = () => { + +} + diff --git a/code/style.css b/code/style.css index a275402f..c0638988 100644 --- a/code/style.css +++ b/code/style.css @@ -6,14 +6,16 @@ body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; - background: #0026ff; + background: linear-gradient(to right, #04030b, #20040b); + + } h1 { font-weight: bold; font-size: 28px; line-height: 34px; - color: #fff; + color: #be131d; text-align: center; } From 8e5546f011597ddd05280630ab5944440b4ec8fb Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Thu, 12 Sep 2024 16:31:18 +0200 Subject: [PATCH 02/11] removed unessecary code and added variabels and eventlisteners --- code/script.js | 50 ++++++++++++++++++++++++++++---------------------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/code/script.js b/code/script.js index 97551139..f1145ec2 100644 --- a/code/script.js +++ b/code/script.js @@ -2,6 +2,7 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 const chat = document.getElementById('chat') const nameInput = document.getElementById('name-input') +console.log(nameInput.value, "name-input") const form = document.getElementById('name-form'); // Functions goes here 👇 @@ -30,7 +31,7 @@ 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 + // This makes the chat scroll to the last message when there are too many to be shown in the chat box chat.scrollTop = chat.scrollHeight } @@ -39,41 +40,46 @@ const greetUser = () => { showMessage("Hello there, what's your name?", 'bot') } - +//funktion som heter handlenameinput, möjliggör att kunna skriva sitt namn. const handleNameInput = (event) => { + console.log("event", event) //this default does something event.preventDefault(); - //This stores the name for the session - sessionStorage.setItem('username', name); //This connects with the html and collects the input value for name in form const name = nameInput.value; //This shows the message in the chatbubble showMessage(name, "user"); //This clears the input field... somehow? 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. - setTimeout(() => showMovieGenreOptions(name), 1000); + setTimeout(() => movieOptions(name), 1000) }; -//this stores the username -const storedName = sessionStorage.getItem('username'); +//eventlisteners - handlenameinput kallas när knappen klickas +form.addEventListener("submit", handleNameInput); -if (storedName) { - showMessage(storedName, 'user'); - setTimeout(() => showMovieGenreOptions(storedName), 1000); - // Continue with the flow using the storedName -} +//PART 2 -//eventlistener to ensure the answer is submitted when button is clicked -if (form) { - form.addEventListener('submit', handleNameInput); -} else { - console.error('Form element not found'); +// kallar på funktionen movieoptions +const movieOptions = (name) => { + showMessage(`Hello there ${name}, what's do you want to watch today?`, 'bot') + form.removeEventListener("submit", handleNameInput); + form.addEventListener("submit", movieOptions); } -// 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: + + +// const movieOptionInput = (event) => { +// console.log("movieOption", event) +// //this default does something +// event.preventDefault(); +// //This connects with the html and collects the input value for name in form +// const name = nameInput.value; +// //This shows the message in the chatbubble +// showMessage(name, "user"); +// //This clears the input field... somehow? +// nameInput.value = ""; +// setTimeout(() => movieOptions(name), 1000) +// }; + setTimeout(greetUser, 1000) From 6854fdd4c3f8472c7e99aec452b6c00a9d67a75a Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Thu, 12 Sep 2024 23:52:37 +0200 Subject: [PATCH 03/11] added options for user to choose between --- code/script.js | 155 +++++++++++++++++++++++++++++++++++++++++-------- code/style.css | 10 ++-- 2 files changed, 136 insertions(+), 29 deletions(-) diff --git a/code/script.js b/code/script.js index f1145ec2..869e8b65 100644 --- a/code/script.js +++ b/code/script.js @@ -2,8 +2,9 @@ // DOM selectors (variables that point to selected DOM elements) goes here 👇 const chat = document.getElementById('chat') const nameInput = document.getElementById('name-input') -console.log(nameInput.value, "name-input") const form = document.getElementById('name-form'); +const inputWrapper = document.getElementById('input-wrapper') + // Functions goes here 👇 // A function that will add a chat bubble in the correct place based on who the sender is @@ -31,8 +32,6 @@ const showMessage = (message, sender) => { ` } - // This 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 @@ -40,16 +39,17 @@ const greetUser = () => { showMessage("Hello there, what's your name?", 'bot') } -//funktion som heter handlenameinput, möjliggör att kunna skriva sitt namn. +//funktion som heter handlenameinput, möjliggör att kunna skriva sitt namn. +//the name is stored for the entire session with the value "name" const handleNameInput = (event) => { console.log("event", event) - //this default does something + //this default prevents something event.preventDefault(); - //This connects with the html and collects the input value for name in form + //This connects with the html and collects the input value for "name" const name = nameInput.value; //This shows the message in the chatbubble showMessage(name, "user"); - //This clears the input field... somehow? + //This clears the input field nameInput.value = ""; setTimeout(() => movieOptions(name), 1000) }; @@ -58,32 +58,139 @@ const handleNameInput = (event) => { form.addEventListener("submit", handleNameInput); //PART 2 - // kallar på funktionen movieoptions const movieOptions = (name) => { + //bot asking what type of moviegenre the user want to watch showMessage(`Hello there ${name}, what's do you want to watch today?`, 'bot') + //removing the eventlistener about name form.removeEventListener("submit", handleNameInput); - form.addEventListener("submit", movieOptions); -} + //adding eventlistener for movieoption when button is clicked + + // Hides the text-inputform and adds some more buttons, changed class to "genre-btn" and changed type to "button" to connect with event handleGenreClick + form.innerHTML = ` + + + + ` + //styles the buttons so that they are in the center + form.style.display = 'flex'; + form.style.justifyContent = 'center'; + form.style.alignItems = 'center'; + + const handleGenreClick = (event) => { + event.preventDefault(); + if (event.target.classList.contains('genre-btn')) { + form.innerHTML = ""; + showMessage(`${event.target.textContent}`, 'user'); + // Delay the display of the message from the bot and the options + setTimeout(() => { + chat.scrollTop = chat.scrollHeight + showMessage(`You chose ${event.target.textContent}. Excellent choice! Before we start selecting movies, are you a grownup or a child?`, 'bot'); + ageOption(); + }, 700); + } + } -// const movieOptionInput = (event) => { -// console.log("movieOption", event) -// //this default does something -// event.preventDefault(); -// //This connects with the html and collects the input value for name in form -// const name = nameInput.value; -// //This shows the message in the chatbubble -// showMessage(name, "user"); -// //This clears the input field... somehow? -// nameInput.value = ""; -// setTimeout(() => movieOptions(name), 1000) -// }; + form.addEventListener("click", handleGenreClick); +}; +//PARTT 3: AGE +const ageOption = () => { + form.innerHTML = ` + + + ` + //styles the buttons so that they are in the center + form.style.display = 'flex'; + form.style.justifyContent = 'center'; + form.style.alignItems = 'center'; + form.style.gap = '30px'; -setTimeout(greetUser, 1000) + const handleAgeClick = (event) => { + event.preventDefault(); + if (event.target.classList.contains('age-btn')) { + form.innerHTML = ""; + showMessage(`${event.target.textContent}`, 'user'); + // Delay the display of the message from the bot and the options + setTimeout(() => { + chat.scrollTop = chat.scrollHeight + showMessage(`Alrighty then! Here are some ${event.target.textContent}friendly options for you:`, 'bot'); + SelectMovieOption(); + }, 700); -const greetBot = () => { + } + chat.scrollTop = chat.scrollHeight + + } + form.addEventListener("click", handleAgeClick); } +// PART 4 +// Function to display movie options based on age group +const SelectMovieOption = (ageGroup) => { + let options = ""; + + if (ageGroup === "Child") { + options = ` + + + + `; + } else if (ageGroup === "Adult") { + options = ` + + + + `; + } + + //PART 5 + const SelectMovieOption = () => { + inputWrapper.innerHTML = ` + + + ` + inputWrapper.style.display = 'flex'; + inputWrapper.style.width = '100%'; + inputWrapper.style.boxSizing = 'border-box'; + inputWrapper.style.padding = '10px'; + document.getElementById('movie-option').style.width = '400px'; + document.getElementById('movie-option').style.fontSize = '20px'; + + + // const handleAgeClick = (event) => { + // event.preventDefault(); + // if (event.target.classList.contains('age-btn')) { + // form.innerHTML = ""; + // showMessage(`${event.target.textContent}`, 'user'); + // // Delay the display of the message from the bot and the options + // setTimeout(() => { + // showMessage + // showMessage(`Alrighty then! Here are some ${event.target.textContent}friendly options for you:`, 'bot'); + // ageOption(); + // }, 700); + // } + // } + // form.addEventListener("click", handleAgeClick); + } + + setTimeout(greetUser, 1000) + + + diff --git a/code/style.css b/code/style.css index c0638988..96d07374 100644 --- a/code/style.css +++ b/code/style.css @@ -40,7 +40,7 @@ input { border: none; border-radius: 4px 0 0 4px; background: #e5e9ff; - color: #0026ff; + color: black; padding: 16px; font-size: 16px; font-family: 'Montserrat'; @@ -93,12 +93,12 @@ main { } .bubble { - background: #e5e9ff; + background: #ffefea; font-weight: 600; font-size: 16px; line-height: 26px; padding: 16px 24px; - color: #0026ff; + color: #be131d; max-width: 40%; } @@ -127,12 +127,12 @@ label { font-size: 16px; font-family: 'Montserrat'; font-weight: 500; - color: #0026ff; + color: #720f0f; margin-right: 20px; } button { - background-color: #0026ff; + background-color: #720f0f; color: white; border: none; border-radius: 4px; From f9742c383b503ec2572a910c571bd1ac849502c6 Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Fri, 13 Sep 2024 03:32:50 +0200 Subject: [PATCH 04/11] added if statements to the movieoptions --- code/script.js | 166 +++++++++++++++++++++++++++++++++---------------- 1 file changed, 111 insertions(+), 55 deletions(-) diff --git a/code/script.js b/code/script.js index 869e8b65..12a9ff3c 100644 --- a/code/script.js +++ b/code/script.js @@ -3,7 +3,7 @@ const chat = document.getElementById('chat') const nameInput = document.getElementById('name-input') const form = document.getElementById('name-form'); -const inputWrapper = document.getElementById('input-wrapper') +const inputWrapper = document.getElementById('input-wrapper'); // Functions goes here 👇 @@ -32,6 +32,7 @@ const showMessage = (message, sender) => { ` } + chat.scrollTop = chat.scrollHeight; } // A function to start the conversation @@ -60,12 +61,9 @@ form.addEventListener("submit", handleNameInput); //PART 2 // kallar på funktionen movieoptions const movieOptions = (name) => { - //bot asking what type of moviegenre the user want to watch showMessage(`Hello there ${name}, what's do you want to watch today?`, 'bot') //removing the eventlistener about name form.removeEventListener("submit", handleNameInput); - //adding eventlistener for movieoption when button is clicked - // Hides the text-inputform and adds some more buttons, changed class to "genre-btn" and changed type to "button" to connect with event handleGenreClick form.innerHTML = ` + `; + console.log('inputWrapper:', inputWrapper); + + inputWrapper.style.display = 'flex'; + inputWrapper.style.width = '100%'; + inputWrapper.style.boxSizing = 'border-box'; + inputWrapper.style.padding = '10px'; + document.getElementById('movie-option').style.width = '400px'; + document.getElementById('movie-option').style.fontSize = '20px'; + + // Log options for debugging + console.log('Options:', options); + + const handleSelectMovieOption = (event) => { + if (event.target.id === 'submit-movie') { + const selectedMovie = document.getElementById('movie-option').value; + inputWrapper.innerHTML = ""; + showMessage(`${options}`, 'user'); + // Delay the display of the message from the bot + setTimeout(() => { + chat.scrollTop = chat.scrollHeight; + showMessage(`You selected ${options}, a fine choice! That will be: $5. Do you accept?`, 'bot'); + }, 700); // Adjust the delay as needed + } + }; - //PART 5 - const SelectMovieOption = () => { - inputWrapper.innerHTML = ` - - - ` - inputWrapper.style.display = 'flex'; - inputWrapper.style.width = '100%'; - inputWrapper.style.boxSizing = 'border-box'; - inputWrapper.style.padding = '10px'; - document.getElementById('movie-option').style.width = '400px'; - document.getElementById('movie-option').style.fontSize = '20px'; - - - // const handleAgeClick = (event) => { - // event.preventDefault(); - // if (event.target.classList.contains('age-btn')) { - // form.innerHTML = ""; - // showMessage(`${event.target.textContent}`, 'user'); - // // Delay the display of the message from the bot and the options - // setTimeout(() => { - // showMessage - // showMessage(`Alrighty then! Here are some ${event.target.textContent}friendly options for you:`, 'bot'); - // ageOption(); - // }, 700); - // } - // } - // form.addEventListener("click", handleAgeClick); - } + // Add the event listener to inputWrapper + inputWrapper.addEventListener('click', handleSelectMovieOption); + +} + + + +//PART 5 + + +// const handleAgeClick = (event) => { +// event.preventDefault(); +// if (event.target.classList.contains('age-btn')) { +// form.innerHTML = ""; +// showMessage(`${event.target.textContent}`, 'user'); +// // Delay the display of the message from the bot and the options +// setTimeout(() => { +// showMessage +// showMessage(`Alrighty then! Here are some ${event.target.textContent}friendly options for you:`, 'bot'); +// ageOption(); +// }, 700); +// } +// } +// form.addEventListener("click", handleAgeClick); - setTimeout(greetUser, 1000) +setTimeout(greetUser, 1000) From 321c5688912f57f9204f778a39e997b5a8cdf073 Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Fri, 13 Sep 2024 14:35:46 +0200 Subject: [PATCH 05/11] tried adding correct value to handleselectmovieoption --- code/script.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/code/script.js b/code/script.js index 12a9ff3c..20d199be 100644 --- a/code/script.js +++ b/code/script.js @@ -146,7 +146,6 @@ const ageOption = (genre) => { const SelectMovieOption = (selectedAgeGroup, selectedGenre) => { console.log('SelectMovieOption called with:', selectedAgeGroup, selectedGenre); - let options = ""; console.log('Age Group:', selectedAgeGroup); console.log('Genre:', selectedGenre); @@ -210,13 +209,16 @@ const SelectMovieOption = (selectedAgeGroup, selectedGenre) => { const handleSelectMovieOption = (event) => { if (event.target.id === 'submit-movie') { + const selectedMovie = document.getElementById('movie-option').value; + //const selectedMovie = movieOptionElement.value; + inputWrapper.innerHTML = ""; showMessage(`${options}`, 'user'); // Delay the display of the message from the bot setTimeout(() => { chat.scrollTop = chat.scrollHeight; - showMessage(`You selected ${options}, a fine choice! That will be: $5. Do you accept?`, 'bot'); + showMessage(`You selected ${options}. A fine choice! That will be: $5. Do you accept?`, 'bot'); }, 700); // Adjust the delay as needed } }; From 4f238fe45a331c0eb343b32b579da459ffd5b371 Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Fri, 13 Sep 2024 15:09:01 +0200 Subject: [PATCH 06/11] updated user value --- code/script.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/code/script.js b/code/script.js index 20d199be..52c4131c 100644 --- a/code/script.js +++ b/code/script.js @@ -204,29 +204,34 @@ const SelectMovieOption = (selectedAgeGroup, selectedGenre) => { document.getElementById('movie-option').style.width = '400px'; document.getElementById('movie-option').style.fontSize = '20px'; + inputWrapper.addEventListener('click', handleSelectMovieOption); + // Log options for debugging console.log('Options:', options); - const handleSelectMovieOption = (event) => { - if (event.target.id === 'submit-movie') { +} - const selectedMovie = document.getElementById('movie-option').value; - //const selectedMovie = movieOptionElement.value; +const handleSelectMovieOption = (event) => { + if (event.target.id === 'submit-movie') { + const selectedMovie = document.getElementById('movie-option').value; + //const selectedMovie = movieOptionElement.value; + + if (selectedMovie) { inputWrapper.innerHTML = ""; - showMessage(`${options}`, 'user'); + + showMessage(`${selectedMovie}`, 'user'); // Delay the display of the message from the bot setTimeout(() => { chat.scrollTop = chat.scrollHeight; - showMessage(`You selected ${options}. A fine choice! That will be: $5. Do you accept?`, 'bot'); + showMessage(`You selected ${selectedMovie}. A fine choice! That will be: $5. Do you accept?`, 'bot'); }, 700); // Adjust the delay as needed + } - }; + } +}; - // Add the event listener to inputWrapper - inputWrapper.addEventListener('click', handleSelectMovieOption); -} From fe28ae95169a1d5211154c07f5945f53acab228e Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Fri, 13 Sep 2024 15:15:22 +0200 Subject: [PATCH 07/11] removed wrong code if (event.target.id === 'submit-movie') --- code/script.js | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/code/script.js b/code/script.js index 52c4131c..51a757e8 100644 --- a/code/script.js +++ b/code/script.js @@ -212,22 +212,20 @@ const SelectMovieOption = (selectedAgeGroup, selectedGenre) => { } const handleSelectMovieOption = (event) => { - if (event.target.id === 'submit-movie') { - const selectedMovie = document.getElementById('movie-option').value; - //const selectedMovie = movieOptionElement.value; + const selectedMovie = document.getElementById('movie-option').value; + //const selectedMovie = movieOptionElement.value; - if (selectedMovie) { - inputWrapper.innerHTML = ""; + if (selectedMovie) { + inputWrapper.innerHTML = ""; - showMessage(`${selectedMovie}`, 'user'); - // Delay the display of the message from the bot - setTimeout(() => { - chat.scrollTop = chat.scrollHeight; - showMessage(`You selected ${selectedMovie}. A fine choice! That will be: $5. Do you accept?`, 'bot'); - }, 700); // Adjust the delay as needed + showMessage(`${selectedMovie}`, 'user'); + // Delay the display of the message from the bot + setTimeout(() => { + chat.scrollTop = chat.scrollHeight; + showMessage(`You selected ${selectedMovie}. A fine choice! That will be: $5. Do you accept?`, 'bot'); + }, 700); // Adjust the delay as needed - } } }; From c0ee57bfa6bcc87bf18ecf2b563c134c117f7a71 Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Fri, 13 Sep 2024 17:53:06 +0200 Subject: [PATCH 08/11] tried adding confirmation --- code/script.js | 127 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 93 insertions(+), 34 deletions(-) diff --git a/code/script.js b/code/script.js index 51a757e8..e6be0938 100644 --- a/code/script.js +++ b/code/script.js @@ -5,11 +5,8 @@ const nameInput = document.getElementById('name-input') const form = document.getElementById('name-form'); const inputWrapper = document.getElementById('input-wrapper'); - -// 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') { console.log("message from user") chat.innerHTML += ` @@ -20,7 +17,6 @@ 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 } else if (sender === 'bot') { console.log("message from bot") chat.innerHTML += ` @@ -40,26 +36,24 @@ const greetUser = () => { showMessage("Hello there, what's your name?", 'bot') } -//funktion som heter handlenameinput, möjliggör att kunna skriva sitt namn. //the name is stored for the entire session with the value "name" const handleNameInput = (event) => { console.log("event", event) - //this default prevents something + // Prevents the form from reloading the page when submitted event.preventDefault(); - //This connects with the html and collects the input value for "name" + //This collects the input value for "name" const name = nameInput.value; - //This shows the message in the chatbubble showMessage(name, "user"); //This clears the input field nameInput.value = ""; setTimeout(() => movieOptions(name), 1000) }; -//eventlisteners - handlenameinput kallas när knappen klickas +//eventlisteners - handlenameinput is called when btn "submit" is pressed form.addEventListener("submit", handleNameInput); //PART 2 -// kallar på funktionen movieoptions +// calles the function movieOptions const movieOptions = (name) => { showMessage(`Hello there ${name}, what's do you want to watch today?`, 'bot') //removing the eventlistener about name @@ -93,7 +87,7 @@ const movieOptions = (name) => { chat.scrollTop = chat.scrollHeight showMessage(`You chose ${selectedGenre}. Excellent choice! Before we start selecting movies, are you a grownup or a child?`, 'bot'); ageOption(selectedGenre); - }, 700); + }, 1000); } } @@ -130,7 +124,7 @@ const ageOption = (genre) => { chat.scrollTop = chat.scrollHeight showMessage(`Alrighty then! Here are some ${selectedAgeGroup} friendly options for you:`, 'bot'); SelectMovieOption(selectedAgeGroup, genre); - }, 700); + }, 1000); } chat.scrollTop = chat.scrollHeight @@ -212,46 +206,111 @@ const SelectMovieOption = (selectedAgeGroup, selectedGenre) => { } const handleSelectMovieOption = (event) => { - + //targets the specific movie and not all three options that are stored in the value "options" const selectedMovie = document.getElementById('movie-option').value; - //const selectedMovie = movieOptionElement.value; if (selectedMovie) { + event.preventDefault(); inputWrapper.innerHTML = ""; showMessage(`${selectedMovie}`, 'user'); // Delay the display of the message from the bot setTimeout(() => { chat.scrollTop = chat.scrollHeight; - showMessage(`You selected ${selectedMovie}. A fine choice! That will be: $5. Do you accept?`, 'bot'); - }, 700); // Adjust the delay as needed - + showMessage(`You selected ${selectedMovie}. A fine choice! That will be: $4. Would you like to rent this movie?`, 'bot'); + confirmation(selectedMovie) + }, 1000); } -}; +} + + +const confirmation = () => { + form.innerHTML = ` + + + ` + + // Style the form and add event listener + form.style.display = 'flex'; + form.style.justifyContent = 'center'; + form.style.alignItems = 'center'; + form.style.gap = '30px'; + form.addEventListener('click', handleConfirmationClick); +}; +// Handle confirmation click +const handleConfirmationClick = (event) => { + event.preventDefault(); + const button = event.target; + if (button.classList.contains('yes-btn')) { + const selectedConfirmation = button.textContent.trim(); + form.innerHTML = ""; + showMessage(`${selectedConfirmation}`, 'user'); + setTimeout(() => { + chat.scrollTop = chat.scrollHeight; + showMessage(`You clicked ${selectedConfirmation}. Grab your popcorn, ${selectedMovie} is on its way!`, 'bot'); + }, 1000); + } else if (button.classList.contains('no-btn')) { + const selectedConfirmation = button.textContent.trim(); + form.innerHTML = ""; -//PART 5 + setTimeout(() => { + chat.scrollTop = chat.scrollHeight; + showMessage(`${selectedConfirmation}`, 'user'); + showMessage(`You clicked ${selectedConfirmation}, your order has been canceled. Have a great day!`, 'bot'); + }, 1000); + } +}; -// const handleAgeClick = (event) => { -// event.preventDefault(); -// if (event.target.classList.contains('age-btn')) { -// form.innerHTML = ""; -// showMessage(`${event.target.textContent}`, 'user'); -// // Delay the display of the message from the bot and the options -// setTimeout(() => { -// showMessage -// showMessage(`Alrighty then! Here are some ${event.target.textContent}friendly options for you:`, 'bot'); -// ageOption(); -// }, 700); -// } -// } -// form.addEventListener("click", handleAgeClick); -setTimeout(greetUser, 1000) +//PART 5 confirmation +//let handleConfirmationClick = ""; + +// const confirmation = () => { +// form.innerHTML = ` +// +// +// ` +// form.style.display = 'flex'; +// form.style.justifyContent = 'center'; +// form.style.alignItems = 'center'; +// form.style.gap = '30px'; + +// const handleConfirmationClick = (event) => { +// event.preventDefault(); +// if (event.target.classList.contains('yes-btn')) { +// const selectedConfirmation = event.target.textContent.trim(); +// form.innerHTML = ""; +// showMessage(`${selectedConfirmation} `'user'); +// // Delay the display of the message from the bot and the options +// setTimeout(() => { +// chat.scrollTop = chat.scrollHeight +// showMessage(`You clicked ${selectedConfirmationType}! Grab your popcorn, ${selectedMovie} is on its way!`, 'bot'); +// }, 1000); +// } else if (event.target.classlist.contains('no-btn')) { +// // Delay the display of the message from the bot and the options +// setTimeout(() => { +// chat.scrollTop = chat.scrollHeight +// showMessage(`${selectedConfirmation} `'user'); +// showMessage(`You clicked ${selectedConfirmation}, your order has been clacelled. Have a greta day!`, 'bot') + +// } +// } +// form.addEventListener("click", handleAgeClick); +// } +setTimeout(greetUser, 1000) From b2c6dffd9256f203e033f0e4b39bc0e5d4427ed7 Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Sun, 15 Sep 2024 18:21:44 +0200 Subject: [PATCH 09/11] tried calling function confirmation --- code/script.js | 42 ------------------------------------------ 1 file changed, 42 deletions(-) diff --git a/code/script.js b/code/script.js index e6be0938..4635f850 100644 --- a/code/script.js +++ b/code/script.js @@ -271,46 +271,4 @@ const handleConfirmationClick = (event) => { -//PART 5 confirmation -//let handleConfirmationClick = ""; - -// const confirmation = () => { -// form.innerHTML = ` -// -// -// ` -// form.style.display = 'flex'; -// form.style.justifyContent = 'center'; -// form.style.alignItems = 'center'; -// form.style.gap = '30px'; - -// const handleConfirmationClick = (event) => { -// event.preventDefault(); -// if (event.target.classList.contains('yes-btn')) { -// const selectedConfirmation = event.target.textContent.trim(); -// form.innerHTML = ""; -// showMessage(`${selectedConfirmation} `'user'); -// // Delay the display of the message from the bot and the options -// setTimeout(() => { -// chat.scrollTop = chat.scrollHeight -// showMessage(`You clicked ${selectedConfirmationType}! Grab your popcorn, ${selectedMovie} is on its way!`, 'bot'); -// }, 1000); -// } else if (event.target.classlist.contains('no-btn')) { -// // Delay the display of the message from the bot and the options -// setTimeout(() => { -// chat.scrollTop = chat.scrollHeight -// showMessage(`${selectedConfirmation} `'user'); -// showMessage(`You clicked ${selectedConfirmation}, your order has been clacelled. Have a greta day!`, 'bot') - -// } - -// } -// form.addEventListener("click", handleAgeClick); - -// } - setTimeout(greetUser, 1000) From 179a3909d981fd9c4b7e516d35bcfb715a5c674d Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Mon, 16 Sep 2024 00:04:29 +0200 Subject: [PATCH 10/11] updated functions and added a readme --- README.md | 23 ++++++++++---- code/index.html | 5 +-- code/script.js | 83 ++++++++++++++++++++++--------------------------- code/style.css | 64 ++++++++++++++++++++++++++++++++++++-- 4 files changed, 119 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index 60f55e53..48043b4d 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,24 @@ -# Project Name +Project Name: Movie chatbot -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 purpose of this project was to create an interactive chatbot that engages users in a conversational flow. The chatbot greets the user, allows them to pick a movie genre, select their age group, and then suggests appropriate movies based on their choices. ## 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? +Functionality & Hierarchy: +One of the primary challenges was creating functions that worked correctly while maintaining the proper structure of the website. Organizing the site hierarchically to ensure the right values and variables were filled out, and functions were called properly, was difficult. + +Variable Scope: +Another challenge was understanding where to place variables and values to ensure they were accessible at the right times. I struggled with ensuring that variables were in the correct scope so they could be used within functions. I solved this by restructuring my code and moving variables to the global scope when necessary, ensuring they were introduced before being called in functions. + +Event Listeners: +Setting up event listeners properly was tricky. Ensuring that they triggered the correct actions at the right time required careful structuring. I tested different ways of implementing event listeners, it took some time to learn how to ensure they correctly triggered the right functions. + +I used console.log extensively throughout the project to trace the flow of my code and see where issues were occurring. This helped me a lot with identifying bugs. + +If I had more time: +I would focus on cleaning up the structure of the code to make it shorter and more efficient. Right now, there is a lot of repeated code that I think could be simplified. For example, I believe there are opportunities to combine similar functions so that one function could handle multiple tasks instead of writing the same type of logic repeatedly. ## 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://moviechatbot.netlify.app/ + diff --git a/code/index.html b/code/index.html index b2312c1f..00dcf1df 100644 --- a/code/index.html +++ b/code/index.html @@ -12,13 +12,14 @@ -

Welcome to the Movie-chatbot!

+

Welcome to the Movie-chatbot!🍿

- + + diff --git a/code/script.js b/code/script.js index 4635f850..77fc6a97 100644 --- a/code/script.js +++ b/code/script.js @@ -1,14 +1,11 @@ -// DOM selectors (variables that point to selected DOM elements) goes here 👇 const chat = document.getElementById('chat') const nameInput = document.getElementById('name-input') const form = document.getElementById('name-form'); const inputWrapper = document.getElementById('input-wrapper'); -// A function that will add a chat bubble in the correct place based on who the sender is const showMessage = (message, sender) => { if (sender === 'user') { - console.log("message from user") chat.innerHTML += `
@@ -18,7 +15,6 @@ const showMessage = (message, sender) => {
` } else if (sender === 'bot') { - console.log("message from bot") chat.innerHTML += `
Bot @@ -38,7 +34,6 @@ const greetUser = () => { } //the name is stored for the entire session with the value "name" const handleNameInput = (event) => { - console.log("event", event) // Prevents the form from reloading the page when submitted event.preventDefault(); //This collects the input value for "name" @@ -98,7 +93,6 @@ const movieOptions = (name) => { let selectedAgeGroup = ""; const ageOption = (genre) => { - console.log('Received genre:', genre); form.innerHTML = ` ` - //styles the buttons so that they are in the center form.style.display = 'flex'; form.style.justifyContent = 'center'; form.style.alignItems = 'center'; @@ -138,11 +131,8 @@ const ageOption = (genre) => { // Function to display movie options based on age and genre option const SelectMovieOption = (selectedAgeGroup, selectedGenre) => { - console.log('SelectMovieOption called with:', selectedAgeGroup, selectedGenre); let options = ""; - console.log('Age Group:', selectedAgeGroup); - console.log('Genre:', selectedGenre); if (selectedAgeGroup === "Child" && selectedGenre === "Action") { options = ` @@ -189,20 +179,15 @@ const SelectMovieOption = (selectedAgeGroup, selectedGenre) => { `; - console.log('inputWrapper:', inputWrapper); inputWrapper.style.display = 'flex'; inputWrapper.style.width = '100%'; inputWrapper.style.boxSizing = 'border-box'; inputWrapper.style.padding = '10px'; document.getElementById('movie-option').style.width = '400px'; - document.getElementById('movie-option').style.fontSize = '20px'; + document.getElementById('movie-option').style.fontSize = '16px'; inputWrapper.addEventListener('click', handleSelectMovieOption); - - // Log options for debugging - console.log('Options:', options); - } const handleSelectMovieOption = (event) => { @@ -217,58 +202,64 @@ const handleSelectMovieOption = (event) => { // Delay the display of the message from the bot setTimeout(() => { chat.scrollTop = chat.scrollHeight; - showMessage(`You selected ${selectedMovie}. A fine choice! That will be: $4. Would you like to rent this movie?`, 'bot'); + showMessage(`You selected ${selectedMovie}. Excellent choice! That will be: $4. Would you like to rent this movie?`, 'bot'); confirmation(selectedMovie) }, 1000); } } - -const confirmation = () => { - form.innerHTML = ` - - - ` - - // Style the form and add event listener - form.style.display = 'flex'; - form.style.justifyContent = 'center'; - form.style.alignItems = 'center'; - form.style.gap = '30px'; - - form.addEventListener('click', handleConfirmationClick); -}; - // Handle confirmation click -const handleConfirmationClick = (event) => { + +const handleConfirmationClick = (event, selectedMovie) => { event.preventDefault(); const button = event.target; - if (button.classList.contains('yes-btn')) { + if (button.classList.contains("yes-btn")) { const selectedConfirmation = button.textContent.trim(); - form.innerHTML = ""; - showMessage(`${selectedConfirmation}`, 'user'); + inputWrapper.innerHTML = ""; + showMessage(`${selectedConfirmation}`, "user"); setTimeout(() => { chat.scrollTop = chat.scrollHeight; - showMessage(`You clicked ${selectedConfirmation}. Grab your popcorn, ${selectedMovie} is on its way!`, 'bot'); + showMessage( + `Grab your popcorn, ${selectedMovie} is on the way!🍿 Thank you for using the movie chatbot.`, + "bot" + ); }, 1000); - } else if (button.classList.contains('no-btn')) { + } else { const selectedConfirmation = button.textContent.trim(); - form.innerHTML = ""; + inputWrapper.innerHTML = ""; setTimeout(() => { chat.scrollTop = chat.scrollHeight; - showMessage(`${selectedConfirmation}`, 'user'); - showMessage(`You clicked ${selectedConfirmation}, your order has been canceled. Have a great day!`, 'bot'); + showMessage(`${selectedConfirmation}`, "user"); + showMessage( + `Got it! Your order has been canceled. Have a great day!`, + "bot" + ); }, 1000); } }; +const confirmation = (selectedMovie) => { + inputWrapper.innerHTML = ` + + + `; + + inputWrapper.style.display = "flex"; + inputWrapper.style.justifyContent = "center"; + inputWrapper.style.alignItems = "center"; + inputWrapper.style.gap = "30px"; + + inputWrapper.addEventListener("click", (event) => + handleConfirmationClick(event, selectedMovie) + ); +}; setTimeout(greetUser, 1000) diff --git a/code/style.css b/code/style.css index 96d07374..6a11b476 100644 --- a/code/style.css +++ b/code/style.css @@ -13,10 +13,11 @@ body { h1 { font-weight: bold; - font-size: 28px; + font-size: 35px; line-height: 34px; color: #be131d; text-align: center; + padding: 10px; } h2 { @@ -52,7 +53,7 @@ input { main { margin: 0 auto; - width: 100%; + width: 90%; max-width: 700px; height: 600px; border-radius: 30px; @@ -149,4 +150,63 @@ button { button:hover { opacity: 0.9; transition: all 0.2s ease; +} + +/* Responsiveness */ +@media (max-width: 480px) { + h1 { + font-size: 25px; + } + + main { + padding: 10px; + height: 400px; + + } + + .bubble { + max-width: 80%; + /* Allow even more space for chat bubbles */ + } + + input { + padding: 10px; + font-size: 12px; + } + + button { + padding: 10px 16px; + font-size: 12px; + } + + .bot-msg img, + .user-msg img { + width: 40px; + height: 40px; + } + + label { + font-size: 14px; + margin-right: 10px; + } +} + +@media (min-width: 480px) and (max-width: 768px) { + h1 { + font-size: 30px; + } + + .bubble { + max-width: 60%; + } + + input { + padding: 12px; + font-size: 14px; + } + + button { + padding: 12px 18px; + font-size: 14px; + } } \ No newline at end of file From d17e473e5692f7ce36f5bcd49764fbfb23b381c0 Mon Sep 17 00:00:00 2001 From: iamfannyhenriques Date: Mon, 16 Sep 2024 00:09:52 +0200 Subject: [PATCH 11/11] updated readme --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 48043b4d..d3f824f7 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,8 @@ I used console.log extensively throughout the project to trace the flow of my co If I had more time: I would focus on cleaning up the structure of the code to make it shorter and more efficient. Right now, there is a lot of repeated code that I think could be simplified. For example, I believe there are opportunities to combine similar functions so that one function could handle multiple tasks instead of writing the same type of logic repeatedly. +Fixing the Final Error: I encountered a TypeError: Cannot read properties of null (reading 'value') error when the user clicks "Yes" or "No" at the end of the flow. I couldn't solve this issue in the given time, but with more time, I would focus on fixing this error, possibly by ensuring that the selected movie value is properly stored and accessible when the confirmation step is triggered. + ## View it live https://moviechatbot.netlify.app/