diff --git a/README.md b/README.md index 60f55e53..2cadcf49 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,14 @@ -# Project Name +# Project Guess Who -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 aim of the project was to make a digital version of the board game Guess Who by using HTML, CSS and Javascript. After I got the game to work I decided to turn it into Guess Who? - Dog edition instead. ## 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? +I started by looking through the material for the week and then started to code. I think the instructions of the project and the starter code were a good help to get started. I used a bit of Stack Overflow but mainly chatGPT when I got stuck. I also double checked with chatGPT if my code looked good. I had great help from my team mates through our discussions. + +If I had more time I would rename the characters in the code when they are called 'person' to 'dogs' because it would make more sense since I switched to a dog theme. However 'person' is used in variables and values and therefore I didn't change it now since there was a risk something might not work in the code and I then wouldn't have time to fix it. ## 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. +Please visit: +https://project-guess-who-anna-robertsson.netlify.app \ No newline at end of file diff --git a/code/assets/cheer.mp3 b/code/assets/cheer.mp3 new file mode 100644 index 00000000..c3c0614c Binary files /dev/null and b/code/assets/cheer.mp3 differ diff --git a/code/images/ace.jpg b/code/images/ace.jpg new file mode 100644 index 00000000..9ddeb298 Binary files /dev/null and b/code/images/ace.jpg differ diff --git a/code/images/bailey.jpg b/code/images/bailey.jpg new file mode 100644 index 00000000..38be174b Binary files /dev/null and b/code/images/bailey.jpg differ diff --git a/code/images/baxter.jpg b/code/images/baxter.jpg new file mode 100644 index 00000000..6dfe14c3 Binary files /dev/null and b/code/images/baxter.jpg differ diff --git a/code/images/bella.jpg b/code/images/bella.jpg new file mode 100644 index 00000000..ef1ce7a2 Binary files /dev/null and b/code/images/bella.jpg differ diff --git a/code/images/biscuit.jpg b/code/images/biscuit.jpg new file mode 100644 index 00000000..44f49e50 Binary files /dev/null and b/code/images/biscuit.jpg differ diff --git a/code/images/cody.jpg b/code/images/cody.jpg new file mode 100644 index 00000000..9aa60701 Binary files /dev/null and b/code/images/cody.jpg differ diff --git a/code/images/cooper.jpg b/code/images/cooper.jpg new file mode 100644 index 00000000..08403be0 Binary files /dev/null and b/code/images/cooper.jpg differ diff --git a/code/images/dobbie.jpg b/code/images/dobbie.jpg new file mode 100644 index 00000000..a9e1c17e Binary files /dev/null and b/code/images/dobbie.jpg differ diff --git a/code/images/duke.jpg b/code/images/duke.jpg new file mode 100644 index 00000000..472c9953 Binary files /dev/null and b/code/images/duke.jpg differ diff --git a/code/images/finn.jpg b/code/images/finn.jpg new file mode 100644 index 00000000..18c8809e Binary files /dev/null and b/code/images/finn.jpg differ diff --git a/code/images/frenchie.jpg b/code/images/frenchie.jpg new file mode 100644 index 00000000..4eeb63c7 Binary files /dev/null and b/code/images/frenchie.jpg differ diff --git a/code/images/harley.jpg b/code/images/harley.jpg new file mode 100644 index 00000000..7f8c901a Binary files /dev/null and b/code/images/harley.jpg differ diff --git a/code/images/hazel.jpg b/code/images/hazel.jpg new file mode 100644 index 00000000..58a1c8a2 Binary files /dev/null and b/code/images/hazel.jpg differ diff --git a/code/images/inez.jpg b/code/images/inez.jpg new file mode 100644 index 00000000..0dd6dc80 Binary files /dev/null and b/code/images/inez.jpg differ diff --git a/code/images/ivy.jpg b/code/images/ivy.jpg new file mode 100644 index 00000000..d2f874d8 Binary files /dev/null and b/code/images/ivy.jpg differ diff --git a/code/images/jabala.svg b/code/images/jabala.svg deleted file mode 100644 index 6875c4f8..00000000 --- a/code/images/jabala.svg +++ /dev/null @@ -1 +0,0 @@ -Artboard 54 \ No newline at end of file diff --git a/code/images/jack.svg b/code/images/jack.svg deleted file mode 100644 index 68dfb982..00000000 --- a/code/images/jack.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - -Artboard 9 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jacques.svg b/code/images/jacques.svg deleted file mode 100644 index f20284a2..00000000 --- a/code/images/jacques.svg +++ /dev/null @@ -1,93 +0,0 @@ - - - - -3 pipe - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jai.svg b/code/images/jai.svg deleted file mode 100644 index 9c4eaeed..00000000 --- a/code/images/jai.svg +++ /dev/null @@ -1,104 +0,0 @@ - - - - -2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jake.svg b/code/images/jake.svg deleted file mode 100644 index 060d9b9c..00000000 --- a/code/images/jake.svg +++ /dev/null @@ -1,103 +0,0 @@ - - - - -Artboard 25 copy 4 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/james.svg b/code/images/james.svg deleted file mode 100644 index 1a994dd1..00000000 --- a/code/images/james.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - -Artboard 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jana.svg b/code/images/jana.svg deleted file mode 100644 index 957ef822..00000000 --- a/code/images/jana.svg +++ /dev/null @@ -1 +0,0 @@ -Artboard 1 copy 2 \ No newline at end of file diff --git a/code/images/jane.svg b/code/images/jane.svg deleted file mode 100644 index 41ff91b0..00000000 --- a/code/images/jane.svg +++ /dev/null @@ -1 +0,0 @@ -Artboard 21 \ No newline at end of file diff --git a/code/images/jaqueline.svg b/code/images/jaqueline.svg deleted file mode 100644 index 1ebb90dc..00000000 --- a/code/images/jaqueline.svg +++ /dev/null @@ -1,165 +0,0 @@ - - - - -Artboard 25 copy 3 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jasper.jpg b/code/images/jasper.jpg new file mode 100644 index 00000000..6fce425e Binary files /dev/null and b/code/images/jasper.jpg differ diff --git a/code/images/jazebelle.svg b/code/images/jazebelle.svg deleted file mode 100644 index 15e30e0d..00000000 --- a/code/images/jazebelle.svg +++ /dev/null @@ -1 +0,0 @@ -Artboard 25 copy 6 \ No newline at end of file diff --git a/code/images/jean.svg b/code/images/jean.svg deleted file mode 100644 index 8fa89d9f..00000000 --- a/code/images/jean.svg +++ /dev/null @@ -1,128 +0,0 @@ - - - - -Artboard 3 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jeane.svg b/code/images/jeane.svg deleted file mode 100644 index a07a294e..00000000 --- a/code/images/jeane.svg +++ /dev/null @@ -1,65 +0,0 @@ - - - - -Artboard 25 copy 7 - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jed.svg b/code/images/jed.svg deleted file mode 100644 index 501ee116..00000000 --- a/code/images/jed.svg +++ /dev/null @@ -1,110 +0,0 @@ - - - - -3 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jenni.svg b/code/images/jenni.svg deleted file mode 100644 index a6c50108..00000000 --- a/code/images/jenni.svg +++ /dev/null @@ -1,91 +0,0 @@ - - - - -Artboard 4 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jeri.svg b/code/images/jeri.svg deleted file mode 100644 index ac0c395f..00000000 --- a/code/images/jeri.svg +++ /dev/null @@ -1,81 +0,0 @@ - - - - -Artboard 21 copy - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jerry.svg b/code/images/jerry.svg deleted file mode 100644 index f0c8e641..00000000 --- a/code/images/jerry.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - -Artboard 1 copy - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jess.svg b/code/images/jess.svg deleted file mode 100644 index f845b976..00000000 --- a/code/images/jess.svg +++ /dev/null @@ -1,52 +0,0 @@ - - - - -Artboard 25 copy - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jia.svg b/code/images/jia.svg deleted file mode 100644 index 7e313924..00000000 --- a/code/images/jia.svg +++ /dev/null @@ -1,52 +0,0 @@ - - - - -Artboard 10 - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jocelyn.svg b/code/images/jocelyn.svg deleted file mode 100644 index dd08f3ef..00000000 --- a/code/images/jocelyn.svg +++ /dev/null @@ -1,100 +0,0 @@ - - - - -Artboard 21 copy 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jodi.svg b/code/images/jodi.svg deleted file mode 100644 index 864f7be1..00000000 --- a/code/images/jodi.svg +++ /dev/null @@ -1,101 +0,0 @@ - - - - -Artboard 21 copy 3 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/joe.svg b/code/images/joe.svg deleted file mode 100644 index b2878ffc..00000000 --- a/code/images/joe.svg +++ /dev/null @@ -1,70 +0,0 @@ - - - - -Artboard 54 copy - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jolee.svg b/code/images/jolee.svg deleted file mode 100644 index d2048e28..00000000 --- a/code/images/jolee.svg +++ /dev/null @@ -1,79 +0,0 @@ - - - - -Artboard 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jon.svg b/code/images/jon.svg deleted file mode 100644 index 8138984b..00000000 --- a/code/images/jon.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - -Artboard 25 - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jordan.svg b/code/images/jordan.svg deleted file mode 100644 index 2b7b6bf4..00000000 --- a/code/images/jordan.svg +++ /dev/null @@ -1,81 +0,0 @@ - - - - -Artboard 54 copy 3 - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/josephine.svg b/code/images/josephine.svg deleted file mode 100644 index a0f28f58..00000000 --- a/code/images/josephine.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - - -Artboard 25 copy 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/josh.svg b/code/images/josh.svg deleted file mode 100644 index de676a8c..00000000 --- a/code/images/josh.svg +++ /dev/null @@ -1,68 +0,0 @@ - - - - -1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/jude.svg b/code/images/jude.svg deleted file mode 100644 index 64252cb3..00000000 --- a/code/images/jude.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - - -Artboard 25 copy 5 - - - - - - - - - - - - - - - - - - - diff --git a/code/images/julie.svg b/code/images/julie.svg deleted file mode 100644 index 253eb566..00000000 --- a/code/images/julie.svg +++ /dev/null @@ -1,118 +0,0 @@ - - - - -Artboard 54 copy 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/images/logo.png b/code/images/logo.png new file mode 100644 index 00000000..1fab07b5 Binary files /dev/null and b/code/images/logo.png differ diff --git a/code/images/loki.jpg b/code/images/loki.jpg new file mode 100644 index 00000000..b46662c6 Binary files /dev/null and b/code/images/loki.jpg differ diff --git a/code/images/luna.jpg b/code/images/luna.jpg new file mode 100644 index 00000000..21f893f9 Binary files /dev/null and b/code/images/luna.jpg differ diff --git a/code/images/max.jpg b/code/images/max.jpg new file mode 100644 index 00000000..83e938c7 Binary files /dev/null and b/code/images/max.jpg differ diff --git a/code/images/millie.jpg b/code/images/millie.jpg new file mode 100644 index 00000000..e496ab7b Binary files /dev/null and b/code/images/millie.jpg differ diff --git a/code/images/milo.jpg b/code/images/milo.jpg new file mode 100644 index 00000000..1103ef5e Binary files /dev/null and b/code/images/milo.jpg differ diff --git a/code/images/mocha.jpg b/code/images/mocha.jpg new file mode 100644 index 00000000..9c22d7d2 Binary files /dev/null and b/code/images/mocha.jpg differ diff --git a/code/images/murphy.jpg b/code/images/murphy.jpg new file mode 100644 index 00000000..500e488c Binary files /dev/null and b/code/images/murphy.jpg differ diff --git a/code/images/ollie.jpg b/code/images/ollie.jpg new file mode 100644 index 00000000..05af0863 Binary files /dev/null and b/code/images/ollie.jpg differ diff --git a/code/images/penny.jpg b/code/images/penny.jpg new file mode 100644 index 00000000..c8bd0772 Binary files /dev/null and b/code/images/penny.jpg differ diff --git a/code/images/poppy.jpg b/code/images/poppy.jpg new file mode 100644 index 00000000..a1c8c668 Binary files /dev/null and b/code/images/poppy.jpg differ diff --git a/code/images/rocco.jpg b/code/images/rocco.jpg new file mode 100644 index 00000000..67f6f49d Binary files /dev/null and b/code/images/rocco.jpg differ diff --git a/code/images/roxy.jpg b/code/images/roxy.jpg new file mode 100644 index 00000000..0ed2c29c Binary files /dev/null and b/code/images/roxy.jpg differ diff --git a/code/images/ruby.jpg b/code/images/ruby.jpg new file mode 100644 index 00000000..98c8de91 Binary files /dev/null and b/code/images/ruby.jpg differ diff --git a/code/images/sadie.jpg b/code/images/sadie.jpg new file mode 100644 index 00000000..bdd64a9b Binary files /dev/null and b/code/images/sadie.jpg differ diff --git a/code/images/sam.jpg b/code/images/sam.jpg new file mode 100644 index 00000000..46d9e3ea Binary files /dev/null and b/code/images/sam.jpg differ diff --git a/code/images/spot.jpg b/code/images/spot.jpg new file mode 100644 index 00000000..ed0f937e Binary files /dev/null and b/code/images/spot.jpg differ diff --git a/code/images/technigo-logo.svg b/code/images/technigo-logo.svg new file mode 100644 index 00000000..fef43dc1 --- /dev/null +++ b/code/images/technigo-logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/code/images/teddy.jpg b/code/images/teddy.jpg new file mode 100644 index 00000000..c2474c4e Binary files /dev/null and b/code/images/teddy.jpg differ diff --git a/code/images/toby.jpg b/code/images/toby.jpg new file mode 100644 index 00000000..d0d07004 Binary files /dev/null and b/code/images/toby.jpg differ diff --git a/code/images/winnie.jpg b/code/images/winnie.jpg new file mode 100644 index 00000000..6806ba27 Binary files /dev/null and b/code/images/winnie.jpg differ diff --git a/code/images/zoey.jpg b/code/images/zoey.jpg new file mode 100644 index 00000000..33f7be6f Binary files /dev/null and b/code/images/zoey.jpg differ diff --git a/code/index.html b/code/index.html index 0479b061..cc4a10a9 100644 --- a/code/index.html +++ b/code/index.html @@ -3,12 +3,17 @@ - Project Name + Guess Who? - Dog edition + + + +
+
+ + + + diff --git a/code/script.js b/code/script.js index 5207730c..7d06b41a 100644 --- a/code/script.js +++ b/code/script.js @@ -2,201 +2,362 @@ const board = document.getElementById('board') const questions = document.getElementById('questions') const restartButton = document.getElementById('restart') +const filterButton = document.getElementById('filter') +const winOrLose = document.getElementById('winOrLose') +const winOrLoseText = document.getElementById('winOrLoseText') +const playAgainButton = document.getElementById('playAgain') // Array with all the characters, as objects const CHARACTERS = [ { - name: 'Jabala', - img: 'images/jabala.svg', - hair: 'hidden', - eyes: 'hidden', - accessories: ['glasses', 'hat'], - other: [] + name: 'Zoey', + img: 'images/zoey.jpg', + furcolor: 'black', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] }, { - name: 'Jack', - img: 'images/jack.svg', - hair: 'hidden', - eyes: 'blue', - accessories: ['hat'], - other: [] + name: 'Milo', + img: 'images/milo.jpg', + furcolor: 'golden', + coat: 'medium long', + ears: 'upright', + nose: ['dark', 'long'], + clothing: ['clothes', 'a hat'], + accessories: ['a collar', 'glasses'] }, { - name: 'Jacques', - img: 'images/jacques.svg', - hair: 'grey', - eyes: 'blue', - accessories: ['hat'], - other: ['smoker'] + name: 'Ivy', + img: 'images/ivy.jpg', + furcolor: 'white', + coat: 'curly', + ears: 'floppy', + nose: ['light', 'long'], + clothing: [], + accessories: [] }, { - name: 'Jai', - img: 'images/jai.svg', - hair: 'black', - eyes: 'brown', - accessories: [], - other: [] + name: 'Sadie', + img: 'images/sadie.jpg', + furcolor: 'brown', + coat: 'wiry', + ears: 'upright', + nose: ['dark', 'short'], + clothing: [], + accessories: [] }, { - name: 'Jake', - img: 'images/jake.svg', - hair: 'yellow', - eyes: 'green', - accessories: ['glasses'], - other: [] + name: 'Winnie', + img: 'images/winnie.jpg', + furcolor: 'mixed', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: ['a collar'] }, { - name: 'James', - img: 'images/james.svg', - hair: 'brown', - eyes: 'green', - accessories: ['glasses'], - other: [] + name: 'Bella', + img: 'images/bella.jpg', + furcolor: 'black', + coat: 'medium long', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] }, { - name: 'Jana', - img: 'images/jana.svg', - hair: 'black', - eyes: 'hidden', - accessories: ['glasses'], - other: [] + name: 'Baxter', + img: 'images/baxter.jpg', + furcolor: 'mixed', + coat: 'wiry', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: ['a bow'] }, { - name: 'Jane', - img: 'images/jane.svg', - hair: 'yellow', - eyes: 'hidden', - accessories: ['glasses'], - other: [] + name: 'Ruby', + img: 'images/ruby.jpg', + furcolor: 'mixed', + coat: 'medium long', + ears: 'floppy', + nose: ['dark', 'short'], + clothing: [], + accessories: ['a collar'] }, { - name: 'Jaqueline', - img: 'images/jaqueline.svg', - hair: 'orange', - eyes: 'green', - accessories: ['glasses'], - other: [] + name: 'Poppy', + img: 'images/poppy.jpg', + furcolor: 'mixed', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] + }, + { + name: 'Ace', + img: 'images/ace.jpg', + furcolor: 'brown', + coat: 'short', + ears: 'floppy', + nose: ['light', 'long'], + clothing: [], + accessories: ['a collar'] + }, + { + name: 'Penny', + img: 'images/penny.jpg', + furcolor: 'mixed', + coat: 'medium long', + ears: 'floppy', + nose: ['dark', 'short'], + clothing: [], + accessories: ['a bow'] + }, + { + name: 'Toby', + img: 'images/toby.jpg', + furcolor: 'mixed', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] + }, + { + name: 'Harley', + img: 'images/harley.jpg', + furcolor: 'mixed', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] + }, + { + name: 'Max', + img: 'images/max.jpg', + furcolor: 'golden', + coat: 'short', + ears: 'upright', + nose: ['light', 'short'], + clothing: [], + accessories: ['a collar'] + }, + { + name: 'Hazel', + img: 'images/hazel.jpg', + furcolor: 'mixed', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'short'], + clothing: [], + accessories: ['a collar'] + }, + { + name: 'Luna', + img: 'images/luna.jpg', + furcolor: 'mixed', + coat: 'medium long', + ears: 'upright', + nose: ['dark', 'long'], + clothing: [], + accessories: ['glasses'] + }, + { + name: 'Duke', + img: 'images/duke.jpg', + furcolor: 'brown', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: ['a collar'] + }, + { + name: 'Cody', + img: 'images/cody.jpg', + furcolor: 'mixed', + coat: 'medium long', + ears: 'upright', + nose: ['dark', 'long'], + clothing: [], + accessories: ['glasses'] + }, + { + name: 'Biscuit', + img: 'images/biscuit.jpg', + furcolor: 'white', + coat: 'curly', + ears: 'floppy', + nose: ['dark', 'short'], + clothing: [], + accessories: [] + }, + { + name: 'Teddy', + img: 'images/teddy.jpg', + furcolor: 'mixed', + coat: 'medium long', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] }, - { - name: 'Jazebelle', - img: 'images/jazebelle.svg', - hair: 'purple', - eyes: 'hidden', - accessories: ['glasses'], - other: ['smoker'] + name: 'Mocha', + img: 'images/mocha.jpg', + furcolor: 'brown', + coat: 'curly', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] }, { - name: 'Jean', - img: 'images/jean.svg', - hair: 'brown', - eyes: 'blue', - accessories: ['glasses', 'hat'], - other: ['smoker'] + name: 'Inez', + img: 'images/inez.jpg', + furcolor: 'mixed', + coat: 'medium long', + ears: 'floppy', + nose: ['dark', 'short'], + clothing: ['clothes'], + accessories: [] }, { - name: 'Jeane', - img: 'images/jeane.svg', - hair: 'brown', - eyes: 'green', - accessories: ['glasses'], - other: [] + name: 'Rocco', + img: 'images/rocco.jpg', + furcolor: 'brown', + coat: 'short', + ears: 'upright', + nose: ['light', 'long'], + clothing: [], + accessories: ['a collar', 'glasses'] }, { - name: 'Jed', - img: 'images/jed.svg', - hair: 'orange', - eyes: 'green', - accessories: ['glasses', 'hat'], - other: ['smoker'] + name: 'Roxy', + img: 'images/roxy.jpg', + furcolor: 'mixed', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: ['a collar'] }, { - name: 'Jenni', - img: 'images/jenni.svg', - hair: 'white', - eyes: 'hidden', - accessories: ['hat'], - other: [] + name: 'Murphy', + img: 'images/murphy.jpg', + furcolor: 'golden', + coat: 'medium long', + ears: 'floppy', + nose: ['light', 'long'], + clothing: [], + accessories: [] }, { - name: 'Jeri', - img: 'images/jeri.svg', - hair: 'orange', - eyes: 'green', - accessories: ['glasses'], - other: [] + name: 'Dobbie', + img: 'images/dobbie.jpg', + furcolor: 'mixed', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] }, { - name: 'Jerry', - img: 'images/jerry.svg', - hair: 'hidden', - eyes: 'blue', - accessories: ['hat'], - other: [] + name: 'Bailey', + img: 'images/bailey.jpg', + furcolor: 'golden', + coat: 'medium long', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] }, { - name: 'Jess', - img: 'images/jess.svg', - hair: 'black', - eyes: 'blue', - accessories: ['glasses'], - other: [] + name: 'Jasper', + img: 'images/jasper.jpg', + furcolor: 'white', + coat: 'medium long', + ears: 'floppy', + nose: ['light', 'long'], + clothing: ['a hat'], + accessories: [] }, { - name: 'Jocelyn', - img: 'images/jocelyn.svg', - hair: 'black', - eyes: 'brown', - accessories: ['glasses'], - other: [] + name: 'Spot', + img: 'images/spot.jpg', + furcolor: 'mixed', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] }, { - name: 'Jon', - img: 'images/jon.svg', - hair: 'brown', - eyes: 'green', - accessories: ['glasses'], - other: [] + name: 'Cooper', + img: 'images/cooper.jpg', + furcolor: 'mixed', + coat: 'medium long', + ears: 'upright', + nose: ['dark', 'long'], + clothing: [], + accessories: [] }, { - name: 'Jordan', - img: 'images/jordan.svg', - hair: 'yellow', - eyes: 'hidden', - accessories: ['glasses', 'hat'], - other: [] + name: 'Millie', + img: 'images/millie.jpg', + furcolor: 'brown', + coat: 'wiry', + ears: 'upright', + nose: ['dark', 'short'], + clothing: ['clothes', 'a hat'], + accessories: [] }, { - name: 'Josephine', - img: 'images/josephine.svg', - hair: 'grey', - eyes: 'brown', - accessories: [], - other: [] + name: 'Finn', + img: 'images/finn.jpg', + furcolor: 'brown', + coat: 'short', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: ['a collar'] }, { - name: 'Josh', - img: 'images/josh.svg', - hair: 'yellow', - eyes: 'green', - accessories: [], - other: [] + name: 'Sam', + img: 'images/sam.jpg', + furcolor: 'mixed', + coat: 'medium long', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: ['a bow'] }, { - name: 'Jude', - img: 'images/jude.svg', - hair: 'black', - eyes: 'green', - accessories: [], - other: [] + name: 'Loki', + img: 'images/loki.jpg', + furcolor: 'mixed', + coat: 'wiry', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] }, { - name: 'Julie', - img: 'images/julie.svg', - hair: 'black', - eyes: 'brown', - accessories: ['glasses', 'hat'], - other: [] + name: 'Ollie', + img: 'images/ollie.jpg', + furcolor: 'golden', + coat: 'medium long', + ears: 'floppy', + nose: ['dark', 'long'], + clothing: [], + accessories: [] }, ] @@ -204,6 +365,8 @@ const CHARACTERS = [ let secret let currentQuestion let charactersInPlay +let count = 0 +const soundCheer = new Audio('assets/cheer.mp3') // Draw the game board const generateBoard = () => { @@ -222,100 +385,181 @@ const generateBoard = () => { }) } -// Randomly select a person from the characters array and set as the value of the variable called secret +// Randomly select a dog from the characters array and set as the value of the variable called secret const setSecret = () => { secret = charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)] } -// This function to start (and restart) the game +// This function is to start (and restart) the game const start = () => { - // Here we're setting charactersInPlay array to be all the characters to start with + // Setting charactersInPlay array to be all the characters to start with charactersInPlay = CHARACTERS - // What else should happen when we start the game? + // Resets the counter to zero when the game is restarted + count = 0 + // When the game starts the game board is shown, a secret dog is selected and the counter starts + generateBoard() + setSecret() + counter() } -// setting the currentQuestion object when you select something in the dropdown +// Setting the currentQuestion object when the player selects 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 = + // These variables stores what option group (category) the question belongs to and stores the actual value of the question we've selected + const selectedOption = questions.options[questions.selectedIndex] + const value = selectedOption.value currentQuestion = { category: category, - // value: value + value: value } } -// This function should be invoked when you click on 'Find Out' button. +// This function is invoked when you click on 'Find Out' button const checkQuestion = () => { const { category, value } = currentQuestion + let keep - // 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') { - - } else if (category === 'accessories' || category === 'other') { - + // Compares the currentQuestion details with the secret dogs details in a different manner based on category. See if we should keep or remove dogs based on that and then invoke filterCharacters + if (category === 'furcolor' || category === 'coat' || category === 'ears') { + attribute = category + keep = secret[category] === value + } else if (category === 'nose' || category === 'clothing' || category === 'accessories') { + keep = secret[category].includes(value) } + filterCharacters(keep) } -// It'll filter the characters array and redraw the game board. +// Filter the characters array and redraw the game board by determining what is the category, and if it's to keep or remove based on the keep variable const filterCharacters = (keep) => { const { category, value } = currentQuestion - // Show the correct alert message for different categories - if (category === 'accessories') { + if (category === 'furcolor') { if (keep) { alert( - `Yes, the person wears ${value}! Keep all people that wears ${value}` + `Yes, the doggie has ${value} fur color! Keep all doggies that have ${value} fur color!` ) + charactersInPlay = charactersInPlay.filter((person) => person[attribute] === value) } else { alert( - `No, the person doesn't wear ${value}! Remove all people that wears ${value}` + `No, the doggie doesn't have ${value} fur color! Remove all doggies that have ${value} fur color!` ) + charactersInPlay = charactersInPlay.filter((person) => person[attribute] !== value) } - } else if (category === 'other') { - // Similar to the one above - } else { + } else if (category === 'coat') { if (keep) { - // alert popup that says something like: "Yes, the person has yellow hair! Keep all people with yellow hair" + alert( + `Yes, the doggie has a ${value} coat! Keep all doggies that have a ${value} coat!` + ) + charactersInPlay = charactersInPlay.filter((person) => person[attribute] === value) } else { - // alert popup that says something like: "No, the person doesnt have yellow hair! Remove all people with yellow hair" + alert( + `No, the doggie doesn't have a ${value} coat! Remove all doggies that have a ${value} coat!` + ) + 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 : + } else if (category === 'ears') { + if (keep) { + alert( + `Yes, the doggie has ${value} ears! Keep all doggies that have ${value} ears!` + ) charactersInPlay = charactersInPlay.filter((person) => person[attribute] === value) - or + } else { + alert( + `No, the doggie doesn't have ${value} ears! Remove all doggies that have ${value} ears!` + ) charactersInPlay = charactersInPlay.filter((person) => person[attribute] !== value) + } + } - for accessories and other + if (category === 'nose') { + if (keep) { + alert( + `Yes, the doggie has a ${value} nose! Keep all doggies that have a ${value} nose!` + ) + charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) + } else { + alert( + `No, the doggie doesn't have a ${value} nose! Remove all doggies that have a ${value} nose!` + ) + charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) + } + } else if (category === 'clothing') { + if (keep) { + alert( + `Yes, the doggie wears ${value}! Keep all doggies that wears ${value}!` + ) charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) - or + } else { + alert( + `No, the doggie doesn't wear ${value}! Remove all doggies that wears ${value}!` + ) charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) - */ - - // Invoke a function to redraw the board with the remaining people. + } + } else if (category === 'accessories') { + if (keep) { + alert( + `Yes, the doggie has ${value}! Keep all doggies that have ${value}!` + ) + charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) + } else { + alert( + `No, the doggie doesn't have ${value}! Remove all doggies that have ${value}!` + ) + charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) + } + } + + // Invokes a function to redraw the board with the remaining dogs + generateBoard(charactersInPlay) } -// when clicking guess, the player first have to confirm that they want to make a guess. +// 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. + // If the player wants to guess, the checkMyGuess function is invoked + const confirmed = confirm( + `Moment of truth! Do you really want to guess on ${personToConfirm}?` + ) + if (confirmed) { + checkMyGuess(personToConfirm) + } else { + alert( + `Guess cancelled.` + ) + } } -// If you confirm, this function is invoked +// If the player confirms, this function is invoked. Checks if the personToCheck is the same as the secret dog's name. Shows the win or lose section depending on the outcome while hiding the game board 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.textContent = `Congratulations! 🥳 You guessed right, it was ${secret.name}! 👏` + soundCheer.play() + } else if (personToCheck !== secret.name) { + winOrLose.style.display = "flex" + board.style.display = "none" + winOrLoseText.textContent = `Oh no! 😣 You guessed wrong, it was ${secret.name}! Better luck next time! 🥴` + } +} + +// Function for counter +const counter = () => { + let counterSection = document.querySelector('.counter') + + counterSection.innerHTML = + `

Number of guesses made: + ${count} +

` + + count++ +} + +// If the player wants to play again, the win or lose section needs to be hidden. The board should also be visible again and the start function should be invoked +const playAgain = () => { + winOrLose.style.display = "none" + board.style.display = "flex" + start() } // Invokes the start function when website is loaded @@ -323,3 +567,7 @@ start() // All the event listeners restartButton.addEventListener('click', start) +questions.addEventListener('change', selectQuestion) +filterButton.addEventListener('click', checkQuestion) +filterButton.addEventListener('click', counter) +playAgainButton.addEventListener('click', playAgain) \ No newline at end of file diff --git a/code/style.css b/code/style.css index 1602adfe..faaf7ee0 100644 --- a/code/style.css +++ b/code/style.css @@ -1,7 +1,7 @@ -/* Global css variables used for colors */ +/* Global CSS variables used for colors */ :root { - --primary: #a259ff; - --secondary: #b0a6ff; + --primary: #155663; + --secondary: #1d7a8d; } body { @@ -13,19 +13,21 @@ body { h1 { font-size: 42px; - font-weight: 500; + font-weight: 700; line-height: 48px; margin: 10px 0; - color: white; + color: var(--secondary); } .question-section { width: 30%; min-height: 100vh; - background-color: var(--secondary); + background-image: url("./images/frenchie.jpg"); + background-size: cover; + background-position: center; display: flex; flex-direction: column; - padding: 5vw; + padding: 3vw 5vw 5vw 5vw; align-items: flex-start; box-sizing: border-box; } @@ -35,16 +37,18 @@ select { border: none; font-size: 22px; font-family: 'Montserrat'; - color: var(--secondary); + color: var(--primary); width: 100%; margin: 24px 0; } .guess-who-icon { width: 126px; + align-self: flex-end; } .board-wrapper { + background: var(--secondary); width: 70%; display: flex; align-items: center; @@ -53,18 +57,25 @@ select { .game-board { width: 90%; - max-width: 882px; + max-width: 1025px; + margin-bottom: 60px; display: flex; flex-wrap: wrap; align-content: center; } +.counter { + margin: 25px 0; + color: #fff; +} + /****** CARD ******/ .card { + background-color: var(--primary); width: 135px; height: 165px; overflow: hidden; - border: 3px solid var(--secondary); + border: 3px solid #fff; border-radius: 4px; margin: 3px; display: flex; @@ -76,6 +87,7 @@ select { .card p { text-align: center; margin-bottom: 0; + color: #fff; font-size: 16px; font-weight: 700; } @@ -85,7 +97,7 @@ select { flex-direction: column; align-items: center; justify-content: center; - color: white; + color: #fff; text-align: center; height: inherit; } @@ -104,6 +116,11 @@ select { display: flex; } +.card img { + width: 95%; + object-fit: contain; +} + .guess span { font-size: 16px; line-height: 18px; @@ -130,18 +147,18 @@ button { .outlined-button { background-color: transparent; color: var(--primary); - align-self: flex-end; + align-self: flex-start; } .filled-button, .outlined-button:hover { background-color: var(--primary); - color: white; + color: #fff; } .filled-button:hover { - background-color: white; - border-color: white; + background-color: #fff; + border-color: #fff; color: var(--primary); } @@ -175,6 +192,30 @@ button { .win-or-lose h1 { margin-bottom: 32px; + color: var(--primary); +} + +footer { + display: flex; + justify-content: space-around; + align-items: center; + color: #fff; + font-size: 16px; + background-color: var(--primary); + width: 100%; + text-align: center; + position: fixed; + bottom: 0; +} + +.copyright img { + width: 30px; +} + +footer a:link, +a:visited { + font-size: 20px; + color: #fff; } @media (max-width: 768px) { @@ -186,9 +227,11 @@ button { width: 100%; min-height: 0; } + button { padding: 8px 16px; } + h1 { font-size: 24px; line-height: 30px; @@ -226,8 +269,8 @@ button { .card .guess .filled-button { padding: 6px 11px; margin-bottom: 1px; - background: white; + background: #fff; color: var(--primary); border: none; } -} +} \ No newline at end of file