Skip to content

Commit 04b4537

Browse files
Anujit1Anujit1
committed
add project number guess
1 parent 3653c4b commit 04b4537

File tree

4 files changed

+285
-0
lines changed

4 files changed

+285
-0
lines changed

‎guess_number/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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 The Number</title>
7+
8+
<!-- css -->
9+
<link rel="stylesheet" href="styles.css">
10+
11+
<!-- fonts -->
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Griffy&display=swap" rel="stylesheet">
15+
16+
</head>
17+
18+
<body>
19+
<div class="navbar">
20+
<nav>What's the number?</nav>
21+
</div>
22+
23+
<div class="canvas">
24+
25+
<h4 class="heading1">Try to Guess a number between 1 - 10.</h4>
26+
27+
<h4 id="result"><span id="guess-count"></span></h4>
28+
29+
<form>
30+
<label for="guess-input"><input id="guess-input" required></label>
31+
32+
<p id="message"></p>
33+
34+
<input type="submit" id="btn" value="Place Guess">
35+
36+
<div class="guess-data">
37+
<h3>Previous guesses</h3>
38+
<h4><span id="data"></span></h4>
39+
</div>
40+
41+
</form>
42+
</div>
43+
44+
</body>
45+
46+
<script src="script.js"></script>
47+
</html>

‎guess_number/script.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
let randomNum = Math.floor(Math.random() * 10) + 1;
2+
let previousGuess = [];
3+
let guessCount = 10;
4+
let playGame = true;
5+
6+
const input = document.getElementById('guess-input');
7+
const submit = document.getElementById('btn');
8+
const message = document.getElementById('message');
9+
const result = document.getElementById('result');
10+
const data = document.getElementById('data');
11+
12+
result.innerHTML = `${guessCount} guess${guessCount !== 1 ? 'es' : ''} remaining.`;
13+
data.innerHTML = previousGuess.join(', ');
14+
15+
16+
submit.addEventListener('click', function (e) {
17+
e.preventDefault();
18+
19+
if (!playGame) {
20+
newGame();
21+
return;
22+
}
23+
24+
const guess = parseInt(input.value);
25+
26+
if (isNaN(guess) || guess < 1 || guess > 10) {
27+
input.value = '';
28+
alert('Please enter a valid number between 1 and 10.');
29+
return;
30+
}
31+
32+
validateGuess(guess);
33+
});
34+
35+
function validateGuess(guess) {
36+
if (guess === randomNum) {
37+
displayMessage("🎉 You Won! 🎉");
38+
endGame();
39+
}
40+
else {
41+
guessCount--;
42+
previousGuess.push(guess);
43+
data.innerHTML = previousGuess.join(', ');
44+
input.value = '';
45+
result.innerHTML = `${guessCount} guesses remaining.`;
46+
47+
if (guessCount === 0) {
48+
displayMessage(`Game over. The number was ${randomNum}`);
49+
endGame();
50+
}
51+
else {
52+
result.innerHTML = `${guessCount} guess${guessCount !== 1 ? 'es' : ''} remaining.`;
53+
giveHint(guess);
54+
}
55+
}
56+
}
57+
58+
function giveHint(guess) {
59+
if (guess < randomNum) {
60+
displayMessage('Too low!');
61+
}
62+
else {
63+
displayMessage('Too high!');
64+
}
65+
}
66+
67+
function displayMessage(msg) {
68+
message.innerHTML = msg;
69+
}
70+
71+
function endGame() {
72+
playGame = false;
73+
input.setAttribute('disabled', true);
74+
submit.value = 'Try Again';
75+
}
76+
77+
function newGame() {
78+
randomNum = Math.floor(Math.random() * 10) + 1;
79+
previousGuess = [];
80+
guessCount = 10;
81+
playGame = true;
82+
83+
input.removeAttribute('disabled');
84+
input.value = '';
85+
message.innerHTML = '';
86+
result.innerHTML = `${guessCount} guess${guessCount !== 1 ? 'es' : ''} remaining.`;
87+
submit.value = 'Place Guess';
88+
data.innerHTML = '';
89+
90+
console.log('New number:', randomNum);
91+
}

‎guess_number/styles.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
user-select: none;
6+
}
7+
8+
body{
9+
font-family: "Delius Swash Caps", cursive;
10+
background-color: #000;
11+
color: blueviolet;
12+
}
13+
14+
.navbar{
15+
font-family: "Griffy", system-ui;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
margin: 1em;
20+
font-size: 3em;
21+
}
22+
23+
.canvas{
24+
display: flex;
25+
flex-direction: column;
26+
flex-wrap: wrap;
27+
justify-content: center;
28+
align-items: center;
29+
margin-top: 2.5em;
30+
text-align: center;
31+
font-size: 1.5em;
32+
gap: 1.8em;
33+
letter-spacing: 0.2em;
34+
word-spacing: 0.4em;
35+
}
36+
37+
form{
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
gap: 1.5em;
42+
}
43+
44+
#guess-input{
45+
height: 2em;
46+
width: 50px;
47+
text-align: center;
48+
font-size: 1em;
49+
font-weight: bolder;
50+
51+
border-radius: 5px;
52+
letter-spacing: 2px;
53+
}
54+
55+
#btn{
56+
font-family: "Griffy", system-ui;
57+
font-size: 1.2em;
58+
background-color: #fff;
59+
width: 200px;
60+
height: 3em;
61+
border: none;
62+
border-radius: 50%;
63+
cursor: pointer;
64+
}
65+
66+
#btn:hover{
67+
background-color: rgb(208, 189, 225);
68+
}
69+
70+
#message{
71+
font-size: 1em;
72+
word-spacing: 10px;
73+
}
74+
75+
@media(max-width: 768px){
76+
.navbar{
77+
font-size: 2.5rem;
78+
}
79+
80+
.canvas{
81+
margin-top: 3em;
82+
text-align: center;
83+
font-size: 1.4em;
84+
gap: 1.5em;
85+
letter-spacing: 1px;
86+
word-spacing: 5px;
87+
}
88+
89+
#message{
90+
font-size: 1em;
91+
word-spacing: 10px;
92+
}
93+
94+
}
95+
96+
@media(max-width: 550px){
97+
.navbar{
98+
margin-top: 2em;
99+
font-size: 2.2rem;
100+
}
101+
102+
.canvas{
103+
margin-top: 2.5em;
104+
text-align: center;
105+
font-size: 1.5em;
106+
gap: 2em;
107+
letter-spacing: 0.1em;
108+
word-spacing: 0.2em;
109+
}
110+
111+
form{
112+
gap: 2em;
113+
}
114+
115+
#message{
116+
font-size: 1em;
117+
word-spacing: 0.2em;
118+
}
119+
120+
}
121+
122+
123+
@media(max-width: 400px){
124+
.navbar{
125+
margin-top: 1em;
126+
font-size: 2em;
127+
}
128+
129+
.canvas{
130+
margin-top: 2em;
131+
text-align: center;
132+
font-size: 1.4em;
133+
gap: 1.5em;
134+
letter-spacing: 0.1em;
135+
word-spacing: 0.5em;
136+
}
137+
138+
form{
139+
gap: 1.8em;
140+
}
141+
142+
#message{
143+
font-size: 1em;
144+
word-spacing: 0.8em;
145+
}
146+
147+
}

‎project_Snapshot/Number_Guess.png‎

73.7 KB
Loading

0 commit comments

Comments
 (0)