Skip to content

Wk 3 - Project Guess Who - Submitted #328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Wk 3 - Project Guess Who - Submitted #328

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
cf9707d
step 1 and 2 complete - start of game
BeckieMorton Sep 5, 2023
da17464
added comments cleaned up code
BeckieMorton Sep 7, 2023
ef5a596
got selectQuestion and checkQuestion working
BeckieMorton Sep 7, 2023
7244d30
filter works
BeckieMorton Sep 7, 2023
279055a
filterCharacters function works
BeckieMorton Sep 7, 2023
3e6f7b2
confirm guess working
BeckieMorton Sep 7, 2023
8e90d5e
got the play again button working, restarts properly
BeckieMorton Sep 7, 2023
576e334
all steps working
BeckieMorton Sep 7, 2023
e43602f
added nationality in the array and as an option
BeckieMorton Sep 7, 2023
afb26be
added question count
BeckieMorton Sep 9, 2023
1225602
added question count to win and lose screens
BeckieMorton Sep 9, 2023
ed2aeb1
neat code and comments fixed
BeckieMorton Sep 10, 2023
558ea0a
Update README.md
BeckieMorton Sep 11, 2023
7e1a106
Add files via upload
BeckieMorton Nov 27, 2023
e9b80a2
Update README.md
BeckieMorton Nov 27, 2023
9a2d63b
Update README.md
BeckieMorton Nov 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t

## 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://wk3-guesswho-c638bb.netlify.app/
132 changes: 76 additions & 56 deletions code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Name</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<aside class="question-section">
<button type="button" id="restart" class="outlined-button">RESTART</button>

<img
class="guess-who-icon"
src="images/guess-who-bubble.png"
alt="Guess Who"
/>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guess Who?</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
</head>

<h1>Does the person have</h1>
<body>
<aside class="question-section" id="questionSection">
<button type="button" id="restart" class="outlined-button">RESTART</button>

<select title="questions" id="questions">
<optgroup label="hair">
<option value="brown">brown hair</option>
<option value="yellow">yellow hair</option>
<!-- Add the rest of hair colors as options -->
</optgroup>
<optgroup label="eyes">
<option value="hidden">hidden eyes</option>
<!-- Add the rest of eye colors as options -->
</optgroup>
<optgroup label="accessories">
<option value="glasses">glasses</option>
<!-- Add the other accessory option here. (hat) -->
</optgroup>
<optgroup label="other">
<option value="smoker">a smoking habit</option>
</optgroup>
</select>
<img class="guess-who-icon" src="images/guess-who-bubble.png" alt="Guess Who" />
<h1>Does the person have</h1>

<button id="filter" class="filled-button">FIND OUT</button>
</aside>
<select title="questions" id="questions">
<option selected disabled>Choose here....</option>
<optgroup label="hair">
<option value="brown">brown hair</option>
<option value="black">black hair</option>
<option value="yellow">yellow hair</option>
<option value="hidden">hidden hair</option>
<option value="grey">grey hair</option>
<option value="orange">orange hair</option>
<option value="purple">purple hair</option>
<option value="white">white hair</option>
<!-- Added the rest of hair colors (brown, blue, green) -->
</optgroup>
<optgroup label="eyes">
<option value="hidden">hidden eyes</option>
<option value="brown">brown eyes</option>
<option value="blue">blue eyes</option>
<option value="green">green eyes</option>
<!-- Added the rest of eye colors (brown, blue, green) -->
</optgroup>
<optgroup label="accessories">
<option value="glasses">glasses</option>
<option value="hat">a hat or headwear</option>
<!-- Added the a hat option -->
</optgroup>
<optgroup label="nationality">
<option value="british">British</option>
<option value="icelandic">Icelandic</option>
<option value="australian">Australian</option>
<option value="swiss">Swiss</option>
<!-- Added the nationality label with 4 options -->
</optgroup>
<optgroup label="other">
<option value="smoker">a smoking habit</option>
</optgroup>
</select>

<section class="board-wrapper">
<main class="game-board" id="board"></main>
</section>
<button id="filter" class="filled-button">FIND OUT</button>
<!--- Added Questions asked counter for game page -->
<p id="questionsAsked"></p>
<!-- Added a game timer -->
<div class="game-timer">
<label id="minutes">00</label>
<label id="colon">:</label>
<label id="seconds">00</label>
</div>
</aside>

<section id="winOrLose" class="win-or-lose-wrapper">
<div class="win-or-lose">
<img
class="guess-who-icon"
src="images/guess-who-bubble.png"
alt="Guess Who"
/>
<h1 id="winOrLoseText"></h1>
<button type="button" id="playAgain" class="filled-button">PLAY AGAIN</button>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
<section class="board-wrapper">
<main class="game-board" id="board"></main>
</section>

<section id="winOrLose" class="win-or-lose-wrapper">
<img class="guess-who-icon" src="images/guess-who-bubble.png" alt="Guess Who" />
<h1 id="winOrLoseText"></h1>
<p id="winOrLoseTexth2"></p>
<!--- Added Questions asked counter for win or lose page -->
<p id="worLQuestionsAsked"></p>
<button type="button" id="playAgain" class="filled-button">PLAY AGAIN</button>
</section>
<script src="script.js"></script>
</body>

</html>
Loading