Skip to content
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

Guess who project #334

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

Guess who project #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
89e5663
categories
isarobertini Sep 4, 2023
9d351c7
first alerts
isarobertini Sep 4, 2023
5860895
started event listener
isarobertini Sep 5, 2023
abbc158
debugged
isarobertini Sep 6, 2023
77a228d
genereates
isarobertini Sep 6, 2023
a2c5f18
after debugging with miko
isarobertini Sep 6, 2023
fcb31a2
restart btn
isarobertini Sep 8, 2023
36f07d0
added s in smokers
isarobertini Sep 10, 2023
2c8d889
Update README.md
isarobertini Sep 10, 2023
b7ccfb6
fixed bug
isarobertini Sep 20, 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
11 changes: 5 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
# Project Name
Guess Who project

This is an online version of the game "Guess Who". The assignment was to create it with a focus on Java Script.

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 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?
It was hard to grasp the logical steps in the beginning, easier when braking it down.

## 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-game-deployed.netlify.app/
121 changes: 65 additions & 56 deletions code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,73 @@
<!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>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>

<h1>Does the person have</h1>
<body>
<aside class="question-section">
<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>
<!-- Add the hair colors as options -->
<select title="questions" id="questions">
<optgroup label="hair">
<option value="brown">Brown hair?</option>
<option value="yellow">Yellow hair?</option>
<option value="hidden">Hidden hair?</option>
<option value="black">Black 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>
</optgroup>

<button id="filter" class="filled-button">FIND OUT</button>
</aside>
<!-- Add the rest of eye colors as options -->
<optgroup label="eyes">
<option value="brown">Brown eyes?</option>
<option value="blue">Blue eyes?</option>
<option value="green">Green eyes?</option>
<option value="hidden">Hidden eyes?</option>
<!-- Add the other accessory option here. (hat) -->
</optgroup>
<optgroup label="accessories">
<option value="hat">A hat?</option>
<option value="glasses">Glasses?</option>
</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">I WANT TO FIND OUT!</button>
</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">
<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>
<audio src="./sounds/win.wav" id="win"></audio>
<audio src="./sounds/lose.wav" id="lose"></audio>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The audio button should be removed. It isn't used in the Javascript document.

</div>
</section>
<script src="script.js"></script>
</body>

</html>
Loading