From 0022587b77050b4f8b55648d1f022f78acbe4dec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmikaeloling=E2=80=9D?= <“mikael.oling@gmail.com”> Date: Thu, 7 Sep 2023 19:51:15 +0300 Subject: [PATCH 01/14] board loads and cards are displayed with button on hover --- code/index.html | 2 +- code/script.js | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/code/index.html b/code/index.html index 0479b061..32f14e7a 100644 --- a/code/index.html +++ b/code/index.html @@ -3,7 +3,7 @@ - Project Name + Guess who project { const start = () => { // Here we're setting charactersInPlay array to be all the characters to start with charactersInPlay = CHARACTERS + charactersInPlay.forEach((person) => { + board.innerHTML += ` +
+

${person.name}

+ ${person.name}/ +
+ Guess on ${person.name}? + +
+ ` + + }) // What else should happen when we start the game? } @@ -323,3 +335,4 @@ start() // All the event listeners restartButton.addEventListener('click', start) +board.addEventListener('click', start) From 7799429656a8d4524711e782dbc35038939b55dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmikaeloling=E2=80=9D?= <“mikael.oling@gmail.com”> Date: Thu, 7 Sep 2023 20:46:30 +0300 Subject: [PATCH 02/14] testing --- code/script.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/code/script.js b/code/script.js index e14357dc..3ffd73a0 100644 --- a/code/script.js +++ b/code/script.js @@ -227,21 +227,22 @@ const setSecret = () => { secret = charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)] } + // This function to start (and restart) the game -const start = () => { +function start () { // Here we're setting charactersInPlay array to be all the characters to start with charactersInPlay = CHARACTERS charactersInPlay.forEach((person) => { board.innerHTML += `

${person.name}

- ${person.name}/ + ${person.name}/
Guess on ${person.name}?
` - + }) // What else should happen when we start the game? } @@ -318,6 +319,7 @@ const filterCharacters = (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. + const personChecked = (`${person.name}`) // remember the confirm() ? // If the player wants to guess, invoke the checkMyGuess function. } @@ -336,3 +338,6 @@ start() // All the event listeners restartButton.addEventListener('click', start) board.addEventListener('click', start) + +console.log('hello') +console.log('hello') \ No newline at end of file From 2a684ed47d01e5d38eef4b093c6d118a67a0ee96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmikaeloling=E2=80=9D?= <“mikael.oling@gmail.com”> Date: Fri, 8 Sep 2023 00:19:06 +0300 Subject: [PATCH 03/14] line 279-302 --- code/script.js | 38 +++++++++++++++++++++++++++++++------- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/code/script.js b/code/script.js index 3ffd73a0..6b519ad5 100644 --- a/code/script.js +++ b/code/script.js @@ -253,11 +253,12 @@ const selectQuestion = () => { // 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 } } @@ -293,16 +294,18 @@ const filterCharacters = (keep) => { // Similar to the one above } else { if (keep) { + alert(`Yes, the person has ${person.hair} hair! Keep all people with ${person.hair} hair`) // alert popup that says something like: "Yes, the person has yellow hair! Keep all people with yellow hair" } else { + alert(`No, the person doesnt have ${person.hair} hair! Remove all people with ${person.hair} hair`) // 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 : + + /* for 'hair' and 'eyes' : charactersInPlay = charactersInPlay.filter((person) => person[attribute] === value) or charactersInPlay = charactersInPlay.filter((person) => person[attribute] !== value) @@ -314,18 +317,39 @@ const filterCharacters = (keep) => { */ // 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. - const personChecked = (`${person.name}`) - // remember the confirm() ? + const personCheck = alert(`Do you think it is` `${person.name}``?`) + + confirm(personCheck); + { if (personCheck === true) { + checkMyGuess(personToConfirm) + } else { + alert(`Ok, then keep playing!`) + } + } // This function should be invoked when you click on the button 'Guess'. // If the player wants to guess, invoke the checkMyGuess function. } // If you confirm, this function is invoked const checkMyGuess = (personToCheck) => { + personToCheck = secret.name, + alert(`You guessed on ${personToCheck}!`); + //win or lose section should be displayed + const winOrLoseText = document.getElementById('winOrLoseText'); + const winOrLoseSection = document.getElementById('winOrLoseSection'); + winOrLoseSection.style.display = 'block'; + board.style.display = 'none'; + if (personToCheck === secret.name) { + winOrLoseText.innerHTML = `You guessed right! It was ${personToCheck}!`; + } else { + winOrLoseText.innerHTML = `You guessed wrong! It was ${secret.name}!`; + } + // 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 @@ -337,7 +361,7 @@ start() // All the event listeners restartButton.addEventListener('click', start) -board.addEventListener('click', start) +//board.addEventListener('click', start) console.log('hello') console.log('hello') \ No newline at end of file From 6c86cbe859751d19426bccd80ab235109acde170 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmikaeloling=E2=80=9D?= <“mikael.oling@gmail.com”> Date: Fri, 8 Sep 2023 00:28:37 +0300 Subject: [PATCH 04/14] line 233, fixed so restart doesnt duplicate board --- code/script.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 6b519ad5..127a317a 100644 --- a/code/script.js +++ b/code/script.js @@ -230,6 +230,7 @@ const setSecret = () => { // This function to start (and restart) the game function start () { + board.innerHTML = '' // Here we're setting charactersInPlay array to be all the characters to start with charactersInPlay = CHARACTERS charactersInPlay.forEach((person) => { @@ -239,7 +240,7 @@ function start () { ${person.name}/
Guess on ${person.name}? - +
` @@ -362,6 +363,8 @@ start() // All the event listeners restartButton.addEventListener('click', start) //board.addEventListener('click', start) +guess.addEventListener('click', checkMyGuess) +//questions.addEventListener('change', selectQuestion) console.log('hello') console.log('hello') \ No newline at end of file From 77fdb6c43dbbefa78762a613d791514ad3eb9a34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmikaeloling=E2=80=9D?= <“mikael.oling@gmail.com”> Date: Fri, 8 Sep 2023 00:46:49 +0300 Subject: [PATCH 05/14] edit html, added options to dropdowns --- code/script.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/code/script.js b/code/script.js index 127a317a..b7aa04cd 100644 --- a/code/script.js +++ b/code/script.js @@ -240,12 +240,13 @@ function start () { ${person.name}/
Guess on ${person.name}? - +
` - }) // What else should happen when we start the game? + generateBoard() + setSecret() } // setting the currentQuestion object when you select something in the dropdown @@ -306,7 +307,7 @@ const filterCharacters = (keep) => { // Determine what is the category // filter by category to keep or remove based on the keep variable. - /* for 'hair' and 'eyes' : + for hair and eyes : charactersInPlay = charactersInPlay.filter((person) => person[attribute] === value) or charactersInPlay = charactersInPlay.filter((person) => person[attribute] !== value) @@ -315,10 +316,11 @@ const filterCharacters = (keep) => { 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. @@ -364,6 +366,8 @@ start() restartButton.addEventListener('click', start) //board.addEventListener('click', start) guess.addEventListener('click', checkMyGuess) +//add eventlistener to Guess button +guess.addEventListener('click', guess) //questions.addEventListener('change', selectQuestion) console.log('hello') From cab52cb2c4558b74c4d2d37e66238977ab66df98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmikaeloling=E2=80=9D?= <“mikael.oling@gmail.com”> Date: Fri, 8 Sep 2023 01:05:32 +0300 Subject: [PATCH 06/14] line 337 --- code/index.html | 11 +++++++++++ code/script.js | 30 +++++++++++++++++++----------- 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/code/index.html b/code/index.html index 32f14e7a..681eca3a 100644 --- a/code/index.html +++ b/code/index.html @@ -26,14 +26,25 @@

Does the person have

+ + + + + + + + + + + diff --git a/code/script.js b/code/script.js index b7aa04cd..637e2a1b 100644 --- a/code/script.js +++ b/code/script.js @@ -260,7 +260,7 @@ const selectQuestion = () => { currentQuestion = { category: category, - value: value + value: attribute } } @@ -307,26 +307,34 @@ const filterCharacters = (keep) => { // 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) + newFunction() + // filter by category to keep or remove based on the keep variable. - 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() + + function newFunction() { + 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)) + document.getElementById('board').innerHTML = '' + 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. - const personCheck = alert(`Do you think it is` `${person.name}``?`) + const personCheck = confirm(`Do you think it is ${person.name} ?`) confirm(personCheck); { if (personCheck === true) { @@ -365,7 +373,7 @@ start() // All the event listeners restartButton.addEventListener('click', start) //board.addEventListener('click', start) -guess.addEventListener('click', checkMyGuess) +//guess.addEventListener('click', checkMyGuess) //add eventlistener to Guess button guess.addEventListener('click', guess) //questions.addEventListener('change', selectQuestion) From 347ef3d8f1a8f81514baa277d761c1fca224f263 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmikaeloling=E2=80=9D?= <“mikael.oling@gmail.com”> Date: Fri, 8 Sep 2023 19:35:37 +0300 Subject: [PATCH 07/14] doms --- code/script.js | 92 ++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 70 insertions(+), 22 deletions(-) diff --git a/code/script.js b/code/script.js index 637e2a1b..4e5ff554 100644 --- a/code/script.js +++ b/code/script.js @@ -1,10 +1,15 @@ // 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') //board is the id of the div in html file where the cards are displayed +const questions = document.getElementById('questions') //questions is the id of the select element in html file +const restartButton = document.getElementById('restart') //restart is the id of the button element in html file +const findOutButton = document.getElementById('filter') //filter is the id of the button element in html file +const winOrLoseSection = document.getElementById('winOrLoseSection') //winOrLoseSection is the id of the section element in html file +const winOrLoseText = document.getElementById('winOrLoseText') //winOrLoseText is the id of the p element in html file +const guess = document.getElementById('guess') //guess is the id of the button element in html file +const playAgain = document.getElementById('playAgain') //playAgain is the id of the button element in html file // Array with all the characters, as objects -const CHARACTERS = [ +const CHARACTERS = [ { name: 'Jabala', img: 'images/jabala.svg', @@ -199,11 +204,17 @@ const CHARACTERS = [ other: [] }, ] + +console.log("hello") // Global variables -let secret -let currentQuestion -let charactersInPlay +let secret // The current secret person + +let currentQuestion = { + category: '', + value: '' +} +let charactersInPlay = CHARACTERS // To be able to filter the characters in play // Draw the game board const generateBoard = () => { @@ -267,20 +278,25 @@ const selectQuestion = () => { // This function should be invoked when you click on 'Find Out' button. 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') { + charactersInPlay = charactersInPlay.filter((person) => person[category] === value) } else if (category === 'accessories' || category === 'other') { + charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) + } } // 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) { @@ -293,8 +309,16 @@ const filterCharacters = (keep) => { ) } } else if (category === 'other') { - // Similar to the one above - } else { + if (keep) { + alert( + `Yes, the person is a ${value}! Keep all people that are ${value}` + ) + } else { + alert( + `No, the person is not a ${value}! Remove all people that are ${value}` + ) + } + } else if (category === 'hair') { if (keep) { alert(`Yes, the person has ${person.hair} hair! Keep all people with ${person.hair} hair`) // alert popup that says something like: "Yes, the person has yellow hair! Keep all people with yellow hair" @@ -302,12 +326,40 @@ const filterCharacters = (keep) => { alert(`No, the person doesnt have ${person.hair} hair! Remove all people with ${person.hair} hair`) // alert popup that says something like: "No, the person doesnt have yellow hair! Remove all people with yellow hair" } + } else if (category === 'eyes') { + if (keep) { + alert(`Yes, the person has ${person.eyes} eyes! Keep all people with ${person.eyes} eyes`) + // alert popup that says something like: "Yes, the person has yellow eyes! Keep all people with yellow eyes" + } else { + alert(`No, the person doesnt have ${person.eyes} eyes! Remove all people with ${person.eyes} eyes`) + // alert popup that says something like: "No, the person doesnt have yellow eyes! Remove all people with yellow eyes" + } + } else if (category === 'other') { + if (keep) { + alert(`Yes, the person is a ${person.other}! Keep all people that are ${person.other}`) + // alert popup that says something like: "Yes, the person is a smoker! Keep all people that are smokers" + } else { + alert(`No, the person is not a ${person.other}! Remove all people that are ${person.other}`) + // alert popup that says something like: "No, the person is not a smoker! Remove all people that are not smokers" + } + } else if (category === 'accessories') { + if (keep) { + alert(`Yes, the person wears ${person.accessories}! Keep all people that wears ${person.accessories}`) + // alert popup that says something like: "Yes, the person wears glasses! Keep all people that wears glasses" + } else { + alert(`No, the person doesnt wear ${person.accessories}! Remove all people that wears ${person.accessories}`) + // alert popup that says something like: "No, the person doesnt wear glasses! Remove all people that doesnt wear glasses" + } + + } } + console.log(checkQuestion) + console.log(filterCharacters) // Determine what is the category // filter by category to keep or remove based on the keep variable. - newFunction() + // newFunction() // filter by category to keep or remove based on the keep variable. @@ -316,8 +368,8 @@ const filterCharacters = (keep) => { generateBoard() - function newFunction() { - for (hair; ;) and(eyes) + /* function newFunction() { + for (hair) and(eyes) charactersInPlay = charactersInPlay.filter((person) => person[attribute] === value) or charactersInPlay = charactersInPlay.filter((person) => person[attribute] !== value) @@ -329,10 +381,10 @@ const filterCharacters = (keep) => { document.getElementById('board').innerHTML = '' generateBoard() } -} +*/ // when clicking guess, the player first have to confirm that they want to make a guess. -const guess = (personToConfirm) => { +const guessPerson = (personToConfirm) => { // store the interaction from the player in a variable. const personCheck = confirm(`Do you think it is ${person.name} ?`) @@ -372,11 +424,7 @@ start() // All the event listeners restartButton.addEventListener('click', start) -//board.addEventListener('click', start) -//guess.addEventListener('click', checkMyGuess) -//add eventlistener to Guess button -guess.addEventListener('click', guess) -//questions.addEventListener('change', selectQuestion) - -console.log('hello') -console.log('hello') \ No newline at end of file +guess.addEventListener('click', guess) //add eventlistener to Guess button +questions.addEventListener('change', selectQuestion) //add eventlistener to questions +findOutButton.addEventListener('click', checkQuestion) //add eventlistener to Find Out button +filterCharacters.addEventListener('click', filterCharacters) //add eventlistener to filterCharacters \ No newline at end of file From a7e290764f5359f0c9a69e95a1b6ddef7e0454b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmikaeloling=E2=80=9D?= <“mikael.oling@gmail.com”> Date: Fri, 8 Sep 2023 20:56:28 +0300 Subject: [PATCH 08/14] uhg --- code/index.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/code/index.html b/code/index.html index 681eca3a..d0ac3d97 100644 --- a/code/index.html +++ b/code/index.html @@ -23,6 +23,8 @@

Does the person have

- +
@@ -66,6 +66,8 @@

Does the person have

src="images/guess-who-bubble.png" alt="Guess Who" /> + +

From 88fe915c84fa01a2213789e5a19561928a7758d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmikaeloling=E2=80=9D?= <“mikael.oling@gmail.com”> Date: Sat, 9 Sep 2023 18:29:34 +0300 Subject: [PATCH 09/14] made the code work until play again --- code/index.html | 2 +- code/script.js | 234 +++++++++++++++++++++--------------------------- 2 files changed, 104 insertions(+), 132 deletions(-) diff --git a/code/index.html b/code/index.html index d0ac3d97..62a3e72d 100644 --- a/code/index.html +++ b/code/index.html @@ -12,7 +12,7 @@ + +
diff --git a/code/script.js b/code/script.js index 059471ab..2ec11b94 100644 --- a/code/script.js +++ b/code/script.js @@ -14,6 +14,40 @@ const playAgainButton = document.getElementById('playAgain') //playAgain is the const findOutButton = document.getElementById('filter') //filter is the id of the button element in html file +//declaring a clock counter for the website, it starts at 2 minutes and counts down to 0 +// In minute format, sarting at 02:00 +let time = 120 + + + + +// Function to format the time as "MM:SS" +function formatTime(seconds) { + const minutes = Math.floor(seconds / 60); + const remainingSeconds = seconds % 60; + return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`; +} +/* This code will display the initial time as "02:00" and then count down in the "MM:SS" format until it reaches "00:00". When it reaches "00:00", you can add your logic to handle the end of the timer. +*/ + +// When timer starts, display the starting time + +document.getElementById("timer").innerHTML = formatTime(time) +let timer = setInterval(function() { + time--; // decrease time by 1 + if (time <= 0) { + clearInterval(timer) + alert("You lost! The correct person was " + secret.name + "."); + winOrLose.style.display = 'flex'; + board.style.display = 'none'; + winOrLoseText.innerHTML = `You lost! The correct person was ${secret.name}.` + } + document.getElementById("timer").innerHTML = formatTime(time); + // update the element where the timer will be displayed +}, 1000)//1000ms = 1s + + + // Array with all the characters, as objects const CHARACTERS = [ @@ -251,6 +285,7 @@ const start = () => { //Game board should be rendered on the screen generateBoard(); setSecret(); + //startTimer(); // can't get this to work together with findout dropdown filter } // setting the currentQuestion object when you select something in the dropdown @@ -399,6 +434,7 @@ playAgainButton.addEventListener('click', start) + // 1. Check if the personToCheck is the same as the secret person's name //secret.name is the name of the secret person // 2. Set a Message to show in the win or lose section accordingly From 9c0a7912328d9415c5cf659bc87388f12deba244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmikaeloling=E2=80=9D?= <“mikael.oling@gmail.com”> Date: Sun, 10 Sep 2023 19:23:06 +0300 Subject: [PATCH 13/14] readme --- README.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 60f55e53..79b9afc2 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,10 @@ # 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. +A 'guess who' game that filters the cards based on user selection. The game selects a new "secret person" every time new board is loaded and you win by correctly guessing who it is. ## 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? +The problem for me was to understand categories, values and parameters in the objects. I had to rely on coursemates code to debug and get it working (almost completely). At the time of submission the there is no working Timer-reset function when game is restarted (only on page refresh). ## 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. From 58062bbd5c53dda08c0fd774e6d6850d65b3a12a Mon Sep 17 00:00:00 2001 From: mikaeloling <140322170+mikaeloling@users.noreply.github.com> Date: Tue, 12 Sep 2023 11:06:08 +0300 Subject: [PATCH 14/14] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 79b9afc2..986b17ca 100644 --- a/README.md +++ b/README.md @@ -7,4 +7,5 @@ A 'guess who' game that filters the cards based on user selection. The game sele The problem for me was to understand categories, values and parameters in the objects. I had to rely on coursemates code to debug and get it working (almost completely). At the time of submission the there is no working Timer-reset function when game is restarted (only on page refresh). ## View it live +https://mellifluous-smakager-f98424.netlify.app/