Technigo · verawitting · Sep 5, 2023 · Sep 6, 2023 · Sep 6, 2023 · Sep 6, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,12 @@
-# Project Name
+# 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.
+This project was to create a "Guess who"-game. It inluded using the DOM, eventlisteners etc. 
 
 ## 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?
+It was alot of information to start with in the files already, which both made it easier and trickier. Less to do and figure out along the way, but a lot of code to understand at once in the beginning. 
+If I hade more time, I would probably work more on the styling, and additional strechgoals. 
 
 ## 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://guesswhoveras.netlify.app
diff --git a/code/imagesnew/barbie.png b/code/imagesnew/barbie.png
diff --git a/code/imagesnew/countOrlok.png b/code/imagesnew/countOrlok.png
diff --git a/code/imagesnew/cruellaDeVil.png b/code/imagesnew/cruellaDeVil.png
diff --git a/code/imagesnew/deloris.png b/code/imagesnew/deloris.png
diff --git a/code/imagesnew/dobby.png b/code/imagesnew/dobby.png
diff --git a/code/imagesnew/donVitoCorleone.png b/code/imagesnew/donVitoCorleone.png
diff --git a/code/imagesnew/dorothyGale.png b/code/imagesnew/dorothyGale.png
diff --git a/code/imagesnew/drEmmettBrown.png b/code/imagesnew/drEmmettBrown.png
diff --git a/code/imagesnew/dreParker.png b/code/imagesnew/dreParker.png
diff --git a/code/imagesnew/elleWoods.png b/code/imagesnew/elleWoods.png
diff --git a/code/imagesnew/galadriel.png b/code/imagesnew/galadriel.png
diff --git a/code/imagesnew/genie.png b/code/imagesnew/genie.png
diff --git a/code/imagesnew/gimli.png b/code/imagesnew/gimli.png
diff --git a/code/imagesnew/guessWhoLogoNew.png b/code/imagesnew/guessWhoLogoNew.png
diff --git a/code/imagesnew/harryPotter.png b/code/imagesnew/harryPotter.png
diff --git a/code/imagesnew/indieanaJones.png b/code/imagesnew/indieanaJones.png
diff --git a/code/imagesnew/johnCoffey.png b/code/imagesnew/johnCoffey.png
diff --git a/code/imagesnew/julesWinnfield.png b/code/imagesnew/julesWinnfield.png
diff --git a/code/imagesnew/katnissEverdeen.png b/code/imagesnew/katnissEverdeen.png
diff --git a/code/imagesnew/lobbyBoy.png b/code/imagesnew/lobbyBoy.png
diff --git a/code/imagesnew/malificent.png b/code/imagesnew/malificent.png
diff --git a/code/imagesnew/maryPoppins.png b/code/imagesnew/maryPoppins.png
diff --git a/code/imagesnew/mirandaPriestly.png b/code/imagesnew/mirandaPriestly.png
diff --git a/code/imagesnew/queenOfHearts.png b/code/imagesnew/queenOfHearts.png
diff --git a/code/imagesnew/red.png b/code/imagesnew/red.png
diff --git a/code/imagesnew/spock.png b/code/imagesnew/spock.png
diff --git a/code/imagesnew/storm.png b/code/imagesnew/storm.png
diff --git a/code/imagesnew/theJoker.png b/code/imagesnew/theJoker.png
diff --git a/code/imagesnew/theMask.png b/code/imagesnew/theMask.png
diff --git a/code/imagesnew/williamSomerset.png b/code/imagesnew/williamSomerset.png
diff --git a/code/index.html b/code/index.html
@@ -3,45 +3,93 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Name</title>
+    <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>
   <body>
+    <div id="startBox" class="start-box">
+      <img
+        class="guess-who-icon"
+        src="imagesnew/guessWhoLogoNew.png"
+        alt="Guess Who"
+      />
+      <h1>Hey Babe! Welcome to Guess Who!</h1>
+      <p>Click the button below to start the game. <br> Remeber,  I'll be taking the time until you confirm your guess! Good luck!!</p>
+      <button id="startButton" class="filled-button">START GAME!</button>
+     </div>
+
     <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"
+        src="imagesnew/guessWhoLogoNew.png"
         alt="Guess Who"
       />
-
-      <h1>Does the person have</h1>
-
+      
+      <h1>Does the person have...</h1>
+      
       <select title="questions" id="questions">
+        <option value="default" disabled selected >choose an attribute</option>
         <optgroup label="hair">
-          <option value="brown">brown hair</option>
-          <option value="yellow">yellow hair</option>
-          <!-- Add the rest of hair colors as options  -->
+          <option value="brown">brown hair?</option>
+          <option value="blonde">blonde hair?</option>
+          <option value="no">no hair?</option>
+          <option value="black">black hair?</option>
+          <option value="grey">grey hair?</option>
+          <option value="white">white hair?</option>
+          <option value="red">red hair?</option>
+          <option value="very specific">very specific hair?</option>
+
         </optgroup>
         <optgroup label="eyes">
-          <option value="hidden">hidden eyes</option>
-          <!-- Add the rest of eye colors as options  -->
+          <option value="brown">brown eyes?</option>
+          <option value="blue">blue eyes?</option>
+          <option value="haunting">haunting eyes?</option>
         </optgroup>
+
         <optgroup label="accessories">
-          <option value="glasses">glasses</option>
-          <!-- Add the other accessory option here. (hat)  -->
+          <option value="glasses">glasses?</option>
+          <option value="sunglasses">sunglasses?</option>
+          <option value="a headpiece">a headpiece?</option>
+          <option value="a dog">a dog?</option>
+          <option value="jewelry">jewelry?</option>
+          <option value="a weapon">a weapon?</option>
+          <option value="a plan">a plan?</option>
+          <option value="dollars">dollars?</option>
         </optgroup>
+
         <optgroup label="other">
-          <option value="smoker">a smoking habit</option>
+          <option value="a smoking habit">a smoking habit?</option>
+          <option value="a fashion habit">a fashion habit?</option>
+          <option value="a magical habit">a magical habit?</option>
+          <option value="a phone">braids?</option>
+          <option value="a beard">a beard?</option>
+          <option value="elf ears">elf ears?</option>
+          <option value="a mustache">a mustache?</option>
+          <option value="a striking complexion">a striking complexion?</option>
         </optgroup>
       </select>
 
       <button id="filter" class="filled-button">FIND OUT</button>
+
+      <section class="time-section">
+        <h2>Your time:
+          <span class="timer" id="timer">0</span> seconds
+        </h2>
+      </section>
+
+      <section class="count-section">
+        <h2>Number of guesses:
+          <span class="guess-container" id="guess-container">0</span>
+        </h2>
+      </section>
+
     </aside>
 
     <section class="board-wrapper">
@@ -52,11 +100,17 @@ <h1>Does the person have</h1>
       <div class="win-or-lose">
         <img
           class="guess-who-icon"
-          src="images/guess-who-bubble.png"
+          src="imagesnew/guessWhoLogoNew.png"
           alt="Guess Who"
         />
         <h1 id="winOrLoseText"></h1>
         <button type="button" id="playAgain" class="filled-button">PLAY AGAIN</button>
+        <section class="count-section">
+          <h2>Your number of guesses was:
+            <span class="guess-container" id="win-or-lose-guess-container">0</span>
+          </h2>
+        </section>
+        <h2 id ="winOrLoseTimer"></h2>
       </div>
     </section>
     <script src="script.js"></script>