diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 60f55e53..62fbb999 100644 --- a/README.md +++ b/README.md @@ -1,13 +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 create a version of the game Guess Who. Compared to other projects we were given quite a lot of code, and it was a different chellenge trying to understand the existing code to be able to continue it. ## 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? +Most people have different ways of coding, so it was a challenge to understand this way completely. It was important to be able to continue coding the same way. ## 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. +project-guess-who.vercel.app diff --git a/images/guess-who-bubble.png b/images/guess-who-bubble.png new file mode 100644 index 00000000..c19ee1d5 Binary files /dev/null and b/images/guess-who-bubble.png differ diff --git a/code/images/jabala.svg b/images/jabala.svg similarity index 100% rename from code/images/jabala.svg rename to images/jabala.svg diff --git a/code/images/jack.svg b/images/jack.svg similarity index 100% rename from code/images/jack.svg rename to images/jack.svg diff --git a/code/images/jacques.svg b/images/jacques.svg similarity index 100% rename from code/images/jacques.svg rename to images/jacques.svg diff --git a/code/images/jai.svg b/images/jai.svg similarity index 100% rename from code/images/jai.svg rename to images/jai.svg diff --git a/code/images/jake.svg b/images/jake.svg similarity index 100% rename from code/images/jake.svg rename to images/jake.svg diff --git a/code/images/james.svg b/images/james.svg similarity index 100% rename from code/images/james.svg rename to images/james.svg diff --git a/code/images/jana.svg b/images/jana.svg similarity index 100% rename from code/images/jana.svg rename to images/jana.svg diff --git a/code/images/jane.svg b/images/jane.svg similarity index 100% rename from code/images/jane.svg rename to images/jane.svg diff --git a/code/images/jaqueline.svg b/images/jaqueline.svg similarity index 100% rename from code/images/jaqueline.svg rename to images/jaqueline.svg diff --git a/code/images/jazebelle.svg b/images/jazebelle.svg similarity index 100% rename from code/images/jazebelle.svg rename to images/jazebelle.svg diff --git a/code/images/jean.svg b/images/jean.svg similarity index 100% rename from code/images/jean.svg rename to images/jean.svg diff --git a/code/images/jeane.svg b/images/jeane.svg similarity index 100% rename from code/images/jeane.svg rename to images/jeane.svg diff --git a/code/images/jed.svg b/images/jed.svg similarity index 100% rename from code/images/jed.svg rename to images/jed.svg diff --git a/code/images/jenni.svg b/images/jenni.svg similarity index 100% rename from code/images/jenni.svg rename to images/jenni.svg diff --git a/code/images/jeri.svg b/images/jeri.svg similarity index 100% rename from code/images/jeri.svg rename to images/jeri.svg diff --git a/code/images/jerry.svg b/images/jerry.svg similarity index 100% rename from code/images/jerry.svg rename to images/jerry.svg diff --git a/code/images/jess.svg b/images/jess.svg similarity index 100% rename from code/images/jess.svg rename to images/jess.svg diff --git a/code/images/jia.svg b/images/jia.svg similarity index 100% rename from code/images/jia.svg rename to images/jia.svg diff --git a/code/images/jocelyn.svg b/images/jocelyn.svg similarity index 100% rename from code/images/jocelyn.svg rename to images/jocelyn.svg diff --git a/code/images/jodi.svg b/images/jodi.svg similarity index 100% rename from code/images/jodi.svg rename to images/jodi.svg diff --git a/code/images/joe.svg b/images/joe.svg similarity index 100% rename from code/images/joe.svg rename to images/joe.svg diff --git a/code/images/jolee.svg b/images/jolee.svg similarity index 100% rename from code/images/jolee.svg rename to images/jolee.svg diff --git a/code/images/jon.svg b/images/jon.svg similarity index 100% rename from code/images/jon.svg rename to images/jon.svg diff --git a/code/images/jordan.svg b/images/jordan.svg similarity index 100% rename from code/images/jordan.svg rename to images/jordan.svg diff --git a/code/images/josephine.svg b/images/josephine.svg similarity index 100% rename from code/images/josephine.svg rename to images/josephine.svg diff --git a/code/images/josh.svg b/images/josh.svg similarity index 100% rename from code/images/josh.svg rename to images/josh.svg diff --git a/code/images/jude.svg b/images/jude.svg similarity index 100% rename from code/images/jude.svg rename to images/jude.svg diff --git a/code/images/julie.svg b/images/julie.svg similarity index 100% rename from code/images/julie.svg rename to images/julie.svg diff --git a/code/index.html b/index.html similarity index 54% rename from code/index.html rename to index.html index 0479b061..c64ec87a 100644 --- a/code/index.html +++ b/index.html @@ -3,45 +3,45 @@ - Project Name + Guess Who -
@@ -55,10 +55,11 @@

Does the person have

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

- + \ No newline at end of file diff --git a/code/script.js b/script.js similarity index 64% rename from code/script.js rename to script.js index 5207730c..1f7c3b45 100644 --- a/code/script.js +++ b/script.js @@ -1,10 +1,15 @@ -// All the DOM selectors stored as short variables +// All the DOM selectors + const board = document.getElementById('board') const questions = document.getElementById('questions') const restartButton = document.getElementById('restart') +const resultScreen = document.getElementById('winOrLoseSection') +const resultText= document.getElementById('winOrLoseText') +const playAgainButton = document.getElementById('playAgain') +const findOutButton = document.getElementById('filter') // Array with all the characters, as objects -const CHARACTERS = [ +const CHARACTERS = [ { name: 'Jabala', img: 'images/jabala.svg', @@ -199,13 +204,14 @@ const CHARACTERS = [ other: [] }, ] + +//Global variables +let secret; +let keep; +let currentQuestion; +let charactersInPlay; -// Global variables -let secret -let currentQuestion -let charactersInPlay - -// Draw the game board +//Generate the board const generateBoard = () => { board.innerHTML = '' charactersInPlay.forEach((person) => { @@ -221,105 +227,135 @@ const generateBoard = () => { ` }) } - -// Randomly select a person from the characters array and set as the value of the variable called secret +// Randomly select the secret person from the characters 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 - // 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 - - // 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 } + console.log(currentQuestion); } -// This function should be invoked when you click on 'Find Out' button. +// When you click "Find out" this function should start 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') { + if (secret[category].includes(value)) { + filterCharacters(true) + } else + filterCharacters(false) } else if (category === 'accessories' || category === 'other') { - + if (secret[category].includes(value)) { + filterCharacters(true) + } else + filterCharacters(false) } } -// 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) { alert( - `Yes, the person wears ${value}! Keep all people that wears ${value}` + `Yes, the person wears ${value}! Keep all people wearing ${value}.` ) + charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) } else { alert( - `No, the person doesn't wear ${value}! Remove all people that wears ${value}` + `No, the person doesn't wear ${value}! Remove all people with ${value}.` ) + charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) } } else if (category === 'other') { - // Similar to the one above + if (keep) { + alert( + `Yes, the person has a ${value}! Keep all people that have a ${value} on the board.` + ) + charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) + } else { + alert( + `No, the person doesn't have a ${value}. Let's remove everyone without a ${value}.` + ) + charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) + } + } else if (category === 'eyes') { + if (keep) { + alert( + `Yes, the person has eyes that are ${value}! Everyone with ${value} eyes should stay on the board.` + ) + charactersInPlay = charactersInPlay.filter((person) => person[category] === value) + } else { + alert( + `No, the person doesn't have eyes that are ${value}! Remove all people from the board that have ${value} eyes.` + ) + charactersInPlay = charactersInPlay.filter((person) => person[category] !== value) + } } 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} hair. Keep all people that have ${value} hair.` + ) + charactersInPlay = charactersInPlay.filter((person) => person[category] === 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} hair! We will remove all the people that have ${value} hair.` + ) + charactersInPlay = charactersInPlay.filter((person) => person[category] !== 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)) - */ - - // 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. - // remember the confirm() ? - // If the player wants to guess, invoke the checkMyGuess function. + const confirmation = confirm(`Are you sure you want to guess on ${personToConfirm}?`) + if (confirmation === true) { + checkMyGuess(personToConfirm) + } } -// 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 + winOrLose.style.display = 'flex'; + board.style.display = 'none'; + if (secret.name === personToCheck) { + winOrLoseText.innerHTML = `Good job, you were right! ${secret.name} was the secret person.` + } else { + winOrLoseText.innerHTML = `Better luck next time! The secret person was ${secret.name}.` + } +} + + +const start = () => { + charactersInPlay = CHARACTERS + board.style.display = 'flex' + winOrLose.style.display = 'none' + generateBoard(); + setSecret(); + } -// Invokes the start function when website is loaded start() // All the event listeners restartButton.addEventListener('click', start) +questions.addEventListener('change', selectQuestion) +findOutButton.addEventListener('click', checkQuestion) +playAgainButton.addEventListener('click', start) + + + diff --git a/code/style.css b/style.css similarity index 93% rename from code/style.css rename to style.css index 1602adfe..fc54106b 100644 --- a/code/style.css +++ b/style.css @@ -1,14 +1,14 @@ /* Global css variables used for colors */ :root { - --primary: #a259ff; - --secondary: #b0a6ff; + --primary: #ff59c2; + --secondary: #ffb7e4; } body { display: flex; margin: 0; - padding: 0; - font-family: 'Montserrat', sans-serif; + padding: 20px; + font-family: 'Inter', sans-serif; } h1 { @@ -34,7 +34,7 @@ select { display: block; border: none; font-size: 22px; - font-family: 'Montserrat'; + font-family: 'Inter', sans-serif; color: var(--secondary); width: 100%; margin: 24px 0; @@ -117,10 +117,11 @@ button { border: 2px solid var(--primary); border-radius: 50px; font-size: 16px; - font-family: 'Montserrat'; + font-family: 'Inter', sans-serif; font-weight: bold; padding: 17px 27px; cursor: pointer; + align-self: center; } .small { @@ -130,7 +131,7 @@ button { .outlined-button { background-color: transparent; color: var(--primary); - align-self: flex-end; + align-self: center; } .filled-button, @@ -230,4 +231,4 @@ button { color: var(--primary); border: none; } -} +} \ No newline at end of file