Technigo · andrkavr · Sep 6, 2023 · Sep 6, 2023 · Sep 6, 2023 · Sep 6, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,16 @@
-# Project Name
+# Project Guess Who
 
-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 game where a player tries to figure who the secret character is by using descriptive questions.
 
 ## 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?
 
+Straight forward approach. I read and followed the instructions to start and then used StackOverflow and ChatGPT when needed.
+If I had had more time, I probably would have looked at trying to follow DRY more as there are a few cases of excessive repetition of code.
+I would also have spent more time on configuring the CSS to something more "me".
+I would also have looked at how to implement sounds when a user's guess on features is right or wrong. Currently it plays after the alert informing the player if they are right or wrong and that doesn't fit so I've commented it out.
+
 ## 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://roaring-moonbeam-guess-who.netlify.app/
diff --git a/code/index.html b/code/index.html
@@ -9,39 +9,89 @@
       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"
     />
+    <audio id="soundFail" src="./sounds/fail-144746.mp3"></audio>
+    <audio
+      id="soundCorrect"
+      src="./sounds/announcement-sound-4-21464.mp3"
+    ></audio>
+    <audio
+      id="soundLose"
+      src="./sounds/fail-jingle-stereo-mix-88784.mp3"
+    ></audio>
+    <audio
+      id="soundWin"
+      src="./sounds/success-fanfare-trumpets-6185.mp3"
+    ></audio>
   </head>
   <body>
     <aside class="question-section">
-      <button type="button" id="restart" class="outlined-button">RESTART</button>
+      <button type="button" id="restart" class="outlined-button">
+        RESTART
+      </button>
 
       <img
         class="guess-who-icon"
         src="images/guess-who-bubble.png"
         alt="Guess Who"
       />
-
+      <h1 id="playerName"></h1>
       <h1>Does the person have</h1>
 
       <select title="questions" id="questions">
+        <option value="" default>Please choose an option:</option>
         <optgroup label="hair">
           <option value="brown">brown hair</option>
           <option value="yellow">yellow hair</option>
+          <option value="grey">grey hair</option>
+          <option value="purple">purple hair</option>
+          <option value="white">white hair</option>
+          <option value="black">black hair</option>
+          <option value="orange">orange hair</option>
+          <option value="hidden">hidden hair</option>
           <!-- Add the rest of hair colors as options  -->
         </optgroup>
         <optgroup label="eyes">
           <option value="hidden">hidden eyes</option>
+          <option value="blue">blue eyes</option>
+          <option value="green">green eyes</option>
+          <option value="brown">brown eyes</option>
           <!-- Add the rest of eye colors as options  -->
         </optgroup>
         <optgroup label="accessories">
           <option value="glasses">glasses</option>
+          <option value="hat">a hat</option>
           <!-- Add the other accessory option here. (hat)  -->
         </optgroup>
         <optgroup label="other">
           <option value="smoker">a smoking habit</option>
+          <option value="beard">a beard</option>
+          <option value="parrot">a parrot</option>
         </optgroup>
       </select>
 
       <button id="filter" class="filled-button">FIND OUT</button>
+      <div class="scoreboard">
+        <div class="time-and-guess">
+          <div id="totalGuesses">
+            <h2>Guesses</h2>
+            <p id="guess">0</p>
+          </div>
+          <div id="elapsedTime">
+            <h2>Time elapsed:</h2>
+            <p id="timer">0</p>
+          </div>
+        </div>
+        <div class="win-or-lose-stats">
+          <div id="totalWins">
+            <h2>Wins</h2>
+            <p id="win">0</p>
+          </div>
+          <div id="totalLosses">
+            <h2>Losses</h2>
+            <p id="lose">0</p>
+          </div>
+        </div>
+      </div>
     </aside>
 
     <section class="board-wrapper">
@@ -56,7 +106,14 @@ <h1>Does the person have</h1>
           alt="Guess Who"
         />
         <h1 id="winOrLoseText"></h1>
-        <button type="button" id="playAgain" class="filled-button">PLAY AGAIN</button>
+        <img
+          src="https://gifdb.com/images/high/nathan-fillion-wow-nicely-done-okjxbfu91f0w428d.webp"
+          alt="nicely-done-gif"
+          id="nicely-done"
+        />
+        <button type="button" id="playAgain" class="filled-button">
+          PLAY AGAIN
+        </button>
       </div>
     </section>
     <script src="script.js"></script>