Skip to content

Commit 54e89b8

Browse files
mmtrezmmtrez
committed
Guess My Number project
1 parent cd0534d commit 54e89b8

File tree

3 files changed

+280
-0
lines changed

3 files changed

+280
-0
lines changed

‎assets/css/Guess_My_Number.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
* {
2+
margin: 0;
3+
}
4+
body {
5+
background-color: #2b2b2b;
6+
}
7+
p,
8+
h1 {
9+
color: #eee;
10+
}
11+
header {
12+
padding: 1.5rem;
13+
}
14+
.inner-header-container {
15+
display: flex;
16+
justify-content: space-between;
17+
align-items: center;
18+
}
19+
.inner-header-container p {
20+
font-size: 1.125rem;
21+
}
22+
button {
23+
border: none;
24+
outline: none;
25+
padding: 0.75rem 1.5rem;
26+
font-size: 1.5rem;
27+
background-color: #eee;
28+
cursor: pointer;
29+
}
30+
31+
.app-title {
32+
font-size: 3rem;
33+
text-align: center;
34+
margin-top: 3rem;
35+
}
36+
.qmark-container {
37+
display: flex;
38+
justify-content: center;
39+
margin-block: 2rem;
40+
}
41+
.qmark {
42+
background-color: #eee;
43+
width: 6rem;
44+
height: 6rem;
45+
font-size: 4rem;
46+
color: #2b2b2b;
47+
display: inline-flex;
48+
place-items: center;
49+
place-content: center;
50+
}
51+
.qmark::before {
52+
content: "";
53+
height: 0.5rem;
54+
width: 100%;
55+
position: absolute;
56+
color: #eee;
57+
background-color: #eee;
58+
z-index: -1;
59+
}
60+
main {
61+
display: flex;
62+
justify-content: center;
63+
margin-top: 6rem;
64+
}
65+
.main-container {
66+
display: flex;
67+
flex-direction: column;
68+
justify-content: space-between;
69+
}
70+
.main-container * {
71+
margin-block: 0.5rem;
72+
margin-inline: 4rem;
73+
}
74+
.main-container input {
75+
background-color: #2b2b2b;
76+
border: 0.25rem solid #eee;
77+
font-size: 3rem;
78+
max-width: 12rem;
79+
padding-block: 0.25rem;
80+
text-align: center;
81+
caret-color: #eee;
82+
color: #eee;
83+
outline: none;
84+
}
85+
.main-container p {
86+
font-size: 1.5rem;
87+
}
88+
.victory {
89+
background-color: limegreen;
90+
}
91+
.defeat {
92+
background-color: darkred;
93+
}
94+
.modal {
95+
display: none;
96+
min-width: 30rem;
97+
max-width: 45rem;
98+
padding: 1.25rem;
99+
position: absolute;
100+
background-color: #eee;
101+
color: #2b2b2b;
102+
border-radius: 0.5rem;
103+
left: 50%;
104+
top: 50%;
105+
transform: translate(-50%, -50%);
106+
}
107+
.modal * {
108+
color: #2b2b2b;
109+
margin-block: 1.5rem;
110+
}
111+
#close_btn {
112+
margin: 0;
113+
margin-left: calc(100% - 1.25rem);
114+
cursor: pointer;
115+
padding: 0.25rem;
116+
display: inline-block;
117+
}
118+
.fade {
119+
filter: blur(8px);
120+
}

‎assets/js/Guess_My_Number.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
"use strict";
2+
3+
// Get dom elements
4+
const body = document.getElementsByTagName("body")[0];
5+
const resetBtnEl = document.getElementById("reset_btn");
6+
const checkBtnEl = document.getElementById("check_btn");
7+
const inputEl = document.getElementById("input_num");
8+
const [guessStatusEl, scoreEl, highscoreEl] =
9+
document.getElementById("status_container").children;
10+
const modalEl = document.getElementById("modal");
11+
const closeBtnEl = document.getElementById("close_btn");
12+
const modalBtnEl = document.getElementById("modal_trigger");
13+
const contentContainerEl = document.getElementById("content_container");
14+
15+
// variables
16+
let goal;
17+
let score = 20;
18+
let highscore = 0;
19+
20+
// generate random goal number
21+
function generateGoal() {
22+
goal = Math.floor(Math.random() * 20) + 1;
23+
console.log(goal);
24+
}
25+
26+
generateGoal();
27+
28+
checkBtnEl.addEventListener("click", () => {
29+
// get user input
30+
const userGuess = Number(inputEl.value);
31+
console.log(userGuess);
32+
33+
// game logic
34+
if (userGuess > goal) {
35+
guessStatusEl.textContent = "Too high!";
36+
score--;
37+
scoreEl.textContent = `Score: ${score}`;
38+
} else if (userGuess < goal) {
39+
guessStatusEl.textContent = "Too low!";
40+
score--;
41+
scoreEl.textContent = `Score: ${score}`;
42+
} else {
43+
guessStatusEl.textContent = "Bingo!!!";
44+
body.classList.add("victory");
45+
score > highscore && (highscore = score);
46+
highscoreEl.textContent = `Highscore: ${highscore}`;
47+
}
48+
if (score <= 0) {
49+
body.classList.add("defeat");
50+
}
51+
});
52+
53+
// reset game
54+
resetBtnEl.addEventListener("click", () => {
55+
body.classList.remove("victory");
56+
body.classList.remove("defeat");
57+
score = 20;
58+
scoreEl.textContent = `Score: ${score}`;
59+
generateGoal();
60+
guessStatusEl.textContent = "";
61+
inputEl.value = "";
62+
});
63+
64+
// open model
65+
modalBtnEl.addEventListener("click", () => {
66+
modalEl.style.display = "block";
67+
contentContainerEl.classList.add("fade");
68+
});
69+
70+
// close modal
71+
closeBtnEl.addEventListener("click", () => {
72+
modalEl.style.display = "none";
73+
contentContainerEl.classList.remove("fade");
74+
});
75+
76+
// close btn with "esc" button
77+
document.addEventListener("keydown", (event) => {
78+
if (event.key === "Escape") {
79+
modalEl.style.display = "none";
80+
contentContainerEl.classList.remove("fade");
81+
}
82+
});
83+
84+
// bind "Enter" with Check button ( pressing enter = clicking check button)
85+
document.addEventListener("keydown", (event) => {
86+
if (event.key === "Enter") {
87+
// get user input
88+
const userGuess = Number(inputEl.value);
89+
console.log(userGuess);
90+
91+
// game logic
92+
if (userGuess > goal) {
93+
guessStatusEl.textContent = "Too high!";
94+
score--;
95+
scoreEl.textContent = `Score: ${score}`;
96+
} else if (userGuess < goal) {
97+
guessStatusEl.textContent = "Too low!";
98+
score--;
99+
scoreEl.textContent = `Score: ${score}`;
100+
} else {
101+
guessStatusEl.textContent = "Bingo!!!";
102+
body.classList.add("victory");
103+
score > highscore && (highscore = score);
104+
highscoreEl.textContent = `Highscore: ${highscore}`;
105+
}
106+
if (score <= 0) {
107+
body.classList.add("defeat");
108+
}
109+
}
110+
});

‎public/Guess_My_Number.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Guess My Number!</title>
7+
<link rel="stylesheet" href="../assets/css/Guess_My_Number.css" />
8+
</head>
9+
<body>
10+
<div id="content_container">
11+
<header>
12+
<div class="inner-header-container">
13+
<div>
14+
<button id="reset_btn">Again!</button>
15+
<button id="modal_trigger">Modal</button>
16+
</div>
17+
<p>(Between 1 and 20)</p>
18+
</div>
19+
<h1 class="app-title">Guess My Number!</h1>
20+
</header>
21+
<div class="qmark-container">
22+
<p class="qmark">?</p>
23+
</div>
24+
<main>
25+
<div class="main-container">
26+
<input type="number" id="input_num" placeholder="Guess" />
27+
<button id="check_btn">Check!</button>
28+
</div>
29+
<div id="status_container" class="main-container">
30+
<p id="guess_status"></p>
31+
<p id="score">Score: 20</p>
32+
<p id="highscore">Highscore: 0</p>
33+
</div>
34+
</main>
35+
</div>
36+
<div class="modal" id="modal">
37+
<p id="close_btn">❌</p>
38+
<h1 class="modal-title">I'm a modal window</h1>
39+
<p>
40+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea incidunt
41+
ducimus facere maxime dolorum, fugiat modi ex veniam accusamus corporis?
42+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea incidunt
43+
ducimus facere maxime dolorum, fugiat modi ex veniam accusamus corporis?
44+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea incidunt
45+
ducimus facere maxime dolorum, fugiat modi ex veniam accusamus corporis?
46+
</p>
47+
</div>
48+
<script src="../assets/js/Guess_My_Number.js"></script>
49+
</body>
50+
</html>

0 commit comments

Comments
 (0)