Technigo · Sherrydev11 · Oct 7, 2024 · Oct 7, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +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.
+# Project Chat-bot
+My assignment was to create a chat-bot that interacts with the user. The bot asks for the users name and engages in conversation were the user chooses a treat and has the opportunity to choose a beverage.
 
 ## The problem
+During the development of the chatbot, I encountered several challenges. One of the biggest issues was handling the users input correctly and making sure that the chatbot responded when I wanted it to during each stage of the converstation. I also struggled with keeping track of the different stages of the conversation, such as when the bot asks for the users name, choice of treat, and then beverage. I quickly noticed the importance of structuring the code in a clear way to make sure that everything works correctly and so that I can easily make changes that are required. It was also a challange to manage the local and the global variables to remember the users choice. Next time I will organize my code already from start and make sure to write the code as clean as possible a and use comments and choose suitable variable names and function names. 
 
-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?
 
 ## 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://sherrystreatbot.netlify.app/
diff --git a/code/index.html b/code/index.html
@@ -1,32 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
 
-  <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>
+<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>
 
-  <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>
-    </main>
+<body>
+  <h1>Welcome to Sherry's Treat-Bot!</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 id="send-btn" type="submit">
+          Send
+        </button>
+      </form>
+    </div>
+  </main>
 
-    <script src="./script.js"></script>
-  </body>
+  <script src="./script.js"></script>
+</body>
 
-</html>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -1,12 +1,18 @@
-// DOM selectors (variables that point to selected DOM elements) goes here 👇
-const chat = document.getElementById('chat')
+// DOM selectors 
+const chat = document.getElementById("chat");
+const nameInput = document.getElementById("name-input"); // Input field for name 
+const sendButton = document.getElementById("send-btn"); // This is the send button
+let userName = "";
+let askingForTreat = false; // To keep track if we are asking user for treat
+let askingForBeverage = false; // To keep track if we are asking user for beverage
+let userChoosingBeverage = false; // To keep track of the beverage choice
 
-// Functions goes here 👇
+// Declare global variables - to store the treat and beverage 
+let treat = ""; // This is the global variable to store choice of treat 
+let beverage = ""; // This is the global variable to store choice of beverage
 
-// A function that will add a chat bubble in the correct place based on who the sender is
+// This is the function to display messages
 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') {
     chat.innerHTML += `
       <section class="user-msg">
@@ -15,9 +21,7 @@ const showMessage = (message, sender) => {
         </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">
@@ -26,28 +30,109 @@ const showMessage = (message, sender) => {
           <p>${message}</p>
         </div>
       </section>
-    `
+    `;
   }
 
-  // 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
-}
+  // Scroll to the latest message
+  chat.scrollTop = chat.scrollHeight;
+};
 
-// A function to start the conversation
+// A function to start the conversation - Greet user 
 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
-}
-
-// Eventlisteners goes here 👇
-
-// Here we invoke the first function to get the chatbot to ask the first question when
-// the website is loaded. Normally we invoke functions like this: greeting()
-// To add a little delay to it, we can wrap it in a setTimeout (a built in JavaScript function):
-// and pass along two arguments:
-// 1.) the function we want to delay, and 2.) the delay in milliseconds 
-// This means the greeting function will be called one second after the website is loaded.
-setTimeout(greetUser, 1000)
+  showMessage("Hello there! Welcome to Sherry's Treat-bot! <br><br> What is your name?", 'bot');
+};
+
+// Process the user's name input
+const processNameInput = (input) => {
+  if (input) {
+    userName = input; // Save the user's name
+    showMessage(userName, "user"); // Show the user's message
+    nameInput.value = ""; // Clear the input field
+
+    // Ask the user what treat they want after greeting
+    setTimeout(() => {
+      showMessage(`Hi ${userName}! What would you like to order as your treat? <br><br>1. Victoria Sponge Cake <br><br>2. Apple Crumble with Sherry's homemade custard <br><br>3. Sticky Toffee Pudding <br><br>4. Eton's Mess`, "bot");
+      askingForTreat = true; // Now the bot is asking for choice of treat
+    }, 1000); // Delay of 1 second
+  }
+};
+
+// Handle the choice of treat
+const handleTreatChoice = (choice) => {
+  if (choice === "1") {
+    treat = "Victoria Sponge Cake";
+  } else if (choice === "2") {
+    treat = "Apple Crumble with Sherry's homemade Custard";
+  } else if (choice === "3") {
+    treat = "Sticky Toffee Pudding";
+  } else if (choice === "4") {
+    treat = "Eton's Mess";
+  } else {
+    showMessage("Sorry, I didn't understand your choice. Please choose 1, 2, 3, or 4.", 'bot');
+    return;
+  }
+
+  // If the user chooses a valid option, ask for a beverage
+  setTimeout(() => {
+    showMessage(`You've chosen the delicious ${treat}. <br><br> ${userName}, would you like to order a hot beverage to go with your treat? <br><br>1. Yes <br>2. No`, 'bot');
+    askingForTreat = false;
+    askingForBeverage = true;
+  }, 1000); // Delay of 1 second
+};
+
+// Handle choice of beverage 
+const handleBeverageChoice = (beverageChoice) => {
+  if (beverageChoice === "1") {
+    showMessage("Great! What would you like to drink? <br><br>1. Earl Grey Tea <br>2. Latte <br>3. Hot Chocolate <br>4. Coffee", 'bot');
+    askingForBeverage = false;
+    userChoosingBeverage = true;
+  } else if (beverageChoice === "2") {
+    showMessage("No problem! <br><br>Your treat is being prepared and will be ready for you in 15 minutes. Enjoy!", 'bot');
+    askingForBeverage = false;
+  } else {
+    showMessage("Sorry, I didn't understand that. Please choose 1 or 2.", 'bot');
+  }
+};
+
+// Handle specific choice of beverage 
+const handleSpecificBeverageChoice = (choice) => {
+  if (choice === "1") {
+    beverage = "Earl Grey Tea";
+  } else if (choice === "2") {
+    beverage = "Latte";
+  } else if (choice === "3") {
+    beverage = "Hot Chocolate";
+  } else if (choice === "4") {
+    beverage = "Coffee";
+  } else {
+    showMessage("Sorry, I didn't understand that. Please choose 1, 2, 3, or 4.", 'bot');
+    return;
+  }
+
+  // Show summary of what the user has ordered
+  showMessage(`You've chosen: ${treat} and ${beverage}! <br><br> Your order is being prepared and will be ready for you in 15 minutes.`, 'bot');
+  userChoosingBeverage = false;
+};
+
+// What happens when the user inputs an answer or choice
+const handleUserInput = (event) => {
+  event.preventDefault();
+  const input = nameInput.value; // Get input from the user
+  nameInput.value = ""; // Clear the input field
+
+  if (!askingForTreat && !askingForBeverage && !userChoosingBeverage) {
+    processNameInput(input);
+  } else if (askingForTreat) {
+    handleTreatChoice(input);
+  } else if (askingForBeverage) {
+    handleBeverageChoice(input);
+  } else if (userChoosingBeverage) {
+    handleSpecificBeverageChoice(input);
+  }
+};
+
+// Attached event listener to the send button
+sendButton.addEventListener("click", handleUserInput);
+
+// This means the greeting function will be called one second after the website is loaded
+setTimeout(greetUser, 1000);