Skip to content

Commit b8499b3

Browse files
abanoub-refaatabanoub-refaat
authored
Guess My Number Game
0 parents  commit b8499b3

File tree

3 files changed

+244
-0
lines changed

3 files changed

+244
-0
lines changed

‎GuessMyNumber/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Guess My Number!</title>
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Guess My Number!</h1>
13+
<p class="between">(Between 1 and 20)</p>
14+
<button class="btn again">Again!</button>
15+
<div class="number">?</div>
16+
</header>
17+
<main>
18+
<section class="left">
19+
<input type="number" class="guess" />
20+
<button class="btn check">Check!</button>
21+
</section>
22+
<section class="right">
23+
<p class="message">Start guessing...</p>
24+
<p class="label-score">💯 Score: <span class="score">20</span></p>
25+
<p class="label-highscore">
26+
🥇 Highscore: <span class="highscore">0</span>
27+
</p>
28+
</section>
29+
</main>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎GuessMyNumber/script.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
"use strict";
2+
3+
let number = Math.trunc(Math.random() * 20) + 1;
4+
let score = 20;
5+
let highscore = 0;
6+
7+
const displayMessage = function (message) {
8+
document.querySelector(".message").textContent = message;
9+
};
10+
11+
document.querySelector(".check").addEventListener("click", function () {
12+
const guess = Number(document.querySelector(".guess").value);
13+
if (!guess) {
14+
displayMessage("No Number!");
15+
} else if (guess === number) {
16+
displayMessage("Correct Number!");
17+
document.querySelector(".number").textContent = number;
18+
//Changing the style when the answer is correct.
19+
document.querySelector("body").style.backgroundColor = "#60b347";
20+
document.querySelector(".number").style.width = "30rem";
21+
//Checking for the highscore
22+
if (score > highscore) {
23+
highscore = score;
24+
document.querySelector(".highscore").textContent = highscore;
25+
}
26+
} else if (guess !== number) {
27+
if (score > 1) {
28+
displayMessage(guess > number ? "Too High!" : "Too Low!");
29+
score--;
30+
document.querySelector(".score").textContent = score;
31+
} else {
32+
displayMessage("You Lost the Game!");
33+
}
34+
}
35+
});
36+
37+
document.querySelector(".again").addEventListener("click", function () {
38+
score = 20;
39+
number = Math.trunc(Math.random() * 20) + 1;
40+
displayMessage("Start Guessing...");
41+
document.querySelector(".score").textContent = score;
42+
document.querySelector(".number").textContent = "?";
43+
document.querySelector(".guess").value = "";
44+
document.querySelector("body").style.backgroundColor = "#222";
45+
document.querySelector(".number").style.width = "15rem";
46+
});

‎GuessMyNumber/style.css

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: inherit;
7+
}
8+
9+
html {
10+
font-size: 62.5%;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
margin: 50% auto;
16+
font-family: "Press Start 2P", sans-serif;
17+
color: #eee;
18+
background-color: #222;
19+
/* background-color: #60b347; */
20+
}
21+
22+
/* LAYOUT */
23+
header {
24+
position: relative;
25+
height: 35vh;
26+
border-bottom: 7px solid #eee;
27+
}
28+
29+
main {
30+
height: 65vh;
31+
color: #eee;
32+
display: flex;
33+
align-items: center;
34+
justify-content: space-around;
35+
}
36+
37+
.left {
38+
width: 52rem;
39+
display: flex;
40+
flex-direction: column;
41+
align-items: center;
42+
}
43+
44+
.right {
45+
width: 52rem;
46+
font-size: 2rem;
47+
}
48+
49+
/* ELEMENTS STYLE */
50+
h1 {
51+
font-size: 4rem;
52+
text-align: center;
53+
position: absolute;
54+
width: 100%;
55+
top: 52%;
56+
left: 50%;
57+
transform: translate(-50%, -50%);
58+
}
59+
60+
.number {
61+
background: #eee;
62+
color: #333;
63+
font-size: 6rem;
64+
width: 15rem;
65+
padding: 3rem 0rem;
66+
text-align: center;
67+
position: absolute;
68+
bottom: 0;
69+
left: 50%;
70+
transform: translate(-50%, 50%);
71+
}
72+
73+
.between {
74+
font-size: 1.4rem;
75+
position: absolute;
76+
top: 2rem;
77+
right: 2rem;
78+
}
79+
80+
.again {
81+
position: absolute;
82+
top: 2rem;
83+
left: 2rem;
84+
}
85+
86+
.guess {
87+
background: none;
88+
border: 4px solid #eee;
89+
font-family: inherit;
90+
color: inherit;
91+
font-size: 5rem;
92+
padding: 2.5rem;
93+
width: 25rem;
94+
text-align: center;
95+
display: block;
96+
margin-bottom: 3rem;
97+
}
98+
99+
.btn {
100+
border: none;
101+
background-color: #eee;
102+
color: #222;
103+
font-size: 2rem;
104+
font-family: inherit;
105+
padding: 2rem 3rem;
106+
cursor: pointer;
107+
}
108+
109+
.btn:hover {
110+
background-color: #ccc;
111+
}
112+
113+
.message {
114+
margin-bottom: 8rem;
115+
height: 3rem;
116+
}
117+
118+
.label-score {
119+
margin-bottom: 2rem;
120+
}
121+
122+
@media (max-width: 600px) {
123+
header {
124+
height: 29vh;
125+
border-bottom: 3px solid #eee;
126+
}
127+
main {
128+
height: auto;
129+
flex-direction: column;
130+
}
131+
.between {
132+
position: relative;
133+
font-size: 1.2rem;
134+
top: 16rem;
135+
right: 0rem;
136+
text-align: center;
137+
}
138+
.btn {
139+
font-size: 1.5rem;
140+
padding: 1rem 1rem;
141+
}
142+
h1 {
143+
font-size: 2.24rem;
144+
}
145+
.number {
146+
font-size: 4rem;
147+
padding: 3rem 0rem;
148+
}
149+
.right {
150+
width: auto;
151+
font-size: 1.46rem;
152+
margin: 2.5rem;
153+
}
154+
.guess {
155+
background: none;
156+
border: 3px solid #eee;
157+
font-size: 1rem;
158+
padding: 1.7rem;
159+
width: 23rem;
160+
margin: 6.9rem auto 3rem;
161+
}
162+
.message {
163+
margin-bottom: 1rem;
164+
height: 3rem;
165+
}
166+
}

0 commit comments

Comments
 (0)