Skip to content

Commit 030338a

Browse files
IshitaBisariaIshitaBisaria
authored
Add files via upload
1 parent 77dbf6e commit 030338a

File tree

3 files changed

+228
-0
lines changed

3 files changed

+228
-0
lines changed

‎90 - Guess the Number/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 http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Guess My Number</title>
8+
<link rel="stylesheet" href="style.css">
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>

‎90 - Guess the Number/script.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
`use strict`;
2+
let secretNumber = Math.trunc(Math.random()*20) + 1;
3+
let highScore = 0;
4+
let score = 20;
5+
6+
const displayMessage = function (message) {
7+
document.querySelector(`.message`).textContent = message;
8+
}
9+
10+
11+
// Refactoring the code
12+
document.querySelector(`.check`).addEventListener(`click`,function() {
13+
const guess = Number(document.querySelector(`.guess`).value);
14+
if(!guess) {
15+
// document.querySelector(`message`).textContent('No Number!');
16+
displayMessage(`No Number!`);
17+
}
18+
else if(guess === secretNumber) {
19+
// highScore = Math.max(score, highScore);
20+
// document.querySelector(`highscore`).textContent = highScore;
21+
if(score > highScore) {
22+
highScore = score;
23+
document.querySelector(`.highscore`).textContent = highScore;
24+
}
25+
document.querySelector(`.number`).textContent = secretNumber;
26+
document.querySelector(`body`).style.backgroundColor = `#60b347`;
27+
document.querySelector(`.number`).style.width = `30rem`;
28+
displayMessage(`Correct Number!`);
29+
// document.querySelector(`.message`).textContent = `Correct Number!`;
30+
}
31+
else {
32+
if(score > 1) {
33+
score--;
34+
displayMessage(guess < secretNumber ? `Too Low!` : `Too High!`);
35+
// document.querySelector(`.message`).textContent = guess < secretNumber ? `Too Low!` : `Too High!`;
36+
document.querySelector(`.score`).textContent = score;
37+
}
38+
else {
39+
displayMessage(`You lost the game!`);
40+
// document.querySelector(`.message`).textContent = `You lost the game!`;
41+
document.querySelector(`.score`).textContent = 0;
42+
}
43+
}
44+
// else if(guess < secretNumber) {
45+
// if(score > 1) {
46+
// score--;
47+
// document.querySelector(`.message`).textContent = `Too Low!`;
48+
// document.querySelector(`.score`).textContent = score;
49+
// }
50+
// else {
51+
// document.querySelector(`.message`).textContent = `You lost the game!`;
52+
// document.querySelector(`.score`).textContent = 0;
53+
// }
54+
// }
55+
// else {
56+
// if(score > 1) {
57+
// score--;
58+
// document.querySelector(`.message`).textContent = `Too High!`;
59+
// document.querySelector(`.score`).textContent = score;
60+
// }
61+
// else {
62+
// document.querySelector(`.message`).textContent = `You lost the game!`;
63+
// document.querySelector(`.score`).textContent = 0;
64+
// }
65+
// }
66+
});
67+
68+
69+
70+
document.querySelector(`.again`).addEventListener(`click`,function() {
71+
score = 20;
72+
secretNumber = Math.trunc(Math.random()*20) + 1;
73+
displayMessage(`Start guessing...`);
74+
// document.querySelector(`.message`).textContent = `Start guessing...`;
75+
document.querySelector(`.score`).textContent = score;
76+
document.querySelector(`.number`).textContent = `?`;
77+
document.querySelector(`.guess`).value = ``;
78+
document.querySelector(`body`).style.backgroundColor = `#222`;
79+
document.querySelector(`.number`).style.width = `15rem`;
80+
})

‎90 - Guess the Number/style.css

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: inherit;
7+
}
8+
9+
html {
10+
font-size: 62.5%;
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+
justify-content: space-around;
31+
align-items: center;
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+
width: 15rem;
61+
padding: 3rem 0rem;
62+
text-align: center;
63+
position: absolute;
64+
bottom: 0;
65+
left: 50%;
66+
transform: translate(-50%, 50%);
67+
}
68+
69+
.between {
70+
font-size: 1.4rem;
71+
position: absolute;
72+
top: 2rem;
73+
right: 2rem;
74+
}
75+
76+
.again {
77+
position: absolute;
78+
top: 2rem;
79+
left: 2rem;
80+
}
81+
82+
.guess {
83+
background: none;
84+
border: 4px solid #eee;
85+
font-family: inherit;
86+
color: inherit;
87+
font-size: 5rem;
88+
padding: 2.5rem;
89+
width: 25rem;
90+
text-align: center;
91+
display: block;
92+
margin-bottom: 3rem;
93+
}
94+
95+
.btn {
96+
border: none;
97+
background-color: #eee;
98+
color: #222;
99+
font-size: 2rem;
100+
font-family: inherit;
101+
padding: 2rem 3rem;
102+
cursor: pointer;
103+
}
104+
105+
.btn:hover {
106+
background-color: #ccc;
107+
}
108+
109+
.message {
110+
margin-bottom: 8rem;
111+
height: 3rem;
112+
}
113+
114+
.label-score {
115+
margin-bottom: 2rem;
116+
}

0 commit comments

Comments
 (0)