From 89e5663579f306fdb6ceca3cbdf3e37ae78f98ad Mon Sep 17 00:00:00 2001 From: Isa Robertini Date: Mon, 4 Sep 2023 12:15:36 +0200 Subject: [PATCH 01/10] categories --- code/index.html | 113 ++++++++++++++++++++++++------------------------ code/script.js | 41 +++++++++++------- 2 files changed, 83 insertions(+), 71 deletions(-) diff --git a/code/index.html b/code/index.html index 0479b061..fc5767ee 100644 --- a/code/index.html +++ b/code/index.html @@ -1,64 +1,65 @@ - - - - Project Name - - - - - + +
+
+
+ +
+
+ Guess Who +

+ +
+
+ + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 5207730c..f03ca567 100644 --- a/code/script.js +++ b/code/script.js @@ -3,6 +3,7 @@ const board = document.getElementById('board') const questions = document.getElementById('questions') const restartButton = document.getElementById('restart') + // Array with all the characters, as objects const CHARACTERS = [ { @@ -205,6 +206,7 @@ let secret let currentQuestion let charactersInPlay + // Draw the game board const generateBoard = () => { board.innerHTML = '' @@ -219,18 +221,25 @@ const generateBoard = () => { ` + }) } +console.log(charactersInPlay) // 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) } + // 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 + charactersInPlay = CHARACTERS; + setSecret() + generateBoard(); + // What else should happen when we start the game? } @@ -285,23 +294,24 @@ const filterCharacters = (keep) => { // alert popup that says something like: "No, the person doesnt have yellow hair! Remove all people with yellow hair" } } +} - // 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) +// 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)) - */ + 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. - // 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. const guess = (personToConfirm) => { @@ -322,4 +332,5 @@ const checkMyGuess = (personToCheck) => { start() // All the event listeners + restartButton.addEventListener('click', start) From 9d351c76bb826e920a1f7e9ccd959c83bf901145 Mon Sep 17 00:00:00 2001 From: Isa Robertini Date: Mon, 4 Sep 2023 14:43:26 +0200 Subject: [PATCH 02/10] first alerts --- code/index.html | 18 ++++++------ code/script.js | 75 ++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 67 insertions(+), 26 deletions(-) diff --git a/code/index.html b/code/index.html index fc5767ee..a092ac5f 100644 --- a/code/index.html +++ b/code/index.html @@ -21,18 +21,18 @@

Does the person have

- - - - - - - - + + + + + + + + + + - - - - + + + + + - - - + + - + +
+

How many guess? + +

+
@@ -57,7 +65,11 @@

Does the person have

Guess Who

- + + +
diff --git a/code/script.js b/code/script.js index a7963c79..489cc97c 100644 --- a/code/script.js +++ b/code/script.js @@ -1,215 +1,222 @@ // All the DOM selectors stored as short variables -const board = document.getElementById('board') -const dropDown = document.getElementById('questions') -const restartButton = document.getElementById('restart') -const filterButton = document.getElementById('filter') - +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"); +const pText = document.getElementById("counter"); +const winAudio = document.getElementById("win"); +const loseAudio = document.getElementById("lose"); // 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; +let guessCount = 0; //Initialize the counter // Draw the game board const generateBoard = () => { - board.innerHTML = ''; + board.innerHTML = ""; charactersInPlay.forEach((person) => { board.innerHTML += `
@@ -221,106 +228,96 @@ 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) -} + secret = + charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)]; + // console.log(charactersInPlay.length); => 24 + 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 happens when we start the game: + charactersInPlay = CHARACTERS; + // What else should happen when we start the game? generateBoard(); setSecret(); -} -// Invokes the start function when website is loaded -start() +}; // setting the currentQuestion object when you select something in the dropdown const selectQuestion = () => { - const category = dropDown.options[dropDown.selectedIndex].parentNode.label; - const value = dropDown.value + 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 = questions.options[questions.selectedIndex].value; + console.log(value); + currentQuestion = { category: category, value: value, }; -} +}; // This function should be invoked when you click on 'Find Out' button. const checkQuestion = () => { const { category, value } = currentQuestion; - //receives the users choice, checks the category and which value category is related to (hair, eyes, accessories, other) + // 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 (category === "hair" || category === "eyes") { keep = secret[category] === value; - - } else if (category === 'accessories' || category === 'other') { + } else if (category === "accessories" || category === "other") { keep = secret[category].includes(value); } - filterCharacters(keep) -} -// Then invoke filterCharacters + filterCharacters(keep); +}; + // It'll filter the characters array and redraw the game board. const filterCharacters = (keep) => { - console.log(keep) + 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( - `super, the person is a ${value}! Keep all people that are ${value}s` - ) - } else { - alert( - `No, the person is not a ${value}! Remove all people are ${value}` ); } - } else if (category === 'eyes') { + } else if (category === "other") { if (keep) { - alert( - `super, the person has ${value}! Keep all people that has ${value}` - ); + alert(`Yes, the person is ${value}! Keep all people that us ${value}`); } else { alert( - `No, the person doesn't have ${value}! Remove all people that has ${value}` + `No, the person is not a ${value}! Remove all people that are ${value}s` ); } - } else if (category === 'hair') { + } else { if (keep) { alert( - `super, the person has ${value}! Keep all people that has ${value}` + `Yeah😁 the person has ${value} ${category}! Keep all people with ${value} ${category}` ); } else { alert( - `No, the person doesn't have ${value}! Remove all people that has ${value}` + `No,the person doesn't have ${value} ${category}! Remove all people with ${value} ${category}` ); } - generateBoard(); } + // Determine what is the category // filter by category to keep or remove based on the keep variable. - - if (category === 'hair' || category === 'eyes') { - console.log(keep) + if (category === "hair" || category === "eyes") { if (keep) { charactersInPlay = charactersInPlay.filter( (person) => person[category] === value @@ -330,7 +327,7 @@ const filterCharacters = (keep) => { (person) => person[category] !== value ); } - } else if (category === 'accessiaors' || category === 'other') { + } else if (category === "accessiaors" || category === "other") { if (keep) { charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value) @@ -344,36 +341,53 @@ const filterCharacters = (keep) => { // Invoke a function to redraw the board with the remaining people. generateBoard(keep); - console.log(generateBoard) }; - - -// 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. -const guess = (personToConfirm) => { +/*const guess = (personToConfirm) => { // store the interaction from the player in a variable. + let confirmGuess = confirm( + `Are you sure you want to guess on ${personToConfirm}` + ); // remember the confirm() ? // If the player wants to guess, invoke the checkMyGuess function. -} + if (confirmGuess) { + checkMyGuess(personToConfirm); + } +}; // If you confirm, this function is invoked const checkMyGuess = (personToCheck) => { + console.log(personToCheck); + console.log(secret.name); // 1. Check if the personToCheck is the same as the secret person's name + if (personToCheck === secret.name) { + winOrLoseText.innerHTML = `Yeah 🎉 Congrats \n you won! 👏 `; + winAudio.play(); + } else { + winOrLoseText.innerHTML = `Noooo! You gessed Wrong. Game over😤 `; + loseAudio.play(); + } // 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 = ""; +}; +// Function to increment the counter and display the count +const count = () => { + guessCount++; + pText.innerHTML = guessCount; +};*/ +// Invokes the start function when website is loaded +start(); // All the event listeners -restartButton.addEventListener('click', start); -filterButton.addEventListener('click', () => { - checkQuestion(); -}); -dropDown.addEventListener('change', (event) => { - selectQuestion(); -}); +questions.addEventListener("change", selectQuestion); +findOutBtn.addEventListener("click", checkQuestion); +findOutBtn.addEventListener("click", count); +restartButton.addEventListener("click", start); +playAgainbtn.addEventListener("click", () => { + location.reload(); +}); \ No newline at end of file From fcb31a2b81cc8d5330f1d54f989ce0d5146cdf97 Mon Sep 17 00:00:00 2001 From: Isa Robertini Date: Fri, 8 Sep 2023 10:25:30 +0200 Subject: [PATCH 07/10] restart btn --- code/index.html | 15 ++---- code/script.js | 119 +++++++++++++++++++++++++----------------------- 2 files changed, 67 insertions(+), 67 deletions(-) diff --git a/code/index.html b/code/index.html index b08441c9..6ef401c4 100644 --- a/code/index.html +++ b/code/index.html @@ -22,17 +22,17 @@

Does the person have

- -
-

How many guess? - -

-
+
diff --git a/code/script.js b/code/script.js index 489cc97c..0672aa44 100644 --- a/code/script.js +++ b/code/script.js @@ -7,8 +7,7 @@ const winOrLose = document.getElementById("winOrLose"); const winOrLoseText = document.getElementById("winOrLoseText"); const playAgainbtn = document.getElementById("playAgain"); const pText = document.getElementById("counter"); -const winAudio = document.getElementById("win"); -const loseAudio = document.getElementById("lose"); + // Array with all the characters, as objects const CHARACTERS = [ @@ -235,8 +234,7 @@ const generateBoard = () => { const setSecret = () => { secret = charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)]; - // console.log(charactersInPlay.length); => 24 - console.log(secret); + //console.log(secret); }; // This function to start (and restart) the game @@ -268,70 +266,76 @@ const selectQuestion = () => { 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 + //array that stores the characters that matches the criteria, when keep is true + const matchingCharacters = []; + + //for of loop, chacking which characters of charachertsInPlay should be included (if they matched the conditions) + for (const character of charactersInPlay) { + let shouldKeep = false; + + // if hair OR eyes AND characters category equals the choosen value, then ShouldKeep is set to true, indicates that the characters should be kept. + if ((category === 'hair' || category === 'eyes') && character[category] === value) { + shouldKeep = true; + } else if ((category === 'accessories' || category === 'other') && character[category].includes(value)) { + shouldKeep = true; + } + + //if keep AND shouldKeep is true OR if keep AND should keep is NOT true, then push characters to matchingCharacters. + if ((keep && shouldKeep) || (!keep && !shouldKeep)) { - if (category === "hair" || category === "eyes") { - keep = secret[category] === value; - } else if (category === "accessories" || category === "other") { - keep = secret[category].includes(value); + matchingCharacters.push(character); + } } - filterCharacters(keep); + + //filter the board + filterCharacters(keep, matchingCharacters); }; -// It'll filter the characters array and redraw the game board. -const filterCharacters = (keep) => { +//if keep is true keep characters, if keep is false remove characters +const filterCharacters = (keep, matchingCharacters) => { console.log(keep); const { category, value } = currentQuestion; - // Show the correct alert message for different categories - if (category === "accessories") { + + // alert a response based on the users guess + if (category === 'accessories') { if (keep) { - alert( - `Yes, the person wears ${value}! Keep all people that wears ${value}` - ); + alert(`Yes, the person wears ${value}! Keep all people that wear ${value}`); } else { - alert( - `No, the person doesn't wear ${value}! Remove all people that wears ${value}` - ); + alert(`No, the person doesn't wear ${value}! Remove all people that wear ${value}`); } - } else if (category === "other") { + } else if (category === 'other') { if (keep) { - alert(`Yes, the person is ${value}! Keep all people that us ${value}`); + alert(`Yes, the person is ${value}! Keep all people that are ${value}`); } else { - alert( - `No, the person is not a ${value}! Remove all people that are ${value}s` - ); + alert(`No, the person is not ${value}! Remove all people that are ${value}`); } } else { if (keep) { - alert( - `Yeah😁 the person has ${value} ${category}! Keep all people with ${value} ${category}` - ); + alert(`Yes, the person has ${value} ${category}! Keep all people with ${value} ${category}`); } else { - alert( - `No,the person doesn't have ${value} ${category}! Remove all people with ${value} ${category}` - ); + 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. - if (category === "hair" || category === "eyes") { + // 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 ); } - } else if (category === "accessiaors" || category === "other") { + // 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) @@ -339,33 +343,31 @@ const filterCharacters = (keep) => { } } - // Invoke a function to redraw the board with the remaining people. + //filter the board generateBoard(keep); }; + + // when clicking guess, the player first have to confirm that they want to make a guess. -/*const guess = (personToConfirm) => { +const guess = (personToConfirm) => { // store the interaction from the player in a variable. - let confirmGuess = confirm( - `Are you sure you want to guess on ${personToConfirm}` - ); - // 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 you confirm, this function is invoked +// If user wants to guess, invoke response const checkMyGuess = (personToCheck) => { - console.log(personToCheck); - console.log(secret.name); + // 1. Check if the personToCheck is the same as the secret person's name if (personToCheck === secret.name) { - winOrLoseText.innerHTML = `Yeah 🎉 Congrats \n you won! 👏 `; - winAudio.play(); + winOrLoseText.innerHTML = ` Congratulation, you guessed right! you're a winner'!`; } else { - winOrLoseText.innerHTML = `Noooo! You gessed Wrong. Game over😤 `; - loseAudio.play(); + 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 @@ -373,11 +375,15 @@ const checkMyGuess = (personToCheck) => { // 4. Hide the game board board.innerHTML = ""; }; -// Function to increment the counter and display the count -const count = () => { - guessCount++; - pText.innerHTML = guessCount; -};*/ + +//restart button, asking the user to confirm if restarting +const restart = () => { + let userConfirmed = confirm(`Are you sure you want to restart?`); + if (userConfirmed) { + location.reload(); + } +} + // Invokes the start function when website is loaded start(); @@ -386,8 +392,7 @@ start(); questions.addEventListener("change", selectQuestion); findOutBtn.addEventListener("click", checkQuestion); -findOutBtn.addEventListener("click", count); -restartButton.addEventListener("click", start); +restartButton.addEventListener("click", restart) playAgainbtn.addEventListener("click", () => { location.reload(); }); \ No newline at end of file From 36f07d04755f71e359df3e406dd67f174802c4c1 Mon Sep 17 00:00:00 2001 From: Isa Robertini Date: Sun, 10 Sep 2023 17:48:34 +0200 Subject: [PATCH 08/10] added s in smokers --- code/script.js | 41 +++++++++++++++++++++-------------------- code/style.css | 4 +++- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/code/script.js b/code/script.js index 0672aa44..e4a9e8bb 100644 --- a/code/script.js +++ b/code/script.js @@ -6,7 +6,7 @@ const findOutBtn = document.getElementById("filter"); const winOrLose = document.getElementById("winOrLose"); const winOrLoseText = document.getElementById("winOrLoseText"); const playAgainbtn = document.getElementById("playAgain"); -const pText = document.getElementById("counter"); + // Array with all the characters, as objects @@ -215,8 +215,8 @@ let guessCount = 0; //Initialize the counter // Draw the game board const generateBoard = () => { - board.innerHTML = ""; - charactersInPlay.forEach((person) => { + board.innerHTML = ""; //clears the board + charactersInPlay.forEach((person) => { //start forEach loop board.innerHTML += `

${person.name}

@@ -237,10 +237,10 @@ const setSecret = () => { //console.log(secret); }; -// This function to start (and restart) the game +//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; //assigning the data of CHARACTERS into CharactersInPlay variable // What else should happen when we start the game? generateBoard(); setSecret(); @@ -249,38 +249,39 @@ const start = () => { // setting the currentQuestion object when you select something in the dropdown const selectQuestion = () => { const category = questions.options[questions.selectedIndex].parentNode.label; - console.log(category); + //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 = questions.options[questions.selectedIndex].value; - console.log(value); + //onsole.log(value); - currentQuestion = { + currentQuestion = {//assign the category and value to the object currentQuestion category: category, value: value, }; }; -// This function should be invoked when you click on 'Find Out' button. -const checkQuestion = () => { +// checkQuestion function should be invoked when you click on 'Find Out' button. +const checkQuestion = (currentQuestion) => { const { category, value } = currentQuestion; - //array that stores the characters that matches the criteria, when keep is true + //Function array that stores the characters that matches the criteria, when keep is true const matchingCharacters = []; //for of loop, chacking which characters of charachertsInPlay should be included (if they matched the conditions) for (const character of charactersInPlay) { let shouldKeep = false; - // if hair OR eyes AND characters category equals the choosen value, then ShouldKeep is set to true, indicates that the characters should be kept. + // if hair OR eyes AND characters category equals the choosen value, then ShouldKeep is set to true, keep. if ((category === 'hair' || category === 'eyes') && character[category] === value) { shouldKeep = true; + //if accessories OR other AND characters category includes the choosen value, keep. } else if ((category === 'accessories' || category === 'other') && character[category].includes(value)) { shouldKeep = true; } - //if keep AND shouldKeep is true OR if keep AND should keep is NOT true, then push characters to matchingCharacters. + //if keep AND shouldKeep is true OR if keep AND shouldKeep is NOT true, then push characters to matchingCharacters. if ((keep && shouldKeep) || (!keep && !shouldKeep)) { matchingCharacters.push(character); @@ -291,12 +292,12 @@ const checkQuestion = () => { filterCharacters(keep, matchingCharacters); }; -//if keep is true keep characters, if keep is false remove characters +// if keep is true or false, alert a response based on the users guess const filterCharacters = (keep, matchingCharacters) => { console.log(keep); const { category, value } = currentQuestion; - // alert a response based on the users guess + if (category === 'accessories') { if (keep) { alert(`Yes, the person wears ${value}! Keep all people that wear ${value}`); @@ -305,9 +306,9 @@ const filterCharacters = (keep, matchingCharacters) => { } } else if (category === 'other') { if (keep) { - alert(`Yes, the person is ${value}! Keep all people that are ${value}`); + 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}`); + alert(`No, the person is not ${value}! Remove all people that are ${value}s`); } } else { if (keep) { @@ -361,10 +362,10 @@ const guess = (personToConfirm) => { }; // If user wants to guess, invoke response -const checkMyGuess = (personToCheck) => { +const checkMyGuess = (checkPerson) => { // 1. Check if the personToCheck is the same as the secret person's name - if (personToCheck === secret.name) { + if (checkPerson === secret.name) { winOrLoseText.innerHTML = ` Congratulation, you guessed right! you're a winner'!`; } else { winOrLoseText.innerHTML = `No! Wrong guess, game over! `; @@ -378,7 +379,7 @@ const checkMyGuess = (personToCheck) => { //restart button, asking the user to confirm if restarting const restart = () => { - let userConfirmed = confirm(`Are you sure you want to restart?`); + let userConfirmed = confirm(`Are you sure you want to restart the game?`); if (userConfirmed) { location.reload(); } 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 From 2c8d889640bed22a77bbca6947e735f63201133f Mon Sep 17 00:00:00 2001 From: Isa Robertini Date: Sun, 10 Sep 2023 17:52:04 +0200 Subject: [PATCH 09/10] Update README.md --- README.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) 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/ From b7ccfb6f0042eb62353d0db8a7970ca3b95394a2 Mon Sep 17 00:00:00 2001 From: Isa Robertini Date: Wed, 20 Sep 2023 13:25:00 +0200 Subject: [PATCH 10/10] fixed bug --- code/script.js | 94 +++++++++++++++++++++++--------------------------- 1 file changed, 44 insertions(+), 50 deletions(-) diff --git a/code/script.js b/code/script.js index e4a9e8bb..f74e1022 100644 --- a/code/script.js +++ b/code/script.js @@ -211,12 +211,11 @@ 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; -let guessCount = 0; //Initialize the counter // Draw the game board const generateBoard = () => { - board.innerHTML = ""; //clears the board - charactersInPlay.forEach((person) => { //start forEach loop + board.innerHTML = ""; + charactersInPlay.forEach((person) => { board.innerHTML += `

${person.name}

@@ -237,10 +236,10 @@ const setSecret = () => { //console.log(secret); }; -//function to start 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; //assigning the data of CHARACTERS into CharactersInPlay variable + charactersInPlay = CHARACTERS; // What else should happen when we start the game? generateBoard(); setSecret(); @@ -254,72 +253,67 @@ const selectQuestion = () => { // We also need a variable that stores the actual value of the question we've selected. const value = questions.options[questions.selectedIndex].value; - //onsole.log(value); + //console.log(value); - currentQuestion = {//assign the category and value to the object currentQuestion + currentQuestion = { category: category, value: value, }; }; -// checkQuestion function should be invoked when you click on 'Find Out' button. -const checkQuestion = (currentQuestion) => { +// This function should be invoked when you click on 'Find Out' button. +const checkQuestion = () => { const { category, value } = currentQuestion; - //Function array that stores the characters that matches the criteria, when keep is true - const matchingCharacters = []; - - //for of loop, chacking which characters of charachertsInPlay should be included (if they matched the conditions) - for (const character of charactersInPlay) { - let shouldKeep = false; - - // if hair OR eyes AND characters category equals the choosen value, then ShouldKeep is set to true, keep. - if ((category === 'hair' || category === 'eyes') && character[category] === value) { - shouldKeep = true; - //if accessories OR other AND characters category includes the choosen value, keep. - } else if ((category === 'accessories' || category === 'other') && character[category].includes(value)) { - shouldKeep = true; - } - - //if keep AND shouldKeep is true OR if keep AND shouldKeep is NOT true, then push characters to matchingCharacters. - if ((keep && shouldKeep) || (!keep && !shouldKeep)) { + // 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 - matchingCharacters.push(character); - } + if (category === "hair" || category === "eyes") { + keep = secret[category] === value; + } else if (category === "accessories" || category === "other") { + keep = secret[category].includes(value); } - - //filter the board - filterCharacters(keep, matchingCharacters); + // Then invoke filterCharacters + filterCharacters(keep); }; -// if keep is true or false, alert a response based on the users guess -const filterCharacters = (keep, matchingCharacters) => { +//filter characters array and redraw the board. +const filterCharacters = (keep) => { console.log(keep); const { category, value } = currentQuestion; - - - if (category === 'accessories') { + // Show the correct alert message for different categories + if (category === "accessories") { if (keep) { - alert(`Yes, the person wears ${value}! Keep all people that wear ${value}`); + 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 wear ${value}`); + alert( + `No, the person doesn't wear ${value}! Remove all people that wears ${value}` + ); } - } else if (category === 'other') { + } else if (category === "other") { if (keep) { - alert(`Yes, the person is ${value}! Keep all people that are ${value}s`); + 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`); + alert( + `No, the person is not ${value}! Remove all people that are ${value}'s` + ); } } else { if (keep) { - alert(`Yes, the person has ${value} ${category}! Keep all people with ${value} ${category}`); + alert( + `Yes, the person has ${value} ${category}! Keep all people with ${value} ${category}` + ); } else { - alert(`No, the person doesn't have ${value} ${category}! Remove all people with ${value} ${category}`); + alert( + `No, the person doesn't have ${value} ${category}! Remove all people with ${value} ${category}` + ); } } // if hair OR eyes matches the value(keep is true) keep - if (category === 'hair' || category === 'eyes') { + if (category === "hair" || category === "eyes") { if (keep) { charactersInPlay = charactersInPlay.filter( (person) => person[category] === value @@ -331,7 +325,7 @@ const filterCharacters = (keep, matchingCharacters) => { ); } // if character has a value that includes accessories OR other (keep is true) keep - } else if (category === 'accessories' || category === 'other') { + } else if (category === "accessories" || category === "other") { if (keep) { charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value) @@ -344,16 +338,15 @@ const filterCharacters = (keep, matchingCharacters) => { } } - //filter the board + // 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. - let confirmGuess = confirm - (`Are you sure you want to guess on ${personToConfirm}?`); + let confirmGuess = confirm( + `Are you sure you want to guess on ${personToConfirm}?` + ); // If the player wants to guess, invoke the checkMyGuess function. if (confirmGuess) { @@ -361,6 +354,7 @@ const guess = (personToConfirm) => { } }; + // If user wants to guess, invoke response const checkMyGuess = (checkPerson) => {