Technigo · JoyceKuode · Sep 12, 2024 · Sep 13, 2024 · Sep 13, 2024 · Sep 13, 2024
diff --git a/README.md b/README.md
@@ -1,13 +1,17 @@
-# Project Name
+# Joyce's ActivityBot
 
-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 project uses JavaScript to create an interactive chatbot that prompts the user with a series of questions. Assuming the user is a child (or parent/guardian of a child) and the child is around 5 years old, the chatbot uses the information given by the user to help suggest an activity before signing off.
 
 ## 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?
+My approach to the problem was to first make sure I understood how all the parts of the code were interconnected. Once I could get the initial code to start and call the first function, I started to get a work flow going. However, I felt like my code was a bit convoluted and I was getting confused quite easily. One of the first challenges was to figure out how to get information from the user, and then pass that information as an argument into the next function call. With some help from some of the course videos and ChatGPT, I was able to work out some code that I think was as concise as I could figure out for this stage of my learning.
+
+I had an idea that I wanted to ask the user to choose their favorite color from a series of buttons, and then use the user's choice to trigger a particular color scheme for the buttons. This led to a small problem because the buttons would only change color for the next function, but then they would revert to the same color. As I was working out a solution for this, it gave me the idea to change the entire color scheme. This ended up being another challenge, but again I used a healthy dose of course video content and ChatGPT to find a way to make the color scheme idea work. I specified the elements I wanted to change for each color scheme in CSS and referenced that in a new function that would set a particular color scheme based on the user's choice. 
+
+The other challenge was to create all the activity options based on user input, collect that data into variables in the global scope so that they could be referenced in a function that would work through conditional statements and weigh all the variables, eventually pointing to a couple of activity options for the user to choose from. In the planning stages, I brainstormed on paper all the potential variables before settling on mood, weather, and amount of time as the variables I would use for my chatbot. Then I sketched a tree of possibilities for different moods leading to different combinations for indoor/outdoor and short/long activities.
+
+If I had more time, I would create more activity choices, and maybe use a loop to continuously prompt the user if they were not satisfied with the initial options. The chatbot could offer a few more choices, and if the user rejected those, more options could come up before finally the chatbot would exhaust all options. 
 
 ## 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://joyceschatbot.netlify.app/
diff --git a/code/assets/activity-bot.jpg b/code/assets/activity-bot.jpg
diff --git a/code/assets/activitybot-favicon.png b/code/assets/activitybot-favicon.png
diff --git a/code/assets/botbubble.png b/code/assets/botbubble.png
diff --git a/code/assets/pizzabot.jpg b/code/assets/pizzabot.jpg
diff --git a/code/assets/userbubble.png b/code/assets/userbubble.png
diff --git a/code/index.html b/code/index.html
@@ -1,32 +1,47 @@
 <!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" />
+  <link rel="icon" href="./assets/activitybot-favicon.png" type="image/png">
+  <title>ActivityBot</title>
+</head>
 
-  <body>
-    <h1>Welcome to my chatbot!</h1>
+<body>
+  <div class="container">
+
+    <!-- Container for both header and image -->
+    <section class="header-image-container">
+      <header>
+        <h1>ActivityBot</h1>
+        <h2>Find Your Next Playtime Activity!</h2>
+      </header>
+      <div class="image">
+        <img src="./assets/activity-bot.jpg" alt="A robot standing in a room full of toys">
+      </div>
+    </section>
+
+    <!-- Chatbox Section -->
     <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">
+          <!-- <label for="name-input">Name</label> -->
+          <input class="name-input" id="name-input" type="text" />
+          <button class="send-btn" id="send-button" type="submit">
             Send
           </button>
         </form>
       </div>
     </main>
 
-    <script src="./script.js"></script>
-  </body>
+  </div>
+  <script src="./script.js"></script>
+</body>
 
-</html>
+</html>