From 8149d26e5a0810ff328dbf2093932445db0944e4 Mon Sep 17 00:00:00 2001 From: Elin Olausson <140396742+Soygirt@users.noreply.github.com> Date: Fri, 8 Sep 2023 15:28:39 +0200 Subject: [PATCH 1/7] made the board load! --- code/script.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 5207730c..76076b71 100644 --- a/code/script.js +++ b/code/script.js @@ -222,6 +222,9 @@ const generateBoard = () => { }) } + + + // 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)] @@ -231,6 +234,9 @@ const setSecret = () => { const start = () => { // Here we're setting charactersInPlay array to be all the characters to start with charactersInPlay = CHARACTERS + generateBoard(); + + // What else should happen when we start the game? } @@ -318,8 +324,9 @@ const checkMyGuess = (personToCheck) => { // 4. Hide the game board } + // Invokes the start function when website is loaded -start() +start(); // All the event listeners restartButton.addEventListener('click', start) From 24743d5988288731f66e30587fb3d4178936ed98 Mon Sep 17 00:00:00 2001 From: Elin Olausson <140396742+Soygirt@users.noreply.github.com> Date: Sat, 9 Sep 2023 10:21:37 +0200 Subject: [PATCH 2/7] not sure whats new, but finished almost all of step 4 in the instructions! --- code/script.js | 29 +++++++++++++++++++++-------- instructions.md | 4 ++++ 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/code/script.js b/code/script.js index 76076b71..104523aa 100644 --- a/code/script.js +++ b/code/script.js @@ -2,6 +2,8 @@ const board = document.getElementById('board') const questions = document.getElementById('questions') const restartButton = document.getElementById('restart') +const findOut = document.getElementById('filter') + // Array with all the characters, as objects const CHARACTERS = [ @@ -228,6 +230,8 @@ const generateBoard = () => { // 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)] + + console.log(`secret person is ${secret}`); //checks that the secret person is set? } // This function to start (and restart) the game @@ -235,38 +239,43 @@ const start = () => { // Here we're setting charactersInPlay array to be all the characters to start with charactersInPlay = CHARACTERS generateBoard(); + setSecret(); // 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 + const value = questions.value; // 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 = currentQuestion = { category: category, - // value: value + value: value, } } -// This function should be invoked when you click on 'Find Out' button. +// Function to check the selected question 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 + //compares question to the secret person + let keep = false; + if (category === 'hair' || category === 'eyes') { - } else if (category === 'accessories' || category === 'other') { + keep = value === secret[category]; + } else if (category === 'accessories' || category === 'other') { } -} + filterCharacters(keep); +}; // It'll filter the characters array and redraw the game board. const filterCharacters = (keep) => { @@ -329,4 +338,8 @@ const checkMyGuess = (personToCheck) => { start(); // All the event listeners -restartButton.addEventListener('click', start) +restartButton.addEventListener('click', start); + +questions.addEventListener('click', selectQuestion); //Does this work? Error in console on website. + +findOut.addEventListener('click', checkQuestion); //Invokes the checkQuestion when "find out button" is clicked. \ No newline at end of file diff --git a/instructions.md b/instructions.md index ee495b8b..1b65fbe7 100644 --- a/instructions.md +++ b/instructions.md @@ -40,6 +40,10 @@ currentQuestion = { We need to set this up with variables `category` and `value` instead of hardcoded values since the actual data will be available to detect thanks to `questions.options[questions.selectedIndex]`. + +------->I'M HERE!! Start with setting up the value :) + + We've helped you to set up the `category` variable. Make sure to properly create `value` variable! ## Step 4 - Time to find out the answer to your questions! From f21bd90cd95fffbeec59e80a8806fd4cbf4c0a53 Mon Sep 17 00:00:00 2001 From: Elin Olausson <140396742+Soygirt@users.noreply.github.com> Date: Sat, 9 Sep 2023 10:51:05 +0200 Subject: [PATCH 3/7] time to start on the filtering in filterCharacters! --- code/script.js | 8 +++++--- instructions.md | 2 -- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/code/script.js b/code/script.js index 104523aa..3ba34cf8 100644 --- a/code/script.js +++ b/code/script.js @@ -231,7 +231,7 @@ const generateBoard = () => { const setSecret = () => { secret = charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)] - console.log(`secret person is ${secret}`); //checks that the secret person is set? + console.log(`secret person is ${secret.name}`); //helps me to see who the secret person is. } // This function to start (and restart) the game @@ -295,9 +295,11 @@ const filterCharacters = (keep) => { // 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}! Let's keep all people with ${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}! Let's remove all people with ${value}.`) + // alerts here just say "hidden" not "hidden eyes" etc. } } diff --git a/instructions.md b/instructions.md index 1b65fbe7..05758c58 100644 --- a/instructions.md +++ b/instructions.md @@ -41,8 +41,6 @@ currentQuestion = { We need to set this up with variables `category` and `value` instead of hardcoded values since the actual data will be available to detect thanks to `questions.options[questions.selectedIndex]`. -------->I'M HERE!! Start with setting up the value :) - We've helped you to set up the `category` variable. Make sure to properly create `value` variable! From 991a02f4b870b91eb65ce669fc12eb7ddcc625ab Mon Sep 17 00:00:00 2001 From: Elin Olausson <140396742+Soygirt@users.noreply.github.com> Date: Sat, 9 Sep 2023 14:47:04 +0200 Subject: [PATCH 4/7] managed to get all the filters in the right place (I think). Doesn't work on others and glasses though --- code/index.html | 120 ++++++++++++++++++++++++++---------------------- code/script.js | 33 +++++++++---- 2 files changed, 89 insertions(+), 64 deletions(-) diff --git a/code/index.html b/code/index.html index 0479b061..ac9674a7 100644 --- a/code/index.html +++ b/code/index.html @@ -1,64 +1,72 @@ -
- - -