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 @@ - - - - Project Name - - - - - + +
+
+
+ +
+
+ Guess Who +

+ +
+
+ + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 3ba34cf8..288d1ac5 100644 --- a/code/script.js +++ b/code/script.js @@ -273,34 +273,51 @@ const checkQuestion = () => { keep = value === secret[category]; } else if (category === 'accessories' || category === 'other') { + keep = secret[category].includes(value); } + filterCharacters(keep); }; -// It'll filter the characters array and redraw the game board. +// This function filters characters array and redraw the game board. const filterCharacters = (keep) => { const { category, value } = currentQuestion - // Show the correct alert message for different categories + + //accesories if (category === 'accessories') { if (keep) { + /*charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) //doesn't remove */ + + charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) alert( `Yes, the person wears ${value}! Keep all people that wears ${value}` ) } else { + charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value))//doesn't remove them alert( `No, the person doesn't wear ${value}! Remove all people that wears ${value}` ) - } + } //other/smoker } else if (category === 'other') { - // Similar to the one above - } else { if (keep) { - alert(`Yes! The person has ${value}! Let's keep all people with ${value}.`) + charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) + alert(`Yes! The person is a ${value}! Let's remove all non-smokers!`) //doesn't remove them + } else { + charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) //doesn't remove them + alert(`Noo, this is a healthy person who's not a ${value}. Let's remove all smokers!`) + } + + } else { + if (keep) { //hair and eyes + charactersInPlay = charactersInPlay.filter((person) => person[category] === value) + alert(`Yes! The person has ${value} ${category}! Let's keep all people with ${value} ${category}.`) } else { - alert(`No, the person doesn't have ${value}! Let's remove all people with ${value}.`) - // alerts here just say "hidden" not "hidden eyes" etc. + charactersInPlay = charactersInPlay.filter((person) => person[category] !== value) + alert(`No, the person doesn't have ${value} ${category}! Let's remove all people with ${value} ${category}.`) + } + generateBoard(); } // Determine what is the category From d4d973735355c718b3052b359237ec92b91101b6 Mon Sep 17 00:00:00 2001 From: Elin Olausson <140396742+Soygirt@users.noreply.github.com> Date: Sat, 9 Sep 2023 17:43:47 +0200 Subject: [PATCH 5/7] Project basically finished, except from if/else other and accessories not filtering --- code/script.js | 46 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/code/script.js b/code/script.js index 288d1ac5..e1178b1c 100644 --- a/code/script.js +++ b/code/script.js @@ -3,7 +3,9 @@ const board = document.getElementById('board') const questions = document.getElementById('questions') const restartButton = document.getElementById('restart') const findOut = document.getElementById('filter') - +const winOrLose = document.getElementById('winOrLose') +const guessbtn = document.getElementsByClassName(`filled-button small`) +const playAgain = document.getElementById(`playAgain`) // Array with all the characters, as objects const CHARACTERS = [ @@ -286,7 +288,6 @@ const filterCharacters = (keep) => { //accesories if (category === 'accessories') { if (keep) { - /*charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) //doesn't remove */ charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) alert( @@ -339,26 +340,55 @@ const filterCharacters = (keep) => { // when clicking guess, the player first have to confirm that they want to make a guess. const guess = (personToConfirm) => { + const isConfirmed = confirm(`Are you sure you want to guess that ${personToConfirm} is the secret person?`); + + if (isConfirmed) { + checkMyGuess(personToConfirm) + } // store the interaction from the player in a variable. // remember the confirm() ? // If the player wants to guess, invoke the checkMyGuess function. } + // 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 + if (personToCheck === secret.name) { + winOrLose.style.display = "flex"; + board.style.display = 'none'; + winOrLoseText.innerHTML += `

Congratulations! Your guess is right and you WON! 🏆

` + } else { + winOrLose.style.display = "flex"; + board.style.display = 'none'; + winOrLoseText.innerHTML += `

Your guess is unfortunately wrong 😞 Do you wanna try again?

` + } + } +// 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 // Invokes the start function when website is loaded start(); +const replay = () => { + location.reload(); + + //winOrLose.style.display = `none`; + //generateBoard(CHARACTERS); + //start(); + +} + + + // All the event listeners -restartButton.addEventListener('click', start); +restartButton.addEventListener('click', start); //resets the board when the restart button is clicked. 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 +findOut.addEventListener('click', checkQuestion); //Invokes the checkQuestion when "find out button" is clicked. + +playAgain.addEventListener(`click`, replay); //loads the board for a new game when the play again button is clicked. \ No newline at end of file From 9079e482b0446a904a972ff5a95718f38e990cf0 Mon Sep 17 00:00:00 2001 From: Elin Olausson <140396742+Soygirt@users.noreply.github.com> Date: Sun, 10 Sep 2023 14:54:37 +0200 Subject: [PATCH 6/7] fixed the filtering. This is the end result! --- README.md | 9 ++++---- code/script.js | 58 +++++++------------------------------------------- code/style.css | 11 ++++++---- 3 files changed, 19 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index 60f55e53..8c6b4e5f 100644 --- a/README.md +++ b/README.md @@ -1,12 +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 make a digital version of the classical kids game called Guess who?. ## The problem +I watched the links and videos provided for this project first, to be able to understand the concept of what I needed to do. In the beginning I found it very confusing and didn't know where to start due to the code that were provided from the start. But I followed the instructions closely, and took small steps every day. I think that was the key for me to be able to start, following the instructions and breaking the project down to small steps. +For this project I relyed on the study material from Technigo, chatGPT, classmates repos at Github and talking to classmates on slack. +If I had more time, I'd definetely make the game about people I know, instead of the provided cartoons! I'd also like to add sound effects, and some nicer looking popups. It'd also be very cool (but way out of my knowledge) to have animated images that kind of response to events that's happening on the screen! -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? ## View it live diff --git a/code/script.js b/code/script.js index e1178b1c..839049d3 100644 --- a/code/script.js +++ b/code/script.js @@ -227,13 +227,11 @@ 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.name}`); //helps me to see who the secret person is. + //console.log(`secret person is ${secret.name}`); //helped me to see who the secret person is. } // This function to start (and restart) the game @@ -242,21 +240,16 @@ const start = () => { 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 = + //a variable that stores the actual value of the question we've selected. currentQuestion = { category: category, value: value, @@ -271,13 +264,10 @@ const checkQuestion = () => { let keep = false; if (category === 'hair' || category === 'eyes') { - keep = value === secret[category]; - } else if (category === 'accessories' || category === 'other') { keep = secret[category].includes(value); } - filterCharacters(keep); }; @@ -288,13 +278,12 @@ const filterCharacters = (keep) => { //accesories if (category === 'accessories') { if (keep) { - charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) alert( `Yes, the person wears ${value}! Keep all people that wears ${value}` ) } else { - charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value))//doesn't remove them + charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) alert( `No, the person doesn't wear ${value}! Remove all people that wears ${value}` ) @@ -302,9 +291,9 @@ const filterCharacters = (keep) => { } else if (category === 'other') { if (keep) { charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) - alert(`Yes! The person is a ${value}! Let's remove all non-smokers!`) //doesn't remove them + alert(`Yes! The person is a ${value}! Let's remove all non-smokers!`) } else { - charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) //doesn't remove them + charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) alert(`Noo, this is a healthy person who's not a ${value}. Let's remove all smokers!`) } @@ -318,24 +307,9 @@ const filterCharacters = (keep) => { alert(`No, the person doesn't have ${value} ${category}! Let's remove all people with ${value} ${category}.`) } - generateBoard(); } + generateBoard(); //generates the board after filtering. - // 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. } // when clicking guess, the player first have to confirm that they want to make a guess. @@ -345,13 +319,9 @@ const guess = (personToConfirm) => { if (isConfirmed) { checkMyGuess(personToConfirm) } - // store the interaction from the player in a variable. - // remember the confirm() ? - // If the player wants to guess, invoke the checkMyGuess function. } - -// If you confirm, this function is invoked +// If player confirms, this function is invoked const checkMyGuess = (personToCheck) => { if (personToCheck === secret.name) { winOrLose.style.display = "flex"; @@ -365,25 +335,13 @@ 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 - // Invokes the start function when website is loaded start(); const replay = () => { - location.reload(); - - //winOrLose.style.display = `none`; - //generateBoard(CHARACTERS); - //start(); - + location.reload(); //The location.reload refreshes the page, which was a easy solution to make the game start again. } - - // All the event listeners restartButton.addEventListener('click', start); //resets the board when the restart button is clicked. diff --git a/code/style.css b/code/style.css index 1602adfe..3341c5a2 100644 --- a/code/style.css +++ b/code/style.css @@ -1,7 +1,7 @@ /* Global css variables used for colors */ :root { - --primary: #a259ff; - --secondary: #b0a6ff; + --primary: #4c5a4b; + --secondary: #789476; } body { @@ -9,6 +9,7 @@ body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; + background-color: rgb(231, 240, 227); } h1 { @@ -16,7 +17,7 @@ h1 { font-weight: 500; line-height: 48px; margin: 10px 0; - color: white; + color: rgb(255, 255, 255); } .question-section { @@ -186,9 +187,11 @@ button { width: 100%; min-height: 0; } + button { padding: 8px 16px; } + h1 { font-size: 24px; line-height: 30px; @@ -230,4 +233,4 @@ button { color: var(--primary); border: none; } -} +} \ No newline at end of file From 44faefab5e3bb7e1c6070e936025e10d59739fc7 Mon Sep 17 00:00:00 2001 From: Elin Olausson <140396742+Soygirt@users.noreply.github.com> Date: Sun, 10 Sep 2023 15:01:09 +0200 Subject: [PATCH 7/7] Included a link to the project --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 8c6b4e5f..6a12163b 100644 --- a/README.md +++ b/README.md @@ -9,4 +9,7 @@ If I had more time, I'd definetely make the game about people I know, instead of ## View it live +Here's a link to my project: +https://gissevem.netlify.app/ + 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.