Technigo · jacquelinekellyhunt · Sep 11, 2024 · Sep 11, 2024 · Sep 11, 2024 · Sep 11, 2024
diff --git 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
diff --git a/code/assets/buddy.wav b/code/assets/buddy.wav
diff --git a/code/assets/chatbot.png b/code/assets/chatbot.png
diff --git a/code/assets/response.wav b/code/assets/response.wav
diff --git a/code/assets/user.png b/code/assets/user.png
diff --git a/code/index.html b/code/index.html
@@ -1,32 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./style.css" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      rel="stylesheet" />
-    <title>Chatbot</title>
-  </head>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;900&display=swap" rel="stylesheet" />
+    <title>Boredom Buddy Bot</title>
+</head>
 
-  <body>
-    <h1>Welcome to my chatbot!</h1>
-    <main>
-      <section class="chat" id="chat"></section>
-      <div class="input-wrapper" id="input-wrapper">
-        <form id="name-form">
-          <label for="name-input">Name</label>
-          <input id="name-input" type="text" />
-          <button class="send-btn" type="submit">
-            Send
-          </button>
-        </form>
-      </div>
+<body>
+    <main class="layout">
+        <div class="left-side"> <!-- Added to sides to the website to make it easier to style it in the CSS--> 
+            <header>
+                <h1>WELCOME TO YOUR BOREDOM BUDDY BOT!</h1>
+                <p>I'm here to help you find a company on this boring day!</p>
+            </header>
+            <img src="assets/chatbot.png" alt="Fitness Buddy Bot" class="bot-image" />
+        </div>
+
+        <div class="right-side"> <!-- Added to sides to the website to make it easier to style it in the CSS--> 
+            <section class="chat" id="chat"></section>
+            <div class="input-wrapper" id="input-wrapper">
+                <form id="name-form">
+                    <input id="name-input" type="text"/>
+                    <button class="send-btn" type="submit">Send</button>
+                </form>
+            </div>
+        </div>
     </main>
 
     <script src="./script.js"></script>
-  </body>
+</body>
 
 </html>
diff --git a/code/script.js b/code/script.js
@@ -1,53 +1,204 @@
-// 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 += `
       <section class="user-msg">
         <div class="bubble user-bubble">
           <p>${message}</p>
         </div>
         <img src="assets/user.png" alt="User" />  
       </section>
-    `
-    // 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 += `
-      <section class="bot-msg">
-        <img src="assets/bot.png" alt="Bot" />
-        <div class="bubble bot-bubble">
-          <p>${message}</p>
-        </div>
-      </section>
-    `
-  }
+    `;
+    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 += `
+        <section class="bot-msg">
+          <img src="assets/bot.png" alt="Bot" />
+          <div class="bubble bot-bubble">
+            <p>${message}</p>
+          </div>
+        </section>
+      `;
+      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 = `
+      <button id="intro">Introvert</button>
+      <button id="extro">Extrovert</button>
+    `;
+
+  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 = `
+      <button id="coffee">☕ Coffee/Tea</button>
+      <button id="exercise">🧘 Exercise/Meditate</button>
+      <button id="phone">📱 Check Phone</button>
+    `;
+
+  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 = `
+      <button id="talk">💬 Talk to Someone</button>
+      <button id="active">🎨 Be Active/Creative</button>
+      <button id="alone">🙇 Be Alone</button>
+    `;
+
+  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 = `
+      <button id="superman">🦸 Superman</button>
+      <button id="batman">🦇 Batman</button>
+      <button id="spiderman">🕷️ Spiderman</button>
+    `;
+
+  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 = `
+    <button id="lovely">Thank you lovely</button>
+    <button id="boring">It was a boring chatbot</button>
+  `;
+
+  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);