Technigo · saradahlstrom · Sep 11, 2023 · Sep 11, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # 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.
+The task was to create a version of the game Guess Who. Compared to other projects we were given quite a lot of code, and it was a different chellenge trying to understand the existing code to be able to continue it.
 
 ## 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?
+Most people have different ways of coding, so it was a challenge to understand this way completely. It was important to be able to continue coding the same way.
 
 ## 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.
+project-guess-who.vercel.app
diff --git a/images/guess-who-bubble.png b/images/guess-who-bubble.png
diff --git a/code/images/jabala.svg → images/jabala.svg b/code/images/jabala.svg → images/jabala.svg
diff --git a/code/images/jack.svg → images/jack.svg b/code/images/jack.svg → images/jack.svg
diff --git a/code/images/jacques.svg → images/jacques.svg b/code/images/jacques.svg → images/jacques.svg
diff --git a/code/images/jai.svg → images/jai.svg b/code/images/jai.svg → images/jai.svg
diff --git a/code/images/jake.svg → images/jake.svg b/code/images/jake.svg → images/jake.svg
diff --git a/code/images/james.svg → images/james.svg b/code/images/james.svg → images/james.svg
diff --git a/code/images/jana.svg → images/jana.svg b/code/images/jana.svg → images/jana.svg
diff --git a/code/images/jane.svg → images/jane.svg b/code/images/jane.svg → images/jane.svg
diff --git a/code/images/jaqueline.svg → images/jaqueline.svg b/code/images/jaqueline.svg → images/jaqueline.svg
diff --git a/code/images/jazebelle.svg → images/jazebelle.svg b/code/images/jazebelle.svg → images/jazebelle.svg
diff --git a/code/images/jean.svg → images/jean.svg b/code/images/jean.svg → images/jean.svg
diff --git a/code/images/jeane.svg → images/jeane.svg b/code/images/jeane.svg → images/jeane.svg
diff --git a/code/images/jed.svg → images/jed.svg b/code/images/jed.svg → images/jed.svg
diff --git a/code/images/jenni.svg → images/jenni.svg b/code/images/jenni.svg → images/jenni.svg
diff --git a/code/images/jeri.svg → images/jeri.svg b/code/images/jeri.svg → images/jeri.svg
diff --git a/code/images/jerry.svg → images/jerry.svg b/code/images/jerry.svg → images/jerry.svg
diff --git a/code/images/jess.svg → images/jess.svg b/code/images/jess.svg → images/jess.svg
diff --git a/code/images/jia.svg → images/jia.svg b/code/images/jia.svg → images/jia.svg
diff --git a/code/images/jocelyn.svg → images/jocelyn.svg b/code/images/jocelyn.svg → images/jocelyn.svg
diff --git a/code/images/jodi.svg → images/jodi.svg b/code/images/jodi.svg → images/jodi.svg
diff --git a/code/images/joe.svg → images/joe.svg b/code/images/joe.svg → images/joe.svg
diff --git a/code/images/jolee.svg → images/jolee.svg b/code/images/jolee.svg → images/jolee.svg
diff --git a/code/images/jon.svg → images/jon.svg b/code/images/jon.svg → images/jon.svg
diff --git a/code/images/jordan.svg → images/jordan.svg b/code/images/jordan.svg → images/jordan.svg
diff --git a/code/images/josephine.svg → images/josephine.svg b/code/images/josephine.svg → images/josephine.svg
diff --git a/code/images/josh.svg → images/josh.svg b/code/images/josh.svg → images/josh.svg
diff --git a/code/images/jude.svg → images/jude.svg b/code/images/jude.svg → images/jude.svg
diff --git a/code/images/julie.svg → images/julie.svg b/code/images/julie.svg → images/julie.svg
diff --git a/code/index.html → index.html b/code/index.html → index.html
@@ -3,45 +3,45 @@
   <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>
     <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"
-      />
+
+      <button type="button" id="restart" class="outlined-button" onclick="start()">RESTART</button>
 
-      <h1>Does the person have</h1>
+      <h1>Guess Who!</h1>
 
       <select title="questions" id="questions">
+        <option value="default">Choose an option</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="yellow">Blond hair</option>
+          <option value="black">Black hair</option>
+          <option value="white">White hair</option>
         </optgroup>
         <optgroup label="eyes">
-          <option value="hidden">hidden eyes</option>
-          <!-- Add the rest of eye colors as options  -->
+          <option value="hidden">Hidden eyes</option>
+          <option value="blue">Blue eyes</option>
+          <option value="green">Green eyes</option>
+          <option value="brown">Brown 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="earrings">Earrings</option>
+          <option value="hat">Hat</option>
+
         </optgroup>
         <optgroup label="other">
-          <option value="smoker">a smoking habit</option>
+          <option value="smoker">A habit of smoking</option>
         </optgroup>
       </select>
 
-      <button id="filter" class="filled-button">FIND OUT</button>
+      <button id="filter" class="outlined-button" >FIND OUT</button>
+
+
     </aside>
 
     <section class="board-wrapper">
@@ -55,10 +55,11 @@ <h1>Does the person have</h1>
           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>
+</html>
diff --git a/code/script.js → script.js b/code/script.js → script.js
@@ -1,10 +1,15 @@
-// All the DOM selectors stored as short variables
+// All the DOM selectors
+
 const board = document.getElementById('board')
 const questions = document.getElementById('questions')
 const restartButton = document.getElementById('restart')
+const resultScreen = document.getElementById('winOrLoseSection') 
+const resultText= document.getElementById('winOrLoseText')
+const playAgainButton = document.getElementById('playAgain')
+const findOutButton = document.getElementById('filter')
 
 // Array with all the characters, as objects
-const CHARACTERS = [
+const CHARACTERS = [ 
   {
     name: 'Jabala',
     img: 'images/jabala.svg',
@@ -199,13 +204,14 @@ const CHARACTERS = [
     other: []
   },
 ]
+
+//Global variables
+let secret;
+let keep;
+let currentQuestion;
+let charactersInPlay;
 
-// Global variables
-let secret
-let currentQuestion
-let charactersInPlay
-
-// Draw the game board
+//Generate the board
 const generateBoard = () => {
   board.innerHTML = ''
   charactersInPlay.forEach((person) => {
@@ -221,105 +227,135 @@ const generateBoard = () => {
     `
   })
 }
-
-// Randomly select a person from the characters array and set as the value of the variable called secret
+// Randomly select the secret person from the characters
 const setSecret = () => {
   secret = charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)]
+  console.log(secret);
 }
-
-// This function to start (and restart) the game
-const start = () => {
-  // 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?
-}
-
+
 // 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 value = questions.options[questions.selectedIndex].value
 
   currentQuestion = {
     category: category,
-    // value: value
+    value: value
   }
+  console.log(currentQuestion);
 }
 
-// This function should be invoked when you click on 'Find Out' button.
+// When you click "Find out" this function should start 
 const checkQuestion = () => {
   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') {
+    if (secret[category].includes(value)) {
+      filterCharacters(true)
+    } else
+      filterCharacters(false)
 
   } 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 ${value}! Keep all people wearing ${value}.`
       )
+      charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value))
     } else {
       alert(
-        `No, the person doesn't wear ${value}! Remove all people that wears ${value}`
+        `No, the person doesn't wear ${value}! Remove all people with ${value}.`
       )
+      charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value))
     }
   } else if (category === 'other') {
-    // Similar to the one above
+    if (keep) {
+      alert(
+        `Yes, the person has a ${value}! Keep all people that have a ${value} on the board.`
+      )
+      charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value))
+    } else {
+      alert(
+        `No, the person doesn't have a ${value}. Let's remove everyone without a ${value}.`
+      )
+      charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value))
+    }
+  } else if (category === 'eyes') {
+    if (keep) {
+      alert(
+        `Yes, the person has eyes that are ${value}! Everyone with ${value} eyes should stay on the board.`
+      )
+      charactersInPlay = charactersInPlay.filter((person) => person[category] === value)
+    } else {
+      alert(
+        `No, the person doesn't have eyes that are ${value}! Remove all people from the board that have ${value} eyes.`
+      )
+      charactersInPlay = charactersInPlay.filter((person) => person[category] !== value)
+    }
   } 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} hair. Keep all people that have ${value} hair.`
+      )
+      charactersInPlay = charactersInPlay.filter((person) => person[category] === value)
     } 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} hair! We will remove all the people that have ${value} hair.`
+      )
+      charactersInPlay = charactersInPlay.filter((person) => person[category] !== value)
     }
   }
 
-  // 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.
+
+  generateBoard()
 }
 
-// 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.
+  const confirmation = confirm(`Are you sure you want to guess on ${personToConfirm}?`)
+  if (confirmation === true) {
+    checkMyGuess(personToConfirm)
+  }
 }
 
-// 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
-  // 3. Show the win or lose section
-  // 4. Hide the game board
+  winOrLose.style.display = 'flex';
+  board.style.display = 'none';
+  if (secret.name === personToCheck) {
+    winOrLoseText.innerHTML = `Good job, you were right! ${secret.name} was the secret person.`
+  } else {
+    winOrLoseText.innerHTML = `Better luck next time! The secret person was ${secret.name}.`
+  }
+}
+
+
+const start = () => {
+  charactersInPlay = CHARACTERS
+  board.style.display = 'flex'
+  winOrLose.style.display = 'none'
+  generateBoard();
+  setSecret();
+
 }
 
-// Invokes the start function when website is loaded
 start()
 
 // All the event listeners
 restartButton.addEventListener('click', start)
+questions.addEventListener('change', selectQuestion)
+findOutButton.addEventListener('click', checkQuestion)
+playAgainButton.addEventListener('click', start)
+
+
+
diff --git a/code/style.css → style.css b/code/style.css → style.css
@@ -1,14 +1,14 @@
 /* Global css variables used for colors */
 :root {
-  --primary: #a259ff;
-  --secondary: #b0a6ff;
+  --primary: #ff59c2;
+  --secondary: #ffb7e4;
 }
 
 body {
   display: flex;
   margin: 0;
-  padding: 0;
-  font-family: 'Montserrat', sans-serif;
+  padding: 20px;
+  font-family: 'Inter', sans-serif;
 }
 
 h1 {
@@ -34,7 +34,7 @@ select {
   display: block;
   border: none;
   font-size: 22px;
-  font-family: 'Montserrat';
+  font-family: 'Inter', sans-serif;
   color: var(--secondary);
   width: 100%;
   margin: 24px 0;
@@ -117,10 +117,11 @@ button {
   border: 2px solid var(--primary);
   border-radius: 50px;
   font-size: 16px;
-  font-family: 'Montserrat';
+  font-family: 'Inter', sans-serif;
   font-weight: bold;
   padding: 17px 27px;
   cursor: pointer;
+  align-self: center;
 }
 
 .small {
@@ -130,7 +131,7 @@ button {
 .outlined-button {
   background-color: transparent;
   color: var(--primary);
-  align-self: flex-end;
+  align-self: center;
 }
 
 .filled-button,
@@ -230,4 +231,4 @@ button {
     color: var(--primary);
     border: none;
   }
-}
+}