From 9fcbf56bbecaeddcb1d6bf3634ce6e118ac2b1a8 Mon Sep 17 00:00:00 2001 From: elbines <141184135+elbines@users.noreply.github.com> Date: Fri, 8 Sep 2023 07:42:14 +0200 Subject: [PATCH 01/20] most of basic --- code/index.html | 130 +++++++++++++---------- code/script.js | 277 +++++++++++++++++++++++++++++++++--------------- code/style.css | 10 +- 3 files changed, 269 insertions(+), 148 deletions(-) diff --git a/code/index.html b/code/index.html index 0479b061..71849996 100644 --- a/code/index.html +++ b/code/index.html @@ -1,64 +1,82 @@ - - - - Project Name - - - - - + -
-
- Guess Who -

- -
-
- - - + +
+
+
+ + +
+
+ Guess Who +

+ +
+
+ + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 5207730c..8d3cc9c1 100644 --- a/code/script.js +++ b/code/script.js @@ -1,7 +1,15 @@ // All the DOM selectors stored as short variables + const board = document.getElementById('board') +//in html: populates the board const questions = document.getElementById('questions') +//DROPDOWN SELECT ELEMENTS "question" (value and label html) const restartButton = document.getElementById('restart') +//Reach the restart button +const findOutBtn = document.getElementById("filter"); +const playAgainButton = document.getElementById("playAgain"); +const winOrLoseText = document.getElementById("winOrLoseText"); + // Array with all the characters, as objects const CHARACTERS = [ @@ -10,8 +18,8 @@ const CHARACTERS = [ img: 'images/jabala.svg', hair: 'hidden', eyes: 'hidden', - accessories: ['glasses', 'hat'], - other: [] + accessories: ['glasses'], + other: ['smile'] }, { name: 'Jack', @@ -19,15 +27,15 @@ const CHARACTERS = [ hair: 'hidden', eyes: 'blue', accessories: ['hat'], - other: [] + other: ['beard'] }, { name: 'Jacques', img: 'images/jacques.svg', - hair: 'grey', + hair: 'hidden', eyes: 'blue', - accessories: ['hat'], - other: ['smoker'] + accessories: [], + other: ['smoker', 'beard'] }, { name: 'Jai', @@ -35,15 +43,15 @@ const CHARACTERS = [ hair: 'black', eyes: 'brown', accessories: [], - other: [] + other: ['smile'] }, { name: 'Jake', img: 'images/jake.svg', - hair: 'yellow', + hair: 'blonde', eyes: 'green', accessories: ['glasses'], - other: [] + other: ['smile'] }, { name: 'James', @@ -59,12 +67,12 @@ const CHARACTERS = [ hair: 'black', eyes: 'hidden', accessories: ['glasses'], - other: [] + other: ['smile'] }, { name: 'Jane', img: 'images/jane.svg', - hair: 'yellow', + hair: 'blonde', eyes: 'hidden', accessories: ['glasses'], other: [] @@ -75,7 +83,7 @@ const CHARACTERS = [ hair: 'orange', eyes: 'green', accessories: ['glasses'], - other: [] + other: ['smile'] }, { @@ -100,15 +108,15 @@ const CHARACTERS = [ hair: 'brown', eyes: 'green', accessories: ['glasses'], - other: [] + other: ['smile'] }, { name: 'Jed', img: 'images/jed.svg', - hair: 'orange', + hair: 'red', eyes: 'green', accessories: ['glasses', 'hat'], - other: ['smoker'] + other: ['smoker', 'beard'] }, { name: 'Jenni', @@ -121,7 +129,7 @@ const CHARACTERS = [ { name: 'Jeri', img: 'images/jeri.svg', - hair: 'orange', + hair: 'red', eyes: 'green', accessories: ['glasses'], other: [] @@ -132,7 +140,7 @@ const CHARACTERS = [ hair: 'hidden', eyes: 'blue', accessories: ['hat'], - other: [] + other: ['smile'] }, { name: 'Jess', @@ -140,14 +148,14 @@ const CHARACTERS = [ hair: 'black', eyes: 'blue', accessories: ['glasses'], - other: [] + other: ['smile'] }, { name: 'Jocelyn', img: 'images/jocelyn.svg', hair: 'black', eyes: 'brown', - accessories: ['glasses'], + accessories: ['glasses', 'earrings'], other: [] }, { @@ -156,31 +164,31 @@ const CHARACTERS = [ hair: 'brown', eyes: 'green', accessories: ['glasses'], - other: [] + other: ['smile'] }, { name: 'Jordan', img: 'images/jordan.svg', - hair: 'yellow', + hair: 'blonde', eyes: 'hidden', accessories: ['glasses', 'hat'], - other: [] + other: ['smile'] }, { name: 'Josephine', img: 'images/josephine.svg', hair: 'grey', eyes: 'brown', - accessories: [], - other: [] + accessories: ['earings'], + other: ['smile'] }, { name: 'Josh', img: 'images/josh.svg', - hair: 'yellow', + hair: 'blonde', eyes: 'green', accessories: [], - other: [] + other: ['smile'] }, { name: 'Jude', @@ -188,7 +196,7 @@ const CHARACTERS = [ hair: 'black', eyes: 'green', accessories: [], - other: [] + other: ['smile', 'beard'] }, { name: 'Julie', @@ -201,15 +209,22 @@ const CHARACTERS = [ ] // Global variables -let secret -let currentQuestion -let charactersInPlay +let secret //Will be the secret person object (Stores secret person selected in setSecret func.) +let currentQuestion //Will be the current question object +let charactersInPlay //Will be an array of all the people left in the game +let personToConfirm; -// Draw the game board +// Draw the game board const generateBoard = () => { - board.innerHTML = '' + + board.innerHTML = '' //code will also filter the boards (safetyline?) charactersInPlay.forEach((person) => { - board.innerHTML += ` + //+ adds to the html, does not overwrite it. + //it "Grabs" the board element and changing the inner html + board.innerHTML += + //use the information in the array (charactersInPlay) to shoe information about people. + //${person.name} the value of all the names in array (CHARACTERS) + `

${person.name}

${person.name} @@ -223,103 +238,189 @@ const generateBoard = () => { } // Randomly select a person from the characters array and set as the value of the variable called secret +//Math built in js methods (so that we will get a random person every time, if we use 0 it will always be the first person) const setSecret = () => { secret = charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)] + console.log(secret); //SB } + // This function to start (and restart) the game const start = () => { - // Here we're setting charactersInPlay array to be all the characters to start with + // Here we're setting charactersInPlay array to be all of the characters to start with charactersInPlay = CHARACTERS - // What else should happen when we start the game? + // Here I can add if anything else should happen when we start the game? + + + generateBoard();// Board made visible. + setSecret(); //Secret person selected (let secret, const setSecret = () => {) + console.log("Start function called"); } -// setting the currentQuestion object when you select something in the dropdown + + + +// Setting the currentQuestion object when selecting 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 = + // This variable (catagory) stores what option group (category) the question belongs to. + // Variable that stores the actual value of the question we've selected.--> + const value = questions.options[questions.selectedIndex].value; + //Careful to not mistake value attribute of the