Technigo · FridaKristian · Sep 6, 2023 · Sep 6, 2023 · Sep 7, 2023 · Sep 7, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
-# Project Name
+# Guess who
 
-Replace this readme with your own information about your project.
+This is a project where we were creating the javascript-part of the game Guess who.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The game "cards" were creating by an array of objects, one was randomly selected as "secret". With the help of a dropdown menu the user asks about the secret characters attributes. The characters with this attribute were filtered out or kept. Until the user guesses on a person.
 
 ## 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?
+We were given a step by step approach to the problem. I followed the instructions and used console.log a lot to make sure the right values were compared and the right parameters were sent to the right functions.
+I read some material on W3-school to find certain array-functions.
+If I had more time I would personalise the game to include friends & family. I would also play around with the styling. Also I would add a tick to the attributes that had already been asked, so you didn't ask the same question multiple times.
 
 ## 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://guess-who-frida.netlify.app/
diff --git a/code/index.html b/code/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Name</title>
+    <title>Frida's 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"
@@ -23,25 +23,35 @@
       <h1>Does the person have</h1>
 
       <select title="questions" id="questions">
+        <option disabled selected>Choose attribute to guess:</option>
         <optgroup label="hair">
+          <option value="white">white hair</option>
+          <option value="grey">grey hair</option>
+          <option value="black">black hair</option>
           <option value="brown">brown hair</option>
+          <option value="orange">orange hair</option>
           <option value="yellow">yellow hair</option>
-          <!-- Add the rest of hair colors as options  -->
+          <option value="purple">purple hair</option>
+          <option value="hidden">hidden hair</option>
         </optgroup>
         <optgroup label="eyes">
+          <option value="brown">brown eyes</option>
+          <option value="blue">blue eyes</option>
+          <option value="green">green eyes</option>
           <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)  -->
+          <option value="hat">hat</option>
         </optgroup>
         <optgroup label="other">
           <option value="smoker">a smoking habit</option>
         </optgroup>
       </select>
 
       <button id="filter" class="filled-button">FIND OUT</button>
+
+      <h2 id="guess-counter"></h2>
     </aside>
 
     <section class="board-wrapper">

diff --git a/code/script.js b/code/script.js
@@ -2,6 +2,11 @@
 const board = document.getElementById('board')
 const questions = document.getElementById('questions')
 const restartButton = document.getElementById('restart')
+const findOutButton = document.getElementById('filter')
+const playAgainButton = document.getElementById('playAgain')
+const guessCounter = document.getElementById('guess-counter')
+const winOrLoseBoard = document.getElementById('winOrLose')
+const winOrLoseText = document.getElementById('winOrLoseText')
 
 // Array with all the characters, as objects
 const CHARACTERS = [
@@ -204,6 +209,7 @@ const CHARACTERS = [
 let secret
 let currentQuestion
 let charactersInPlay
+let numberOfGuesses = 0
 
 // Draw the game board
 const generateBoard = () => {
@@ -229,97 +235,148 @@ const setSecret = () => {
 
 // This function to start (and restart) the game
 const start = () => {
+  //Making sure the board + variables are "re-set" before starting the game:
+  winOrLoseBoard.style.display = "none"
+  winOrLoseText.innerHTML = ""
+  board.style.display = "flex"
+  numberOfGuesses = 0
+
   // Here we're setting charactersInPlay array to be all the characters to start with
   charactersInPlay = CHARACTERS
-  // What else should happen when we start the game?
+  //generate the cards to the coard
+  generateBoard()
+  //sets a specific character as variable secret - the "who"
+  setSecret()
 }
 
 // setting the currentQuestion object when you select something in the dropdown
 const selectQuestion = () => {
-  const category = questions.options[questions.selectedIndex].parentNode.label
-
   // This variable stores what option group (category) the question belongs to.
-  // We also need a variable that stores the actual value of the question we've selected.
-  // const value =
+  const category = questions.options[questions.selectedIndex].parentNode.label
+  // This variable stores the actual value of the question we've selected.
+  const value = questions.options[questions.selectedIndex].value
 
+  // This object stores the selected category and value to be able to compare later on
   currentQuestion = {
     category: category,
-    // value: value
+    value: value
   }
 }
 
 // This function should be invoked when you click on 'Find Out' button.
 const checkQuestion = () => {
   const { category, value } = currentQuestion
 
+  numberOfGuesses += 1
+  console.log(numberOfGuesses)
+  guessCounter.innerHTML = `Number of guesses: ${numberOfGuesses}`
+
   // Compare the currentQuestion details with the secret person details in a different manner based on category (hair/eyes or accessories/others).
   // See if we should keep or remove people based on that
   // Then invoke filterCharacters
   if (category === 'hair' || category === 'eyes') {
+    //if the details of the currentQuestion matches the secret "WHO" then we will run filterCharacter-function and passing true as the argument. Otherwise the function is run with the argument false.
 
-  } else if (category === 'accessories' || category === 'other') {
+    if (value === secret[category]) filterCharacters(true)
+    else filterCharacters(false)
 
+    //for category accessories and other the approach is different since they are arrays. So I run the method "includes" to see if the value is in the secret "WHO"'s array
+  } else if (category === 'accessories' || category === 'other') {
+    if (secret[category].includes(value)) filterCharacters(true)
+    else filterCharacters(false)
   }
 }
 
 // It'll filter the characters array and redraw the game board.
 const filterCharacters = (keep) => {
   const { category, value } = currentQuestion
+
   // Show the correct alert message for different categories
   if (category === 'accessories') {
     if (keep) {
       alert(
-        `Yes, the person wears ${value}! Keep all people that wears ${value}`
+        `Yes, the person wears a ${value}! Keep all people that wears a ${value}`
       )
     } else {
       alert(
-        `No, the person doesn't wear ${value}! Remove all people that wears ${value}`
+        `No, the person doesn't wear a ${value}! Remove all people that wear ${value}`
       )
     }
   } else if (category === 'other') {
-    // Similar to the one above
+    if (keep) {
+      alert(
+        `Yes, the person is a ${value}! Keep all people are ${value}s`
+      )
+    } else {
+      alert(
+        `No, the person is not a ${value}! Remove all people that are ${value}s`
+      )
+    }
   } else {
     if (keep) {
-      // alert popup that says something like: "Yes, the person has yellow hair! Keep all people with yellow hair"
+      alert(
+        `Yes, the person has ${value} ${category}! Keep all people with ${value} ${category}`
+      )
     } else {
-      // alert popup that says something like: "No, the person doesnt have yellow hair! Remove all people with yellow hair"
+      alert(
+        `No, the person doesn't have ${value} ${category}! Remove all people with ${value} ${category}`
+      )
     }
   }
 
   // Determine what is the category
   // filter by category to keep or remove based on the keep variable.
-  /* 
-    for hair and eyes :
-      charactersInPlay = charactersInPlay.filter((person) => person[attribute] === value)
-      or
-      charactersInPlay = charactersInPlay.filter((person) => person[attribute] !== value)
-
-    for accessories and other
-      charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value))
-      or
-      charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value))
-  */
+  if (category === 'accessories' || category === 'other'){
+    if (keep) charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value))
+    else charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value))
+  }
+  else if (category === 'hair' || category === 'eyes') {
+    if (keep) charactersInPlay = charactersInPlay.filter((person) => person[category] === value)
+    else charactersInPlay = charactersInPlay.filter((person) => person[category] !== value)
+  }
 
-  // Invoke a function to redraw the board with the remaining people.
+  generateBoard(charactersInPlay)
 }
 
 // when clicking guess, the player first have to confirm that they want to make a guess.
 const guess = (personToConfirm) => {
-  // store the interaction from the player in a variable.
-  // remember the confirm() ?
-  // If the player wants to guess, invoke the checkMyGuess function.
+  let guessedPerson = personToConfirm
+  let isConfirmed = confirm(`Are you sure you want to guess on ${guessedPerson}?`)
+
+  //If it's confirmed, run the function checkMyGuess
+  if (isConfirmed) checkMyGuess(guessedPerson)
+  else alert(`Oh no, you didn't want to guess 🤔. 
+You can keep playing instead`)
 }
 
 // If you confirm, this function is invoked
 const checkMyGuess = (personToCheck) => {
-  // 1. Check if the personToCheck is the same as the secret person's name
-  // 2. Set a Message to show in the win or lose section accordingly
+  // Check if the personToCheck is the same as the secret person's name
+  if (secret.name === personToCheck) {
+    alert(
+      `Wohooo 🥳
+${secret.name} was the secret person!`)
+
+  }
+  else {
+    alert(
+      `Oh noooo 🤦🏼‍♀️
+      ${personToCheck} was not the secret person!`)
+  }
+
   // 3. Show the win or lose section
+  winOrLoseBoard.style.display = "flex"
+  if (secret.name === personToCheck) winOrLoseText.innerHTML = "✨ WIN! \YOU ARE A BAD ASS GUESSER ✨"
+  else winOrLoseText.innerHTML = "☠️ YOU LOST... ☠️"
   // 4. Hide the game board
+  board.style.display = "none"
 }
 
 // Invokes the start function when website is loaded
 start()
 
 // All the event listeners
 restartButton.addEventListener('click', start)
+playAgain.addEventListener('click', start)
+questions.addEventListener("change", selectQuestion)
+findOutButton.addEventListener('click', checkQuestion)
diff --git a/code/style.css b/code/style.css
@@ -19,6 +19,14 @@ h1 {
   color: white;
 }
 
+h2 {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 36px;
+  margin: 10px 0;
+  color: var(--primary);
+}
+
 .question-section {
   width: 30%;
   min-height: 100vh;