Technigo · BeckieMorton · Sep 5, 2023 · Sep 7, 2023 · Sep 7, 2023 · Sep 7, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,21 @@
 # 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.
+A digital version of the classic board game "Guess Who" using JavaScript, HTML, and CSS. Applying concepts like DOM manipulation, event handling, function definitions, conditional statements, delayed execution, variable assignment, and object and array manipulation.
 
 ## 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?
+<ins>Describe how you approached to problem</ins>: This project was fun! I enjoyed practicing my JAvaScript skills and it helped me improve my knowledge of syntax and conditional statements. I was able to push myself with some stretch goals, adding more functionality, including a timer, more question options, and game counter.
+
+<ins>How did you plan?</ins>: I created a flow diagram to help tract the user experience and used many console.logs to keep tract of the answer.
+
+<ins>What technologies did you use?</ins>: HTML, CSS, JavaScript
+
+<ins>If you had more time, what would be next?</ins>: Make the design cleaner!
 
 ## 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://wk3-guesswho-c638bb.netlify.app/
+
+## Screenshots
+
+![Screenshot of front page](/code/images/screenshot1.png?raw=true "Screenshot of front page")
diff --git a/code/images/screenshot1.png b/code/images/screenshot1.png
diff --git a/code/index.html b/code/index.html
@@ -1,64 +1,84 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Name</title>
-    <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"
-    />
-  </head>
-  <body>
-    <aside class="question-section">
-      <button type="button" id="restart" class="outlined-button">RESTART</button>
 
-      <img
-        class="guess-who-icon"
-        src="images/guess-who-bubble.png"
-        alt="Guess Who"
-      />
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Guess Who?</title>
+  <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" />
+</head>
 
-      <h1>Does the person have</h1>
+<body>
+  <aside class="question-section" id="questionSection">
+    <button type="button" id="restart" class="outlined-button">RESTART</button>
 
-      <select title="questions" id="questions">
-        <optgroup label="hair">
-          <option value="brown">brown hair</option>
-          <option value="yellow">yellow hair</option>
-          <!-- Add the rest of hair colors as options  -->
-        </optgroup>
-        <optgroup label="eyes">
-          <option value="hidden">hidden eyes</option>
-          <!-- Add the rest of eye colors as options  -->
-        </optgroup>
-        <optgroup label="accessories">
-          <option value="glasses">glasses</option>
-          <!-- Add the other accessory option here. (hat)  -->
-        </optgroup>
-        <optgroup label="other">
-          <option value="smoker">a smoking habit</option>
-        </optgroup>
-      </select>
+    <img class="guess-who-icon" src="images/guess-who-bubble.png" alt="Guess Who" />
+    <h1>Does the person have</h1>
 
-      <button id="filter" class="filled-button">FIND OUT</button>
-    </aside>
+    <select title="questions" id="questions">
+      <option selected disabled>Choose here....</option>
+      <optgroup label="hair">
+        <option value="brown">brown hair</option>
+        <option value="black">black hair</option>
+        <option value="yellow">yellow hair</option>
+        <option value="hidden">hidden hair</option>
+        <option value="grey">grey hair</option>
+        <option value="orange">orange hair</option>
+        <option value="purple">purple hair</option>
+        <option value="white">white hair</option>
+        <!-- Added the rest of hair colors (brown, blue, green) -->
+      </optgroup>
+      <optgroup label="eyes">
+        <option value="hidden">hidden eyes</option>
+        <option value="brown">brown eyes</option>
+        <option value="blue">blue eyes</option>
+        <option value="green">green eyes</option>
+        <!-- Added the rest of eye colors (brown, blue, green) -->
+      </optgroup>
+      <optgroup label="accessories">
+        <option value="glasses">glasses</option>
+        <option value="hat">a hat or headwear</option>
+        <!-- Added the a hat option -->
+      </optgroup>
+      <optgroup label="nationality">
+        <option value="british">British</option>
+        <option value="icelandic">Icelandic</option>
+        <option value="australian">Australian</option>
+        <option value="swiss">Swiss</option>
+        <!-- Added the nationality label with 4 options -->
+      </optgroup>
+      <optgroup label="other">
+        <option value="smoker">a smoking habit</option>
+      </optgroup>
+    </select>
 
-    <section class="board-wrapper">
-      <main class="game-board" id="board"></main>
-    </section>
+    <button id="filter" class="filled-button">FIND OUT</button>
+    <!--- Added Questions asked counter for game page -->
+    <p id="questionsAsked"></p>
+    <!-- Added a game timer -->
+    <div class="game-timer">
+      <label id="minutes">00</label>
+      <label id="colon">:</label>
+      <label id="seconds">00</label>
+    </div>
+  </aside>
 
-    <section id="winOrLose" class="win-or-lose-wrapper">
-      <div class="win-or-lose">
-        <img
-          class="guess-who-icon"
-          src="images/guess-who-bubble.png"
-          alt="Guess Who"
-        />
-        <h1 id="winOrLoseText"></h1>
-        <button type="button" id="playAgain" class="filled-button">PLAY AGAIN</button>
-      </div>
-    </section>
-    <script src="script.js"></script>
-  </body>
-</html>
+  <section class="board-wrapper">
+    <main class="game-board" id="board"></main>
+  </section>
+
+  <section id="winOrLose" class="win-or-lose-wrapper">
+    <img class="guess-who-icon" src="images/guess-who-bubble.png" alt="Guess Who" />
+    <h1 id="winOrLoseText"></h1>
+    <p id="winOrLoseTexth2"></p>
+    <!--- Added Questions asked counter for win or lose page -->
+    <p id="worLQuestionsAsked"></p>
+    <button type="button" id="playAgain" class="filled-button">PLAY AGAIN</button>
+  </section>
+  <script src="script.js"></script>
+</body>
+
+</html>