diff --git a/README.md b/README.md
index 60f55e53..d5fd75a8 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,12 @@
-# Project Name
+Guess Who project
+
+This is an online version of the game "Guess Who". The assignment was to create it with a focus on Java Script. 
 
-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.
 
 ## 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 hard to grasp the logical steps in the beginning, easier when braking it down. 
 
 ## 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-game-deployed.netlify.app/ 
diff --git a/code/index.html b/code/index.html
index 0479b061..6ef401c4 100644
--- a/code/index.html
+++ b/code/index.html
@@ -1,64 +1,73 @@
 <!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>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>
 
-      <h1>Does the person have</h1>
+<body>
+  <aside class="question-section">
+    <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>
+    <!-- Add the hair colors as options  -->
+    <select title="questions" id="questions">
+      <optgroup label="hair">
+        <option value="brown">Brown hair?</option>
+        <option value="yellow">Yellow hair?</option>
+        <option value="hidden">Hidden hair?</option>
+        <option value="black">Black 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>
+      </optgroup>
 
-      <button id="filter" class="filled-button">FIND OUT</button>
-    </aside>
+      <!-- Add the rest of eye colors as options  -->
+      <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 other accessory option here. (hat)  -->
+      </optgroup>
+      <optgroup label="accessories">
+        <option value="hat">A hat?</option>
+        <option value="glasses">Glasses?</option>
+      </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">I WANT TO FIND OUT!</button>
+  </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">
+    <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>
+      <audio src="./sounds/win.wav" id="win"></audio>
+      <audio src="./sounds/lose.wav" id="lose"></audio>
+    </div>
+  </section>
+  <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/code/script.js b/code/script.js
index 5207730c..f74e1022 100644
--- a/code/script.js
+++ b/code/script.js
@@ -1,213 +1,220 @@
 // All the DOM selectors stored as short variables
-const board = document.getElementById('board')
-const questions = document.getElementById('questions')
-const restartButton = document.getElementById('restart')
+const board = document.getElementById("board");
+const questions = document.getElementById("questions");
+const restartButton = document.getElementById("restart");
+const findOutBtn = document.getElementById("filter");
+const winOrLose = document.getElementById("winOrLose");
+const winOrLoseText = document.getElementById("winOrLoseText");
+const playAgainbtn = document.getElementById("playAgain");
+
+
 
 // Array with all the characters, as objects
 const CHARACTERS = [
   {
-    name: 'Jabala',
-    img: 'images/jabala.svg',
-    hair: 'hidden',
-    eyes: 'hidden',
-    accessories: ['glasses', 'hat'],
-    other: []
+    name: "Jabala",
+    img: "images/jabala.svg",
+    hair: "hidden",
+    eyes: "hidden",
+    accessories: ["glasses", "hat"],
+    other: [],
   },
   {
-    name: 'Jack',
-    img: 'images/jack.svg',
-    hair: 'hidden',
-    eyes: 'blue',
-    accessories: ['hat'],
-    other: []
+    name: "Jack",
+    img: "images/jack.svg",
+    hair: "hidden",
+    eyes: "blue",
+    accessories: ["hat"],
+    other: [],
   },
   {
-    name: 'Jacques',
-    img: 'images/jacques.svg',
-    hair: 'grey',
-    eyes: 'blue',
-    accessories: ['hat'],
-    other: ['smoker']
+    name: "Jacques",
+    img: "images/jacques.svg",
+    hair: "grey",
+    eyes: "blue",
+    accessories: ["hat"],
+    other: ["smoker"],
   },
   {
-    name: 'Jai',
-    img: 'images/jai.svg',
-    hair: 'black',
-    eyes: 'brown',
+    name: "Jai",
+    img: "images/jai.svg",
+    hair: "black",
+    eyes: "brown",
     accessories: [],
-    other: []
+    other: [],
   },
   {
-    name: 'Jake',
-    img: 'images/jake.svg',
-    hair: 'yellow',
-    eyes: 'green',
-    accessories: ['glasses'],
-    other: []
+    name: "Jake",
+    img: "images/jake.svg",
+    hair: "yellow",
+    eyes: "green",
+    accessories: ["glasses"],
+    other: [],
   },
   {
-    name: 'James',
-    img: 'images/james.svg',
-    hair: 'brown',
-    eyes: 'green',
-    accessories: ['glasses'],
-    other: []
+    name: "James",
+    img: "images/james.svg",
+    hair: "brown",
+    eyes: "green",
+    accessories: ["glasses"],
+    other: [],
   },
   {
-    name: 'Jana',
-    img: 'images/jana.svg',
-    hair: 'black',
-    eyes: 'hidden',
-    accessories: ['glasses'],
-    other: []
+    name: "Jana",
+    img: "images/jana.svg",
+    hair: "black",
+    eyes: "hidden",
+    accessories: ["glasses"],
+    other: [],
   },
   {
-    name: 'Jane',
-    img: 'images/jane.svg',
-    hair: 'yellow',
-    eyes: 'hidden',
-    accessories: ['glasses'],
-    other: []
+    name: "Jane",
+    img: "images/jane.svg",
+    hair: "yellow",
+    eyes: "hidden",
+    accessories: ["glasses"],
+    other: [],
   },
   {
-    name: 'Jaqueline',
-    img: 'images/jaqueline.svg',
-    hair: 'orange',
-    eyes: 'green',
-    accessories: ['glasses'],
-    other: []
+    name: "Jaqueline",
+    img: "images/jaqueline.svg",
+    hair: "orange",
+    eyes: "green",
+    accessories: ["glasses"],
+    other: [],
   },
 
   {
-    name: 'Jazebelle',
-    img: 'images/jazebelle.svg',
-    hair: 'purple',
-    eyes: 'hidden',
-    accessories: ['glasses'],
-    other: ['smoker']
+    name: "Jazebelle",
+    img: "images/jazebelle.svg",
+    hair: "purple",
+    eyes: "hidden",
+    accessories: ["glasses"],
+    other: ["smoker"],
   },
   {
-    name: 'Jean',
-    img: 'images/jean.svg',
-    hair: 'brown',
-    eyes: 'blue',
-    accessories: ['glasses', 'hat'],
-    other: ['smoker']
+    name: "Jean",
+    img: "images/jean.svg",
+    hair: "brown",
+    eyes: "blue",
+    accessories: ["glasses", "hat"],
+    other: ["smoker"],
   },
   {
-    name: 'Jeane',
-    img: 'images/jeane.svg',
-    hair: 'brown',
-    eyes: 'green',
-    accessories: ['glasses'],
-    other: []
+    name: "Jeane",
+    img: "images/jeane.svg",
+    hair: "brown",
+    eyes: "green",
+    accessories: ["glasses"],
+    other: [],
   },
   {
-    name: 'Jed',
-    img: 'images/jed.svg',
-    hair: 'orange',
-    eyes: 'green',
-    accessories: ['glasses', 'hat'],
-    other: ['smoker']
+    name: "Jed",
+    img: "images/jed.svg",
+    hair: "orange",
+    eyes: "green",
+    accessories: ["glasses", "hat"],
+    other: ["smoker"],
   },
   {
-    name: 'Jenni',
-    img: 'images/jenni.svg',
-    hair: 'white',
-    eyes: 'hidden',
-    accessories: ['hat'],
-    other: []
+    name: "Jenni",
+    img: "images/jenni.svg",
+    hair: "white",
+    eyes: "hidden",
+    accessories: ["hat"],
+    other: [],
   },
   {
-    name: 'Jeri',
-    img: 'images/jeri.svg',
-    hair: 'orange',
-    eyes: 'green',
-    accessories: ['glasses'],
-    other: []
+    name: "Jeri",
+    img: "images/jeri.svg",
+    hair: "orange",
+    eyes: "green",
+    accessories: ["glasses"],
+    other: [],
   },
   {
-    name: 'Jerry',
-    img: 'images/jerry.svg',
-    hair: 'hidden',
-    eyes: 'blue',
-    accessories: ['hat'],
-    other: []
+    name: "Jerry",
+    img: "images/jerry.svg",
+    hair: "hidden",
+    eyes: "blue",
+    accessories: ["hat"],
+    other: [],
   },
   {
-    name: 'Jess',
-    img: 'images/jess.svg',
-    hair: 'black',
-    eyes: 'blue',
-    accessories: ['glasses'],
-    other: []
+    name: "Jess",
+    img: "images/jess.svg",
+    hair: "black",
+    eyes: "blue",
+    accessories: ["glasses"],
+    other: [],
   },
   {
-    name: 'Jocelyn',
-    img: 'images/jocelyn.svg',
-    hair: 'black',
-    eyes: 'brown',
-    accessories: ['glasses'],
-    other: []
+    name: "Jocelyn",
+    img: "images/jocelyn.svg",
+    hair: "black",
+    eyes: "brown",
+    accessories: ["glasses"],
+    other: [],
   },
   {
-    name: 'Jon',
-    img: 'images/jon.svg',
-    hair: 'brown',
-    eyes: 'green',
-    accessories: ['glasses'],
-    other: []
+    name: "Jon",
+    img: "images/jon.svg",
+    hair: "brown",
+    eyes: "green",
+    accessories: ["glasses"],
+    other: [],
   },
   {
-    name: 'Jordan',
-    img: 'images/jordan.svg',
-    hair: 'yellow',
-    eyes: 'hidden',
-    accessories: ['glasses', 'hat'],
-    other: []
+    name: "Jordan",
+    img: "images/jordan.svg",
+    hair: "yellow",
+    eyes: "hidden",
+    accessories: ["glasses", "hat"],
+    other: [],
   },
   {
-    name: 'Josephine',
-    img: 'images/josephine.svg',
-    hair: 'grey',
-    eyes: 'brown',
+    name: "Josephine",
+    img: "images/josephine.svg",
+    hair: "grey",
+    eyes: "brown",
     accessories: [],
-    other: []
+    other: [],
   },
   {
-    name: 'Josh',
-    img: 'images/josh.svg',
-    hair: 'yellow',
-    eyes: 'green',
+    name: "Josh",
+    img: "images/josh.svg",
+    hair: "yellow",
+    eyes: "green",
     accessories: [],
-    other: []
+    other: [],
   },
   {
-    name: 'Jude',
-    img: 'images/jude.svg',
-    hair: 'black',
-    eyes: 'green',
+    name: "Jude",
+    img: "images/jude.svg",
+    hair: "black",
+    eyes: "green",
     accessories: [],
-    other: []
+    other: [],
   },
   {
-    name: 'Julie',
-    img: 'images/julie.svg',
-    hair: 'black',
-    eyes: 'brown',
-    accessories: ['glasses', 'hat'],
-    other: []
+    name: "Julie",
+    img: "images/julie.svg",
+    hair: "black",
+    eyes: "brown",
+    accessories: ["glasses", "hat"],
+    other: [],
   },
-]
+];
 
 // Global variables
-let secret
-let currentQuestion
-let charactersInPlay
+let secret; //will be the secret person object
+let currentQuestion; //will be the current question object
+let charactersInPlay; //will be an array of all people left in the game
+let keep;
 
 // Draw the game board
 const generateBoard = () => {
-  board.innerHTML = ''
+  board.innerHTML = "";
   charactersInPlay.forEach((person) => {
     board.innerHTML += `
       <div class="card">
@@ -218,108 +225,169 @@ const generateBoard = () => {
           <button class="filled-button small" onclick="guess('${person.name}')">Guess</button>
         </div>
       </div>
-    `
-  })
-}
+    `;
+  });
+};
 
 // Randomly select a person from the characters array and set as the value of the variable called secret
 const setSecret = () => {
-  secret = charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)]
-}
+  secret =
+    charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)];
+  //console.log(secret);
+};
 
-// This function to start (and restart) the game
+// This function to start the game
 const start = () => {
   // Here we're setting charactersInPlay array to be all the characters to start with
-  charactersInPlay = CHARACTERS
+  charactersInPlay = CHARACTERS;
   // What else should happen when we start the game?
-}
+  generateBoard();
+  setSecret();
+};
 
 // setting the currentQuestion object when you select something in the dropdown
 const selectQuestion = () => {
-  const category = questions.options[questions.selectedIndex].parentNode.label
-
+  const category = questions.options[questions.selectedIndex].parentNode.label;
+  //console.log(category);
   // 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 value = questions.options[questions.selectedIndex].value;
+  //console.log(value);
 
   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
+  const { category, value } = currentQuestion;
 
   // 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') {
-
-  } else if (category === 'accessories' || category === 'other') {
 
+  if (category === "hair" || category === "eyes") {
+    keep = secret[category] === value;
+  } else if (category === "accessories" || category === "other") {
+    keep = secret[category].includes(value);
   }
-}
+  // Then invoke filterCharacters
+  filterCharacters(keep);
+};
 
-// It'll filter the characters array and redraw the game board.
+//filter characters array and redraw the board.
 const filterCharacters = (keep) => {
-  const { category, value } = currentQuestion
+  console.log(keep);
+  const { category, value } = currentQuestion;
   // Show the correct alert message for different categories
-  if (category === 'accessories') {
+  if (category === "accessories") {
     if (keep) {
       alert(
         `Yes, the person wears ${value}! Keep all people that wears ${value}`
-      )
+      );
     } else {
       alert(
         `No, the person doesn't wear ${value}! Remove all people that wears ${value}`
-      )
+      );
+    }
+  } else if (category === "other") {
+    if (keep) {
+      alert(`Yes, the person is ${value}! Keep all people that are ${value}'s`);
+    } else {
+      alert(
+        `No, the person is not ${value}! Remove all people that are ${value}'s`
+      );
     }
-  } else if (category === 'other') {
-    // Similar to the one above
   } 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))
-  */
-
-  // Invoke a function to redraw the board with the remaining people.
-}
+  // if hair OR eyes matches the value(keep is true) keep
+  if (category === "hair" || category === "eyes") {
+    if (keep) {
+      charactersInPlay = charactersInPlay.filter(
+        (person) => person[category] === value
+      );
+      //if not remove
+    } else {
+      charactersInPlay = charactersInPlay.filter(
+        (person) => person[category] !== value
+      );
+    }
+    // if character has a value that includes accessories OR other (keep is true) keep
+  } else if (category === "accessories" || category === "other") {
+    if (keep) {
+      charactersInPlay = charactersInPlay.filter((person) =>
+        person[category].includes(value)
+      );
+      //if not remove
+    } else {
+      charactersInPlay = charactersInPlay.filter(
+        (person) => !person[category].includes(value)
+      );
+    }
+  }
 
+  // filter the board
+  generateBoard(keep);
+};
 // 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() ?
+  let confirmGuess = confirm(
+    `Are you sure you want to guess on ${personToConfirm}?`
+  );
+
   // If the player wants to guess, invoke the checkMyGuess function.
-}
+  if (confirmGuess) {
+    checkMyGuess(personToConfirm);
+  }
+};
+
+
+// If user wants to guess, invoke response
+const checkMyGuess = (checkPerson) => {
 
-// If you confirm, this function is invoked
-const checkMyGuess = (personToCheck) => {
   // 1. Check if the personToCheck is the same as the secret person's name
+  if (checkPerson === secret.name) {
+    winOrLoseText.innerHTML = ` Congratulation, you guessed right! you're a winner'!`;
+  } else {
+    winOrLoseText.innerHTML = `No! Wrong guess, game over! `;
+  }
   // 2. Set a Message to show in the win or lose section accordingly
   // 3. Show the win or lose section
+  winOrLose.style.display = "flex";
   // 4. Hide the game board
+  board.innerHTML = "";
+};
+
+//restart button, asking the user to confirm if restarting
+const restart = () => {
+  let userConfirmed = confirm(`Are you sure you want to restart the game?`);
+  if (userConfirmed) {
+    location.reload();
+  }
 }
 
+
 // Invokes the start function when website is loaded
-start()
+start();
 
 // All the event listeners
-restartButton.addEventListener('click', start)
+
+questions.addEventListener("change", selectQuestion);
+findOutBtn.addEventListener("click", checkQuestion);
+restartButton.addEventListener("click", restart)
+playAgainbtn.addEventListener("click", () => {
+  location.reload();
+});
\ No newline at end of file
diff --git a/code/style.css b/code/style.css
index 1602adfe..dec1e6b4 100644
--- a/code/style.css
+++ b/code/style.css
@@ -186,9 +186,11 @@ button {
     width: 100%;
     min-height: 0;
   }
+
   button {
     padding: 8px 16px;
   }
+
   h1 {
     font-size: 24px;
     line-height: 30px;
@@ -230,4 +232,4 @@ button {
     color: var(--primary);
     border: none;
   }
-}
+}
\ No newline at end of file
