Skip to content

Commit 95d0fca

Browse files
nirajxdevnirajxdev
committed
Add 'guess-number-game/' from commit '360728bbcf17806f970f061d9f04f2a9cb928a14'
git-subtree-dir: guess-number-game git-subtree-mainline: d601679 git-subtree-split: 360728b
2 parents d601679 + 360728b commit 95d0fca

File tree

3 files changed

+280
-0
lines changed

3 files changed

+280
-0
lines changed

‎guess-number-game/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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 Number Game</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body>
13+
<div class="guess-box">
14+
<h1>Guess the Number Game</h1>
15+
<p id="guide">Guess random number between 1 and 100</p>
16+
<p id="guide">You have 10 attempts to guess the right answer</p>
17+
<form action="" id="entry_box">
18+
<label for="guessInput" id="guess">Guess a number</label> <br>
19+
<input type="text" id="guessInput" autocomplete="off"> <br><br>
20+
21+
<button type="submit" id="submit">Guess</button>
22+
</form>
23+
24+
<div id="result_box">
25+
<p id="hint" class="lowOrHigh"></p>
26+
<p id="previous_guess">Previous guesses: <span class="guesses"></span></p>
27+
28+
<p id="guess_remaining">Guesses remaining: <span class="lastResult">10</span></p>
29+
</div>
30+
31+
</div>
32+
33+
<script src="script.js"></script>
34+
</body>
35+
</html>

‎guess-number-game/script.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
let randomNumber = parseInt(Math.random() * 100 + 1);
2+
3+
const userInput = document.querySelector('#guessInput');
4+
const submit = document.querySelector('#submit');
5+
const guessSlot = document.querySelector('.guesses');
6+
const remaining = document.querySelector('.lastResult');
7+
const hint = document.querySelector('.lowOrHigh');
8+
const startOver = document.querySelector('#result_box');
9+
10+
const p = document.createElement('p');
11+
12+
let previous_Guess = [];
13+
let number_Guess = 0;
14+
15+
let playGame = true;
16+
17+
if(playGame) {
18+
submit.addEventListener('click', function(e) {
19+
e.preventDefault();
20+
const guess = parseInt(userInput.value);
21+
validateGuess(guess);
22+
});
23+
}
24+
25+
function validateGuess(guess) {
26+
if (isNaN(guess)) {
27+
alert('Enter a valid number');
28+
} else if (guess < 1) {
29+
alert('Enter a number more than 1');
30+
} else if (guess > 100) {
31+
alert('Enter a number less than 100');
32+
} else {
33+
previous_Guess.push(guess);
34+
if (number_Guess === 9) {
35+
displayGuess(guess);
36+
displayMessage(`Game Over! Random number was ${randomNumber}`);
37+
endGame();
38+
} else {
39+
displayGuess(guess);
40+
checkGuess(guess);
41+
}
42+
}
43+
}
44+
45+
function checkGuess(guess) {
46+
if (guess === randomNumber) {
47+
displayMessage(`You guessed it right, yeah :_)`);
48+
endGame();
49+
} else if (guess < randomNumber) {
50+
displayMessage(`Number is TOO LOW!`);
51+
} else {
52+
displayMessage(`Number is TOO HIGH !`);
53+
}
54+
}
55+
function displayGuess(guess) {
56+
userInput.value = '';
57+
guessSlot.innerHTML += `${guess}, `;
58+
number_Guess++;
59+
remaining.innerHTML = `${10 - number_Guess} `;
60+
}
61+
function displayMessage(message) {
62+
hint.innerHTML = `<h3>${message}</h3>`;
63+
}
64+
65+
function endGame() {
66+
userInput.value = '';
67+
userInput.setAttribute('disabled', '');
68+
p.classList.add('button');
69+
p.innerHTML = `<button id = "newGame"> New Game</button>`;
70+
startOver.appendChild(p);
71+
playGame = false;
72+
newGame();
73+
}
74+
75+
function newGame() {
76+
const newGameBtn = document.querySelector('#newGame');
77+
newGameBtn.addEventListener('click', function(e) {
78+
randomNumber = parseInt(Math.random() * 100 + 1);
79+
previous_Guess = [];
80+
number_Guess = 0;
81+
guessSlot.innerHTML = '';
82+
remaining.innerHTML = `${10 - number_Guess}`;
83+
userInput.removeAttribute('disabled');
84+
startOver.removeChild(p);
85+
hint.innerHTML = '';
86+
87+
playGame = true;
88+
});
89+
}
90+

‎guess-number-game/style.css‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
justify-content: center;
12+
min-height: 100vh;
13+
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
14+
font-family: 'Poppins', sans-serif;
15+
color: #fff;
16+
}
17+
18+
.guess-box {
19+
background: rgba(255, 255, 255, 0.05);
20+
backdrop-filter: blur(10px);
21+
-webkit-backdrop-filter: blur(10px);
22+
border: 1px solid rgba(255, 255, 255, 0.1);
23+
border-radius: 20px;
24+
padding: 2rem;
25+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
26+
text-align: center;
27+
max-width: 500px;
28+
width: 90%;
29+
transition: transform 0.3s ease;
30+
}
31+
32+
.guess-box:hover {
33+
transform: translateY(-5px);
34+
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
35+
}
36+
37+
h1 {
38+
font-family: 'Orbitron', sans-serif;
39+
font-size: 2rem;
40+
margin-bottom: 1rem;
41+
color: #00f3ff;
42+
text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
43+
letter-spacing: 2px;
44+
}
45+
46+
#guide {
47+
font-size: 1rem;
48+
margin-bottom: 0.3rem;
49+
color: #e0e0e0;
50+
}
51+
52+
#entry_box {
53+
margin-top: 1.5rem;
54+
}
55+
56+
label#guess {
57+
display: block;
58+
font-size: 1.3rem;
59+
margin-bottom: 0.5rem;
60+
font-weight: 600;
61+
color: #ff00cc;
62+
text-shadow: 0 0 5px rgba(255, 0, 204, 0.3);
63+
}
64+
65+
#guessInput {
66+
background: transparent;
67+
border: none;
68+
border-bottom: 2px solid #00f3ff;
69+
color: #fff;
70+
font-size: 1.8rem;
71+
text-align: center;
72+
width: 100%;
73+
padding: 0.5rem;
74+
margin-bottom: 1.5rem;
75+
font-family: 'Orbitron', sans-serif;
76+
outline: none;
77+
transition: border-color 0.3s ease;
78+
}
79+
80+
#guessInput:focus {
81+
border-bottom-color: #ff00cc;
82+
}
83+
84+
#submit, #newGame {
85+
background: linear-gradient(45deg, #ff00cc, #333399);
86+
border: none;
87+
border-radius: 50px;
88+
color: white;
89+
padding: 1rem 2.5rem;
90+
font-size: 1.2rem;
91+
font-family: 'Orbitron', sans-serif;
92+
font-weight: bold;
93+
cursor: pointer;
94+
transition: all 0.3s ease;
95+
text-transform: uppercase;
96+
letter-spacing: 1px;
97+
box-shadow: 0 4px 15px rgba(255, 0, 204, 0.3);
98+
margin-top: 1rem;
99+
}
100+
101+
#submit:hover, #newGame:hover {
102+
transform: scale(1.05);
103+
box-shadow: 0 6px 20px rgba(255, 0, 204, 0.5);
104+
background: linear-gradient(45deg, #333399, #ff00cc);
105+
}
106+
107+
#result_box {
108+
margin-top: 1.5rem;
109+
background: rgba(0, 0, 0, 0.2);
110+
padding: 1rem;
111+
border-radius: 15px;
112+
}
113+
114+
#previous_guess, #guess_remaining {
115+
font-size: 1rem;
116+
margin: 0.3rem 0;
117+
color: #ccc;
118+
}
119+
120+
.guesses, .lastResult {
121+
font-weight: bold;
122+
color: #00f3ff;
123+
font-family: 'Orbitron', sans-serif;
124+
}
125+
126+
#hint {
127+
margin-bottom: 1rem;
128+
font-size: 1.5rem;
129+
font-weight: 600;
130+
min-height: 2rem;
131+
color: #ff00cc;
132+
text-shadow: 0 0 8px rgba(255, 0, 204, 0.4);
133+
}
134+
135+
/* Dynamic classes that might be added by JS or useful for hint styling */
136+
#hint h3 {
137+
margin: 0;
138+
font-weight: normal;
139+
font-size: 1.2rem;
140+
}
141+
142+
@media (max-width: 600px) {
143+
h1 {
144+
font-size: 1.8rem;
145+
}
146+
147+
.guess-box {
148+
padding: 2rem;
149+
}
150+
151+
#guessInput {
152+
font-size: 1.5rem;
153+
}
154+
}
155+

0 commit comments

Comments
 (0)