diff --git a/README.md b/README.md index 60f55e53..0add6fd1 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,12 @@ -# Project Name +# Boredom Buddy Bot -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. +This chatbot engages users in a fun, interactive conversation by asking questions about their preferences, habits, and personality, with a feedback option at the end. ## 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? +The challenge was to create an engaging chatbot using HTML, CSS, and JavaScript that interacts naturally with users through buttons. The project involved building a conversation flow that responded dynamically to user inputs. +The hardest I struggled with was firstly the setup of the design, I already had an idea what I wanted to do for the bot but the input and button took way more out of me than I anticipated. Secondly was hard to actually get the functions running, eventhough everything was written out, I was firstly confused when to save the variable, in which function to replace the newly built function etc. Overall challenging but doable! ## 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. +Have a go with Boredom Buddy Bot https://boredombot.netlify.app/ diff --git a/code/assets/bot.png b/code/assets/bot.png index 2c894b15..b36f3def 100644 Binary files a/code/assets/bot.png and b/code/assets/bot.png differ diff --git a/code/assets/buddy.wav b/code/assets/buddy.wav new file mode 100644 index 00000000..88a18e15 Binary files /dev/null and b/code/assets/buddy.wav differ diff --git a/code/assets/chatbot.png b/code/assets/chatbot.png new file mode 100644 index 00000000..8eb1ea4a Binary files /dev/null and b/code/assets/chatbot.png differ diff --git a/code/assets/response.wav b/code/assets/response.wav new file mode 100644 index 00000000..4bed79ac Binary files /dev/null and b/code/assets/response.wav differ diff --git a/code/assets/user.png b/code/assets/user.png index 6d95f08f..e67346de 100644 Binary files a/code/assets/user.png and b/code/assets/user.png differ diff --git a/code/index.html b/code/index.html index 316eb187..67058e3b 100644 --- a/code/index.html +++ b/code/index.html @@ -1,32 +1,36 @@ - + - - Chatbot - + + Boredom Buddy Bot + - -

Welcome to my chatbot!

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

WELCOME TO YOUR BOREDOM BUDDY BOT!

+

I'm here to help you find a company on this boring day!

+
+ Fitness Buddy Bot +
+ +
+
+
+
+ + +
+
+
- + diff --git a/code/script.js b/code/script.js index 125d6904..1a68764d 100644 --- a/code/script.js +++ b/code/script.js @@ -1,13 +1,26 @@ -// DOM selectors (variables that point to selected DOM elements) goes here 👇 -const chat = document.getElementById('chat') +const buddyAudio = new Audio(); +buddyAudio.src = "./assets/buddy.wav"; -// Functions goes here 👇 +const userAudio = new Audio(); +userAudio.src = "./assets/response.wav"; + +// Variables that point to the selected DOM elements +const chat = document.getElementById('chat'); +const displayMain = document.querySelector("main"); +const nameForm = document.getElementById('name-form'); +const nameInput = document.getElementById('name-input'); +const inputWrapper = document.getElementById('input-wrapper'); + +let username = ""; // Variable to store the user's name +let chosenPreference = ""; // variable to store the user's morning preference // 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 +const showMessage = (message, sender, delay = 0) => { if (sender === 'user') { + // Play user sound + userAudio.currentTime = 0; // Reset audio to start from the beginning + userAudio.play(); + chat.innerHTML += `
@@ -15,39 +28,177 @@ 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') { - chat.innerHTML += ` -
- Bot -
-

${message}

-
-
- ` - } + `; + chat.scrollTop = chat.scrollHeight; // Scroll to the latest message + } + else if (sender === 'bot') { + // Delay bot message display and sound + setTimeout(() => { + // Reset bot audio and play + buddyAudio.currentTime = 0; // Reset audio to start from the beginning + buddyAudio.play(); - // 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 + // Show bot message after sound plays + chat.innerHTML += ` +
+ Bot +
+

${message}

+
+
+ `; + chat.scrollTop = chat.scrollHeight; // Scroll to the latest message + }, delay); // Delay in milliseconds + } } // A function to start the conversation const greetUser = () => { - // Here we call the function showMessage, that we declared earlier with the argument: - // "Hello there, what's your name?" for message, and the argument "bot" for sender - showMessage("Hello there, what's your name?", 'bot') - // Just to check it out, change 'bot' to 'user' here 👆 and see what happens + showMessage("Hello dear, my name is Boredom Buddy Bot, what's your name?", 'bot', 1000); +} + +// Function to handle the name submission +const saveUsername = (event) => { + event.preventDefault(); // Prevents form submission from refreshing the page + username = nameInput.value; + showMessage(`Hi, I'm ${username}!`, 'user'); + nameInput.value = ''; // Clear the input field after submission + setTimeout(() => showMessage(`${username} is an amazing name!`, 'bot', 1000), 1000); + setTimeout(() => askPersonality(), 2000); +} + +// Ask the second question now +const askPersonality = () => { + showMessage(`How would you describe yourself, ${username}?`, 'bot', 1000); + setTimeout(() => personalityTraits(), 2000); +} + +// Function for the user to choose the personality trait +const personalityTraits = () => { + inputWrapper.innerHTML = ` + + + `; + + document.getElementById('intro').addEventListener('click', () => personalityChoice('Introvert')); + document.getElementById('extro').addEventListener('click', () => personalityChoice('Extrovert')); +} + +// Add the personality choice and display the appropriate message +const personalityChoice = (chosenPersonality) => { + showMessage(chosenPersonality, 'user'); + showMessage('Awesome, If I’m honest, me too sometimes, but', 'bot', 1500); + inputWrapper.innerHTML = ''; // Clear the buttons after the user makes a choice + setTimeout(() => askMorning(), 2000); // Ensure the next question is asked after a brief delay +} + +// Ask the third question now +const askMorning = () => { + showMessage(`How do you usually prefer to start your mornings?`, 'bot', 1000); + setTimeout(() => morningPreferences(), 2000); // Give time before showing the preferences +} + +// Function for the user to choose the morning preference +const morningPreferences = () => { + inputWrapper.innerHTML = ` + + + + `; + + document.getElementById('coffee').addEventListener('click', () => morningPreference('Drinking Coffee/Tea')); + document.getElementById('exercise').addEventListener('click', () => morningPreference('Exercising')); + document.getElementById('phone').addEventListener('click', () => morningPreference('Checking Phone')); +} + +// Handle the user's morning preference and display it +const morningPreference = (preference) => { + chosenPreference = preference; // Save the chosen preference + showMessage(preference, 'user'); + setTimeout(() => showMessage(`Interesting! I’m not much of a ${preference} type of bot myself, but okay`, 'bot', 1500), 1000); + inputWrapper.innerHTML = ''; // Clear the buttons after the user makes a choice + setTimeout(() => askStress(), 2000); // Ensure the next question is asked after a brief delay +} + +// Ask the fourth question now +const askStress = () => { + showMessage(`If I may ask, how do you usually handle stress?`, 'bot', 1000); + setTimeout(() => stressHandleOptions(), 2000); // Give time before showing the preferences +} + +// Function for the user to choose how they handle stress +const stressHandleOptions = () => { + inputWrapper.innerHTML = ` + + + + `; + + document.getElementById('talk').addEventListener('click', () => stressHandle('Talking')); + document.getElementById('active').addEventListener('click', () => stressHandle('Being creative')); + document.getElementById('alone').addEventListener('click', () => stressHandle('Being alone')); +} + +// Save the user's stress management and display it +const stressHandle = (handle) => { + showMessage(handle, 'user'); + setTimeout(() => showMessage(`That's cute from you to share! I think I prefer ${handle} too.`, 'bot', 1500), 1000); + inputWrapper.innerHTML = ''; // Clear the buttons after the user makes a choice + setTimeout(() => askDream(), 2000); // Ensure the next question is asked after a brief delay +} + +// Ask the fifth question now +const askDream = () => { + showMessage(`Now for the final question, if you could be any supernatural creature in the world, who would it be?`, 'bot', 1000); + setTimeout(() => dreamSuperpowers(), 2000); // Give time before showing the preferences +} + +// Function for the user to choose their dream supernatural power +const dreamSuperpowers = () => { + inputWrapper.innerHTML = ` + + + + `; + + document.getElementById('superman').addEventListener('click', () => dreamSuper('Superman')); + document.getElementById('batman').addEventListener('click', () => dreamSuper('Batman')); + document.getElementById('spiderman').addEventListener('click', () => dreamSuper('Spiderman')); +} + +// Add the final dream selection and display the appropriate message +const dreamSuper = (dream) => { + showMessage(dream, 'user'); + showMessage(`Wow, me too!`, 'bot', 1500); + setTimeout(() => feedbackRequest(), 1000); +} + +// Ask for feedback +const feedbackRequest = () => { + showMessage(`Thank you ${username} for opening up to me, it means a lot! How did our chat make you feel?`, 'bot', 1000); + inputWrapper.innerHTML = ` + + + `; + + document.getElementById('lovely').addEventListener('click', () => sendFeedback('lovely')); + document.getElementById('boring').addEventListener('click', () => sendFeedback('boring')); +} + +// Save feedback based on the user's response +const sendFeedback = (feedback) => { + if (feedback === 'lovely') { + showMessage('Thank you lovely ❤️', 'user'); + showMessage('❤️ Sending you all the love! Have a wonderful day! ❤️', 'bot', 1500); + } else if (feedback === 'boring') { + showMessage('It was a boring chatbot 💔', 'user'); + showMessage('💔 I’m sorry you feel that way. I’ll try to be more fun next time! 💔', 'bot', 1500); + } + inputWrapper.innerHTML = ''; // Clear the buttons } -// Eventlisteners goes here 👇 +// Event listener to handle form submission +nameForm.addEventListener("submit", saveUsername); -// 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) +// Start the conversation when the page loads +setTimeout(greetUser, 1000); diff --git a/code/style.css b/code/style.css index a275402f..ab5a1a41 100644 --- a/code/style.css +++ b/code/style.css @@ -1,150 +1,195 @@ +/* Global Styles */ * { box-sizing: border-box; + margin: 0; + padding: 0; } body { - margin: 0; - padding: 0; font-family: 'Montserrat', sans-serif; - background: #0026ff; + background-color: #1e1e1e; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; } -h1 { - font-weight: bold; - font-size: 28px; - line-height: 34px; - color: #fff; - text-align: center; +.layout { + display: flex; + width: 100%; + max-width: 1200px; + height: 90vh; + justify-content: space-between; + align-items: center; } -h2 { - font-weight: bold; - font-size: 24px; - line-height: 34px; - color: #fff; +.left-side { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; text-align: center; - margin-bottom: 36px; +} + +header { + color: #ffffff; +} + +h1 { + font-weight: 900; + font-size: 36px; + margin-bottom: 10px; } p { + font-weight: 400; font-size: 18px; - font-weight: 600; - line-height: 28px; - margin: 0; + margin-bottom: 20px; } -input { - box-sizing: border-box; - border: none; - border-radius: 4px 0 0 4px; - background: #e5e9ff; - color: #0026ff; - padding: 16px; - font-size: 16px; - font-family: 'Montserrat'; - font-weight: 600; - line-height: 26px; - flex: 1; - width: 100%; +.bot-image { + max-width: 80%; + height: auto; } -main { - margin: 0 auto; - width: 100%; - max-width: 700px; - height: 600px; - border-radius: 30px; - background: #fff; - padding: 20px 24px; - padding-top: 0; - box-sizing: border-box; +.right-side { + flex: 1; display: flex; flex-direction: column; + justify-content: space-between; + background-color: #333; + border-radius: 15px; + height: 100%; + padding: 20px; + max-width: 600px; } .chat { - flex: 1; + flex-grow: 1; + overflow-y: scroll; + padding: 10px; + background-color: #2c2c2c; + border-radius: 15px; display: flex; - justify-content: flex-start; - overflow: scroll; flex-direction: column; - padding-bottom: 16px; } +/* Bot Message */ .bot-msg { display: flex; - margin: 16px 8px 0 0; - flex-shrink: 0; + align-items: flex-start; + margin-bottom: 10px; +} + +.bot-msg img { + width: 50px; + height: 50px; +} + +.bot-msg .bubble { + background-color: #444; + color: white; + padding: 10px; + border-radius: 10px; + margin-left: 10px; + max-width: 60%; + font-weight: 600; } +/* User Message */ .user-msg { display: flex; - justify-content: flex-end; - margin: 16px 0 0 8px; - flex-shrink: 0; + justify-content: flex-end; /* Moves user messages to the right */ + align-items: flex-start; + margin-bottom: 10px; } -.bot-msg img, .user-msg img { - width: 60px; - height: 60px; -} - -.bubble { - background: #e5e9ff; + width: 50px; + height: 50px; + order: 1; /* Ensures the image comes after the message on the right */ + margin-left: 10px; +} + +.user-msg .bubble { + background-color: #85c8ff; + color: black; + padding: 10px; + border-radius: 10px; + margin-right: 10px; /* Adds space between message and right edge */ + max-width: 60%; font-weight: 600; - font-size: 16px; - line-height: 26px; - padding: 16px 24px; - color: #0026ff; - max-width: 40%; } -.bot-bubble { - border-radius: 0px 26px 26px 26px; - margin-left: 8px; +form { + display: flex; + width: 100%; } -.user-bubble { - border-radius: 26px 0 26px 26px; - margin-right: 8px; +input { + padding: 15px; + flex-grow: 1; + border-radius: 10px; + border: none; + outline: none; } +/* Add this CSS for the inputWrapper and buttons */ + .input-wrapper { display: flex; - justify-content: center; + justify-content: center; /* Center the buttons horizontally */ + gap: 10px; /* Add space between the buttons */ + margin-top: 10px; /* Space between message bubbles and buttons */ } -.input-wrapper form { - width: 100%; - display: flex; - align-items: center; +.input-wrapper button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + background-color: #1e95c8; + border: 2px solid #ccc; + border-radius: 5px; } -label { - font-size: 16px; - font-family: 'Montserrat'; - font-weight: 500; - color: #0026ff; - margin-right: 20px; +.input-wrapper button:hover { + background-color: #3e6ab7; /* Slight hover effect */ } -button { - background-color: #0026ff; - color: white; - border: none; - border-radius: 4px; - padding: 16px 20px; - margin-right: 4px; - font-size: 16px; - line-height: 26px; - font-family: 'Montserrat'; - font-weight: 500; - cursor: pointer; - transition: all 0.3s ease; +/* Media Query for devices with width under 550px */ +@media (max-width: 550px) { + .layout { + flex-direction: column; + height: auto; + justify-content: flex-start; + } + + .left-side { + display: none; + } + + .right-side { + width: 100%; + max-width: 100%; + margin-top: 20px; + } + + .chat { + height: 70vh; + margin-top: 0; + z-index: 1; + } + + .input-wrapper { + flex-direction: column; + gap: 5px; + } + + .input-wrapper button { + width: 100%; + padding: 12px 10px; + font-size: 14px; + } } -button:hover { - opacity: 0.9; - transition: all 0.2s ease; -} \ No newline at end of file