From 8a2ca666808fa1e651afc546843f4b09aa0c5eb7 Mon Sep 17 00:00:00 2001 From: Frida Kristiansson Date: Wed, 6 Sep 2023 15:01:38 +0200 Subject: [PATCH 01/10] Step 1 completed - the starting function now has a gererateBoard-function that loads all the characters and setSecret-function that decides which person is the who. --- code/index.html | 15 +++++++++++---- code/script.js | 3 ++- instructions.md | 33 ++++++++++++++++++++++----------- 3 files changed, 35 insertions(+), 16 deletions(-) diff --git a/code/index.html b/code/index.html index 0479b061..17713853 100644 --- a/code/index.html +++ b/code/index.html @@ -3,7 +3,7 @@ - Project Name + Frida's Guess WHO? Does the person have + diff --git a/code/script.js b/code/script.js index 58f18915..ba1e1fc1 100644 --- a/code/script.js +++ b/code/script.js @@ -3,6 +3,8 @@ const board = document.getElementById('board') const questions = document.getElementById('questions') const restartButton = document.getElementById('restart') const findOutButton = document.getElementById('filter') +const winOrLoseBoard = document.getElementById('winOrLose') +const winOrLoseText = document.getElementById('winOrLoseText') // Array with all the characters, as objects const CHARACTERS = [ @@ -309,7 +311,7 @@ const filterCharacters = (keep) => { } } - // Determine what is the category + // Determine what is the category // filter by category to keep or remove based on the keep variable. if (category === 'accessories' || category === 'other'){ if (keep) charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) @@ -336,8 +338,6 @@ You can keep playing instead`) // If you confirm, this function is invoked const checkMyGuess = (personToCheck) => { - console.log(secret.name) - console.log(personToCheck) // Check if the personToCheck is the same as the secret person's name if (secret.name === personToCheck) { alert( @@ -349,12 +349,14 @@ ${secret.name} was the secret person!`) alert( `Oh noooo 🤦🏼‍♀️ ${personToCheck} was not the secret person!`) - - } // 3. Show the win or lose section + winOrLoseBoard.style.display = "flex" + if (secret.name === personToCheck) winOrLoseText.innerHTML = "✨ WIN! YOU ARE A BAD ASS GUESSER ✨" + else winOrLoseText.innerHTML = "☠️ YOU LOST... ☠️" // 4. Hide the game board + board.style.display = "none" } // Invokes the start function when website is loaded From 34d7e0bf61b1c90af76839220ff1484a86f9e543 Mon Sep 17 00:00:00 2001 From: Frida Kristiansson Date: Fri, 8 Sep 2023 16:39:00 +0200 Subject: [PATCH 07/10] The bonus step was completed. The game restarts once the 'play again'-button is pressed (shown on the win-or-lose board) --- code/script.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index ba1e1fc1..b871a2b9 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') const findOutButton = document.getElementById('filter') +const playAgainButton = document.getElementById('playAgain') const winOrLoseBoard = document.getElementById('winOrLose') const winOrLoseText = document.getElementById('winOrLoseText') @@ -232,6 +233,11 @@ const setSecret = () => { // This function to start (and restart) the game const start = () => { + //Making sure the board is "re-set" before starting the game: + winOrLoseBoard.style.display = "none" + winOrLoseText.innerHTML = "" + board.style.display = "flex" + // Here we're setting charactersInPlay array to be all the characters to start with charactersInPlay = CHARACTERS //generate the cards to the coard @@ -353,7 +359,7 @@ ${secret.name} was the secret person!`) // 3. Show the win or lose section winOrLoseBoard.style.display = "flex" - if (secret.name === personToCheck) winOrLoseText.innerHTML = "✨ WIN! YOU ARE A BAD ASS GUESSER ✨" + if (secret.name === personToCheck) winOrLoseText.innerHTML = "✨ WIN! \nYOU ARE A BAD ASS GUESSER ✨" else winOrLoseText.innerHTML = "☠️ YOU LOST... ☠️" // 4. Hide the game board board.style.display = "none" @@ -364,5 +370,6 @@ start() // All the event listeners restartButton.addEventListener('click', start) +playAgain.addEventListener('click', start) questions.addEventListener("change", selectQuestion) findOutButton.addEventListener('click', checkQuestion) \ No newline at end of file From 80991612ec02a601075a6dbf9b26ee89dece48d2 Mon Sep 17 00:00:00 2001 From: Frida Kristiansson Date: Sat, 9 Sep 2023 17:46:17 +0200 Subject: [PATCH 08/10] Added a counter to keep track of number of guesses. This is added to the question section and updates each time 'Find out'-button is pressed --- code/index.html | 2 ++ code/script.js | 8 +++++++- code/style.css | 8 ++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/code/index.html b/code/index.html index 1a6c0e16..faa422c4 100644 --- a/code/index.html +++ b/code/index.html @@ -50,6 +50,8 @@

Does the person have

+ +

diff --git a/code/script.js b/code/script.js index b871a2b9..a20d33f9 100644 --- a/code/script.js +++ b/code/script.js @@ -4,6 +4,7 @@ const questions = document.getElementById('questions') const restartButton = document.getElementById('restart') const findOutButton = document.getElementById('filter') const playAgainButton = document.getElementById('playAgain') +const guessCounter = document.getElementById('guess-counter') const winOrLoseBoard = document.getElementById('winOrLose') const winOrLoseText = document.getElementById('winOrLoseText') @@ -208,6 +209,7 @@ const CHARACTERS = [ let secret let currentQuestion let charactersInPlay +let numberOfGuesses = 0 // Draw the game board const generateBoard = () => { @@ -264,6 +266,10 @@ const selectQuestion = () => { const checkQuestion = () => { const { category, value } = currentQuestion + numberOfGuesses += 1 + console.log(numberOfGuesses) + guessCounter.innerHTML = `Number of guesses: ${numberOfGuesses}` + // 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 @@ -359,7 +365,7 @@ ${secret.name} was the secret person!`) // 3. Show the win or lose section winOrLoseBoard.style.display = "flex" - if (secret.name === personToCheck) winOrLoseText.innerHTML = "✨ WIN! \nYOU ARE A BAD ASS GUESSER ✨" + if (secret.name === personToCheck) winOrLoseText.innerHTML = "✨ WIN! \YOU ARE A BAD ASS GUESSER ✨" else winOrLoseText.innerHTML = "☠️ YOU LOST... ☠️" // 4. Hide the game board board.style.display = "none" diff --git a/code/style.css b/code/style.css index 1602adfe..a83f6911 100644 --- a/code/style.css +++ b/code/style.css @@ -19,6 +19,14 @@ h1 { color: white; } +h2 { + font-size: 18px; + font-weight: 400; + line-height: 36px; + margin: 10px 0; + color: var(--primary); +} + .question-section { width: 30%; min-height: 100vh; From d98ef43e12250b8c9a29ae08b7b977ebaec47f37 Mon Sep 17 00:00:00 2001 From: Frida Kristiansson Date: Sun, 10 Sep 2023 22:04:47 +0200 Subject: [PATCH 09/10] Changed the Read me - file --- README.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 60f55e53..f51e9b43 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ -# Project Name +# Guess who -Replace this readme with your own information about your project. +This is a project where we were creating the javascript-part of the game Guess who. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +The game "cards" were creating by an array of objects, one was randomly selected as "secret". With the help of a dropdown menu the user asks about the secret characters attributes. The characters with this attribute were filtered out or kept. Until the user guesses on a person. ## 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? +We were given a step by step approach to the problem. I followed the instructions and used console.log a lot to make sure the right values were compared and the right parameters were sent to the right functions. +I read some material on W3-school to find certain array-functions. +If I had more time I would personalise the game to include friends & family. I would also play around with the styling. Also I would add a tick to the attributes that had already been asked, so you didn't ask the same question multiple times. ## 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-frida.netlify.app/ From 7dc024699c9714f538f8257178ce755b09107c2f Mon Sep 17 00:00:00 2001 From: Frida <139373483+FridaKristian@users.noreply.github.com> Date: Sun, 26 Nov 2023 09:16:14 +0100 Subject: [PATCH 10/10] Fixed bug - now number of guesses resets when the game restarts --- code/script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index a20d33f9..a62503a3 100644 --- a/code/script.js +++ b/code/script.js @@ -235,10 +235,11 @@ const setSecret = () => { // This function to start (and restart) the game const start = () => { - //Making sure the board is "re-set" before starting the game: + //Making sure the board + variables are "re-set" before starting the game: winOrLoseBoard.style.display = "none" winOrLoseText.innerHTML = "" board.style.display = "flex" + numberOfGuesses = 0 // Here we're setting charactersInPlay array to be all the characters to start with charactersInPlay = CHARACTERS