Technigo · HeleneWestrin · Sep 9, 2024 · Sep 9, 2024 · Sep 13, 2024 · Sep 13, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
-# Project Name
+# Harmoniqa – The soundtrack to your mood
 
-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 project was to create an interactive Chatbot that manipulates the DOM when the user replies by using functions, conditionals and event listeners.
 
 ## 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?
+For this project, I approached the problem by first understanding the structure and flow of the chatbot. I planned out the conversation steps and mapped out how the user would interact with the bot, starting with entering their name and progressing through mood and color choices to receive song suggestions.
+
+I have used functions, event listeners and condtionals statements in order to give a tailored, but dynamic experience to the user. I used the switch statements and also a JavaScript object to determine the suggested song names and their Spotify URL.
 
 ## 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://harmoniqa.netlify.app/](https://harmoniqa.netlify.app/)
diff --git a/code/assets/.DS_Store b/code/assets/.DS_Store
diff --git a/code/assets/bot-avatar.png b/code/assets/bot-avatar.png
diff --git a/code/assets/bot.png b/code/assets/bot.png
diff --git a/code/assets/favicon.png b/code/assets/favicon.png
diff --git a/code/assets/sterion-bold.ttf b/code/assets/sterion-bold.ttf
diff --git a/code/assets/sterion-bold.woff b/code/assets/sterion-bold.woff
diff --git a/code/assets/sterion-bold.woff2 b/code/assets/sterion-bold.woff2
diff --git a/code/assets/user-avatar.png b/code/assets/user-avatar.png
diff --git a/code/assets/user.png b/code/assets/user.png
diff --git a/code/favicon.ico b/code/favicon.ico
diff --git a/code/index.html b/code/index.html
@@ -1,25 +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>
+      rel="stylesheet"
+    />
+    <link rel="shortcut icon" href="favicon.ico" />
+    <link rel="icon" href="./assets/favicon.png" />
+    <title>Harmoniqa – the soundtrack to your mood</title>
   </head>
 
   <body>
-    <h1>Welcome to my chatbot!</h1>
+    <header>
+      <h1>Harmoniqa</h1>
+      <p>The soundtrack to your mood</p>
+    </header>
     <main>
-      <section class="chat" id="chat"></section>
-      <div class="input-wrapper" id="input-wrapper">
+      <section id="chat" class="chat"></section>
+      <div id="input-wrapper" class="input-wrapper">
         <form id="name-form">
-          <label for="name-input">Name</label>
-          <input id="name-input" type="text" />
-          <button class="send-btn" type="submit">
+          <input
+            id="name-input"
+            type="text"
+            aria-label="Type your response here"
+            placeholder="Type here..."
+          />
+          <button id="send-button" class="send-button" type="button">
             Send
           </button>
         </form>
@@ -28,5 +37,4 @@ <h1>Welcome to my chatbot!</h1>
 
     <script src="./script.js"></script>
   </body>
-
 </html>