Technigo · ElinaEH · Sep 11, 2024 · Sep 11, 2024 · Sep 13, 2024 · Sep 15, 2024
diff --git a/README.md b/README.md
@@ -1,13 +1,9 @@
 # Project Name
+The assigment was to create a functional chatbot using Javascript, HTML and CSS. I've made a pizzeria called "Elina's daily surprise pizzeria".
 
-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 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've struggled alot this week. I've found it very hard to make sense out of the starter code and how to add the right code in general. I tried making buttons and select options but I could never make it work. Therefor I approached the different steps in another way than I think we were suppose to. I kept looking at the videos on disco but for me it was very hard to apply the content to this weeks assigment. Since I didn't figure out how to make buttons and select options I did a simple version of the chatbot. The customer can't pick the type of pizza, pasta or salad only the food type, hence the "Daily Surprise" solution. Tools I used were chatgbpt, stack overflow, the material on disco and google. 
 
 ## 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://sprightly-gecko-87af32.netlify.app/
diff --git a/code/index.html b/code/index.html
@@ -1,32 +1,34 @@
 <!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>Elina's Daily Surprise Pizzeria 👨‍🍳🍕</h1>
+  <h4>Here's how it works: We've got three amazing choices today but here's the twist - the
+    exact dish is a surprise! </h4>
+  <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>
 
-    <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,53 +1,84 @@
 // DOM selectors (variables that point to selected DOM elements) goes here 👇
-const chat = document.getElementById('chat')
+document.addEventListener("DOMContentLoaded", () => {
+  // The form element
+  const form = document.getElementById("name-form");
+  // The input where the name is typed
+  const nameInput = document.getElementById("name-input");
+  // The chat container where messages are shown
+  const chat = document.getElementById("chat");
+  let inputWrapper = document.getElementById("inputWrapper");
 
-// Functions goes here 👇
+  // Functions goes here 👇
+  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 = "";
 
-// 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') {
-    chat.innerHTML += `
+    // 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(() => showFoodOptions(name), 1000);
+  };
+
+  const showFoodOptions = (name) => {
+    if ((name === "Pizza") || (name === "pizza")) {
+      showMessage("You've ordered a Daily Surprise Pizza! It'll be ready for pick up in 15 minutes, pay upon arrival😋<br> Adult size = 150SEK Child size = 100SEK", "bot");
+    } else if ((name === "Pasta") || (name === "pasta")) {
+      showMessage("You've ordered a Daily Surprise Pasta! It'll be ready for pick up in 15 minutes, pay upon arrival😋<br> Adult size = 130SEK Child size = 80SEK", "bot");
+    } else if ((name === "Salad") || (name === "salad")) {
+      showMessage("You've ordered a Daily Surprise Salad! It'll be ready for pick up in 15 minutes, pay upon arrival😋<br>Adult size = 120SEK Child size = 70SEK", "bot");
+    } else {
+      showMessage(`Hello ${name}, what type of food would you like today?<br>Please write your option: Pizza, Pasta or Salad 🍽️`, "bot");
+    }
+  }
+
+  // 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") {
+      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 += `
+      // 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(`Welcome to the chat`);
+
+      chat.innerHTML += `
       <section class="bot-msg">
         <img src="assets/bot.png" alt="Bot" />
         <div class="bubble bot-bubble">
           <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
+  }
+
+  // A function to start the conversation
+  const greetUser = () => {
+    // Here we call the function showMessage, that we declared earlier with the argument:
+    showMessage("Hello there!<br>Welcome to Elina's Daily Surprise Pizzeria!<br>What's your name?", "bot")
   }
 
-  // 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
-}
-
-// 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)
+  // Eventlisteners goes here 
+  form.addEventListener("submit", handleNameInput);
+
+  // 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)
+});
diff --git a/code/style.css b/code/style.css
@@ -11,7 +11,7 @@ body {
 
 h1 {
   font-weight: bold;
-  font-size: 28px;
+  font-size: 30px;
   line-height: 34px;
   color: #fff;
   text-align: center;
@@ -26,6 +26,14 @@ h2 {
   margin-bottom: 36px;
 }
 
+h4 {
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 34px;
+  color: #fff;
+  text-align: center;
+}
+
 p {
   font-size: 18px;
   font-weight: 600;
@@ -51,6 +59,7 @@ input {
 main {
   margin: 0 auto;
   width: 100%;
+  /* row 55 and 56 makes it responsive */
   max-width: 700px;
   height: 600px;
   border-radius: 30px;
@@ -147,4 +156,38 @@ button {
 button:hover {
   opacity: 0.9;
   transition: all 0.2s ease;
+}
+
+/* Media Queries */
+/* Mobile */
+@media only screen and (min-width: 320px) and (max-width: 767px) {
+  h1 {
+    font-size: 20px;
+  }
+
+  h4 {
+    font-size: 14px;
+  }
+}
+
+/* Tablet  */
+@media only screen and (min-width: 768px) and (max-width: 1023px) {
+  h1 {
+    font-size: 24px;
+  }
+
+  h4 {
+    font-size: 18px;
+  }
+}
+
+/* Desktop  */
+@media only screen and (min-width: 1024px) and (max-width: 1600px) {
+  h1 {
+    font-size: 30px;
+  }
+
+  h4 {
+    font-size: 24px;
+  }
 }