├── index.html
├── script.js
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Guess My Number
8 |
9 |
10 |
11 | Guess My Number
12 | (Between 1 and 20)
13 |
14 | ?
15 |
16 |
17 |
21 |
22 | Start Guessing...
23 | 💯 Score: 20
24 |
25 | 🥇 Highscore: 0
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | let secretNumber = 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 =
9 | message;
10 | }
11 |
12 | document.querySelector(".check").addEventListener("click", function() {
13 | const guess = Number(document.querySelector(".guess").value);
14 | console.log(guess, typeof guess);
15 |
16 | // When there is no input
17 | if (!guess) {
18 | displayMessage("🚫 No Number");
19 |
20 | // When player wins
21 | } else if (guess === secretNumber) {
22 | displayMessage("🎉 Correct Number");
23 | document.querySelector(".number").textContent =
24 | secretNumber;
25 |
26 | document.querySelector("body").style.
27 | backgroundColor = "#60b347";
28 | document.querySelector(".number").style.width =
29 | "30rem";
30 |
31 | if (score > highscore) {
32 | highscore = score;
33 | document.querySelector(".highscore").
34 | textContent = highscore;
35 | }
36 |
37 | // When guess is too wrong
38 | } else if (guess !== secretNumber) {
39 | if (score > 1) {
40 | displayMessage(guess > secretNumber ? "📈 Too High" :
41 | "📉 Too Low");
42 | score--;
43 | document.querySelector(".score").textContent =
44 | score;
45 | } else {
46 | displayMessage("❌ You lost the game");
47 | document.querySelector(".score").textContent =
48 | 0;
49 | }
50 | }
51 | });
52 |
53 | document.querySelector(".again").addEventListener
54 | ("click", function() {
55 | score = 20;
56 | secretNumber = Math.trunc(Math.random() * 20) + 1;
57 |
58 | displayMessage("Start Guessing...");
59 | document.querySelector(".score").textContent =
60 | score;
61 | document.querySelector(".number").textContent = "?";
62 | document.querySelector(".guess").value = "";
63 |
64 | document.querySelector("body").style.
65 | backgroundColor = "#222";
66 | document.querySelector(".number").style.width =
67 | "15rem";
68 | })
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
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: 90%;
11 | box-sizing: border-box;
12 | }
13 |
14 | body {
15 | font-family: "Press Start 2P", sans-serif;
16 | color: #eee;
17 | background-color: #222;
18 | }
19 |
20 | header {
21 | position: relative;
22 | height: 35vh;
23 | border-bottom: 7px solid #eee;
24 | }
25 |
26 | main {
27 | height: 65vh;
28 | color: #eee;
29 | display: flex;
30 | align-items: center;
31 | justify-content: space-around;
32 | }
33 |
34 | .left {
35 | width: 52rem;
36 | display: flex;
37 | flex-direction: column;
38 | align-items: center;
39 | }
40 |
41 | .right {
42 | width: 52rem;
43 | font-size: 2rem;
44 | }
45 |
46 | h1 {
47 | font-size: 4rem;
48 | text-align: center;
49 | position: absolute;
50 | width: 100%;
51 | top: 52%;
52 | left: 50%;
53 | transform: translate(-50%, -50%);
54 | }
55 |
56 | .number {
57 | background: #eee;
58 | color: #333;
59 | font-size: 6rem;
60 | font-weight: bold;
61 | width: 12rem;
62 | height: 10rem;
63 | padding: 2rem;
64 | text-align: center;
65 | display: flex;
66 | align-items: center;
67 | justify-content: center;
68 | position: absolute;
69 | bottom: 0;
70 | left: 50%;
71 | transform: translate(-50%, 50%);
72 | border-radius: 10px;
73 | }
74 |
75 | .between {
76 | position: absolute;
77 | top: 1rem;
78 | right: 1rem;
79 | font-size: 1.5rem;
80 | }
81 |
82 | .message {
83 | font-size: 2.5rem;
84 | margin-bottom: 2rem;
85 | }
86 |
87 | .label-score, .label-highscore {
88 | font-size: 2rem;
89 | margin-top: 1rem;
90 | }
91 |
92 | .btn {
93 | border: 2px solid #333;
94 | color: #333;
95 | font-size: 1.5rem;
96 | padding: 0.5rem 1.5rem;
97 | border-radius: 5px;
98 | cursor: pointer;
99 | font-family: "Press Start 2P", sans-serif;
100 | text-transform: uppercase;
101 |
102 | transition: all 0.2s;
103 | }
104 |
105 | .btn:active {
106 | box-shadow: none;
107 | transform: translate(3px, 3px);
108 | }
109 |
110 |
111 | .again {
112 | position: absolute;
113 | top: 1rem;
114 | left: 1rem;
115 | }
116 |
117 | .guess {
118 | font-size: 3rem;
119 | width: 8rem;
120 | text-align: center;
121 | padding: 0.5rem;
122 | margin-bottom: 2rem;
123 | border: none;
124 | border-radius: 5px;
125 | box-shadow: 0 0.5rem #666;
126 | }
127 |
128 | .check {
129 | font-size: 2rem;
130 | padding: 1rem 2rem;
131 | color: #222;
132 | border: none;
133 | border-radius: 5px;
134 | cursor: pointer;
135 | box-shadow: 0 0.5rem #666;
136 | transition: all 0.2s;
137 | }
138 |
139 | @media (max-width: 768px) {
140 | html {
141 | font-size: 75%;
142 | }
143 |
144 | h1 {
145 | font-size: 3rem;
146 | }
147 |
148 | .number {
149 | font-size: 5rem;
150 | width: 10rem;
151 | height: 8rem;
152 | padding: 1.5rem;
153 | }
154 |
155 | .between {
156 | position: absolute;
157 | top: 1rem;
158 | right: 1rem;
159 | font-size: 1rem;
160 | }
161 |
162 | .message {
163 | font-size: 1rem;
164 | }
165 |
166 | .btn {
167 | font-size: 1rem;
168 | padding: 0.4rem 1.2rem;
169 | }
170 |
171 | .again {
172 | top: 0.3rem;
173 | left: 0.3rem;
174 | }
175 |
176 | .guess {
177 | font-size: 2rem;
178 | width: 7rem;
179 | }
180 |
181 | .check {
182 | font-size: 1.8rem;
183 | padding: 0.8rem 1.5rem;
184 | }
185 |
186 | .left, .right {
187 | width: 100%;
188 | max-width: 100%;
189 | margin-bottom: 1rem;
190 | }
191 | }
192 |
193 | @media (max-width: 480px) {
194 | html {
195 | font-size: 70%;
196 | }
197 |
198 | h1 {
199 | font-size: 2.5rem;
200 | }
201 |
202 | .number {
203 | font-size: 3rem;
204 | width: 8rem;
205 | height: 6rem;
206 | padding: 1rem;
207 | }
208 |
209 | .message {
210 | font-size: 1.8rem;
211 | }
212 |
213 | .btn {
214 | font-size: 1.2rem;
215 | padding: 0.3rem 1rem;
216 | }
217 |
218 | .again {
219 | top: 0.2rem;
220 | left: 0.2rem;
221 | }
222 |
223 | .guess {
224 | font-size: 2rem;
225 | width: 6rem;
226 | }
227 |
228 | .check {
229 | font-size: 1.5rem;
230 | padding: 0.6rem 1.2rem;
231 | }
232 |
233 | .left, .right {
234 | width: 100%;
235 | max-width: 100%;
236 | padding: 0 1rem 3rem;
237 | }
238 |
239 | .right {
240 | font-size: 1.5rem;
241 | }
242 | }
--------------------------------------------------------------------------------