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

Jump to bottom

Guess Who Project - Evelyn Del Carmen #349

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

Guess Who Project - Evelyn Del Carmen #349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ed14c0f
added eyes and hair to html
EvelynDelCarmen Sep 6, 2023
47fc013
starting w the java
EvelynDelCarmen Sep 6, 2023
cb529ca
const start function
EvelynDelCarmen Sep 6, 2023
9f733bf
added the class=card
EvelynDelCarmen Sep 6, 2023
765bd5f
added the function to start the game JS
EvelynDelCarmen Sep 6, 2023
0118992
added the start event listner
EvelynDelCarmen Sep 7, 2023
34044de
selectQ eventlist
EvelynDelCarmen Sep 7, 2023
641725c
restart function
EvelynDelCarmen Sep 7, 2023
fb46a4b
else if category
EvelynDelCarmen Sep 9, 2023
381314c
generateboard after the filter function
EvelynDelCarmen Sep 9, 2023
c17237d
guess function
EvelynDelCarmen Sep 9, 2023
61af0cd
checkmyguess function
EvelynDelCarmen Sep 9, 2023
c1ed060
winOrLose
EvelynDelCarmen Sep 9, 2023
666f879
eventlistner
EvelynDelCarmen Sep 9, 2023
575c5bc
css
EvelynDelCarmen Sep 9, 2023
37e2bbb
start button
EvelynDelCarmen Sep 10, 2023
7c814bc
restart
EvelynDelCarmen Sep 11, 2023
34cf989
second try to deploy
EvelynDelCarmen Sep 11, 2023
9632fbc
Update README.md
EvelynDelCarmen Sep 11, 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
10 changes: 4 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
# Project Name
# 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.
A board game called "Guess Who" - mainly to practice Javascript.

## 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 had a really confusing time doing this project, I did it but I do not fully understand how I did it. I checked a lot in Stack Overflow and asked ChatGPT to explain stuff for me along the 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.
https://guess-who-evelyndelcarmen.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>Guess Who? by Evelyn del Car</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" />

<button id="filter" class="filled-button">FIND OUT</button>
</aside>
<h1>Does the person have</h1>

<section class="board-wrapper">
<main class="game-board" id="board"></main>
</section>
<!-- Select = dropdown -->

<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>
<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>
<!-- Add the rest of hair colors as options -->
</optgroup>
<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 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>

<button id="filter" class="filled-button">FIND OUT</button>
</aside>

<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>
</div>
</section>
<script src="script.js"></script>
</body>

</html>
Loading