Skip to content

Commit 642de84

Browse files
venisha-kalolavenisha-kalola
authored
Merge pull request #157 from atharvnikam38/feat-number-game-logic
feat(ui): enhance number guessing game UI for elegance
2 parents e643128 + 2cca42c commit 642de84

File tree

4 files changed

+294
-160
lines changed

4 files changed

+294
-160
lines changed

‎projects/number-guessing-game/index.html‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Number Guessing Game</title>
7-
<link rel="stylesheet" href="../../assets/styles.css">
8-
<link rel="stylesheet" href="styles.css">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Number Guessing Game</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="../../assets/styles.css" />
9+
<link rel="stylesheet" href="style.css" />
910
</head>
1011
<body>
11-
<h1>Number Guessing Game</h1>
12-
<div id="game-container" class="card">
13-
<p id="instructions">I'm thinking of a number between 1 and 100. Can you guess it?</p>
14-
<div id="controls" class="controls">
15-
<input id="guess-input" type="number" min="1" max="100" placeholder="Enter your guess" />
16-
<button id="guess-btn" type="button">Guess</button>
12+
<div class="container">
13+
<div class="card">
14+
<h1>Number Guessing Game</h1>
15+
<p class="description">I'm thinking of a number between 1 and 100. Can you guess it?</p>
16+
17+
<div class="input-group">
18+
<input type="number" id="guessInput" placeholder="Enter your guess" min="1" max="100">
19+
<button id="guessButton" class="btn primary-btn">Guess</button>
20+
</div>
21+
22+
<p class="message" id="message"></p>
23+
<p class="attempts" id="attempts">Attempts: 0</p>
24+
25+
<button id="resetButton" class="btn secondary-btn reset-btn">Play Again</button>
26+
</div>
1727
</div>
18-
<p id="feedback" aria-live="polite"></p>
19-
<p id="attempts">Attempts: <span id="attempt-count">0</span></p>
20-
<button id="restart-btn" type="button">Restart</button>
21-
</div>
22-
<script src="main.js"></script>
28+
<script src="main.js"></script>
2329
</body>
2430
</html>

‎projects/number-guessing-game/main.js‎

Lines changed: 72 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,88 @@
1-
// Utility to generate a random integer in [min, max]
2-
function generateRandomInteger(min, max) {
3-
const minCeil = Math.ceil(min);
4-
const maxFloor = Math.floor(max);
5-
return Math.floor(Math.random() * (maxFloor - minCeil + 1)) + minCeil;
6-
}
1+
// Get references to the HTML elements
2+
const guessInput = document.getElementById('guessInput');
3+
const guessButton = document.getElementById('guessButton');
4+
const resetButton = document.getElementById('resetButton');
5+
const message = document.getElementById('message');
6+
const attemptsDisplay = document.getElementById('attempts');
77

8-
function initNumberGuessingGame() {
9-
const input = document.getElementById('guess-input');
10-
const guessBtn = document.getElementById('guess-btn');
11-
const feedback = document.getElementById('feedback');
12-
const attemptsText = document.getElementById('attempts');
13-
const attemptCount = document.getElementById('attempt-count');
14-
const restartBtn = document.getElementById('restart-btn');
8+
// Game variables
9+
let randomNumber;
10+
let attempts;
11+
const MIN_NUM = 1;
12+
const MAX_NUM = 100;
1513

16-
const MIN = 1;
17-
const MAX = 100;
14+
// Function to start a new game or reset the current one
15+
function newGame() {
16+
// 1. Generate a new random number
17+
randomNumber = Math.floor(Math.random() * (MAX_NUM - MIN_NUM + 1)) + MIN_NUM;
18+
console.log(`The secret number is: ${randomNumber}`); // For testing purposes
1819

19-
let targetNumber = generateRandomInteger(MIN, MAX);
20-
let attempts = 0;
21-
let gameOver = false;
20+
// 2. Reset the number of attempts
21+
attempts = 0;
22+
attemptsDisplay.textContent = `Attempts: ${attempts}`;
2223

23-
function setFeedback(message, type) {
24-
feedback.textContent = message;
25-
feedback.dataset.type = type || '';
26-
}
24+
// 3. Clear messages and input field
25+
message.textContent = '';
26+
guessInput.value = '';
2727

28-
function setGameOver(over) {
29-
gameOver = over;
30-
input.disabled = over;
31-
guessBtn.disabled = over;
32-
if (over) {
33-
input.blur();
34-
}
35-
}
28+
// 4. Re-enable input and guess button, hide reset button
29+
guessInput.disabled = false;
30+
guessButton.disabled = false;
31+
resetButton.style.display = 'none'; // Hide the reset button
32+
message.style.color = '#333'; // Default text color
33+
}
3634

37-
function validateGuess(value) {
38-
if (value === '') return { ok: false, msg: 'Please enter a number.' };
39-
const num = Number(value);
40-
if (!Number.isFinite(num)) return { ok: false, msg: 'That is not a valid number.' };
41-
if (!Number.isInteger(num)) return { ok: false, msg: 'Please enter a whole number.' };
42-
if (num < MIN || num > MAX) return { ok: false, msg: `Enter a number between ${MIN} and ${MAX}.` };
43-
return { ok: true, value: num };
44-
}
35+
// Function to handle the user's guess
36+
function checkGuess() {
37+
const userGuess = parseInt(guessInput.value);
4538

46-
function handleGuess() {
47-
if (gameOver) return;
48-
const { ok, msg, value } = validateGuess(input.value.trim());
49-
if (!ok) {
50-
setFeedback(msg, 'error');
51-
return;
39+
// Validate the input
40+
if (isNaN(userGuess) || userGuess < MIN_NUM || userGuess > MAX_NUM) {
41+
message.textContent = `Please enter a valid number between ${MIN_NUM} and ${MAX_NUM}.`;
42+
message.style.color = 'orange'; // Will be mapped to var(--warning-color) by CSS
43+
return;
5244
}
53-
attempts += 1;
54-
attemptCount.textContent = String(attempts);
5545

56-
if (value === targetNumber) {
57-
setFeedback(`Correct! The number was ${targetNumber}.`, 'success');
58-
setGameOver(true);
59-
return;
60-
}
61-
if (value < targetNumber) {
62-
setFeedback('Too low. Try a higher number.', 'low');
46+
// Increment attempts
47+
attempts++;
48+
attemptsDisplay.textContent = `Attempts: ${attempts}`;
49+
50+
// Compare the guess and provide feedback
51+
if (userGuess < randomNumber) {
52+
message.textContent = 'Too Low! Try again.';
53+
message.style.color = '#3498db'; // Will be mapped by CSS
54+
} else if (userGuess > randomNumber) {
55+
message.textContent = 'Too High! Try again.';
56+
message.style.color = '#e74c3c'; // Will be mapped to var(--error-color) by CSS
6357
} else {
64-
setFeedback('Too high. Try a lower number.', 'high');
58+
message.textContent = `Correct! You guessed the number ${randomNumber} in ${attempts} attempts! 🎉`;
59+
message.style.color = '#2ecc71'; // Will be mapped to var(--success-color) by CSS
60+
endGame();
6561
}
66-
input.select();
67-
}
6862

69-
function restartGame() {
70-
targetNumber = generateRandomInteger(MIN, MAX);
71-
attempts = 0;
72-
attemptCount.textContent = '0';
73-
setFeedback('', '');
74-
input.value = '';
75-
setGameOver(false);
76-
input.focus();
77-
}
63+
// Clear the input for the next guess
64+
guessInput.value = '';
65+
guessInput.focus();
66+
}
67+
68+
// Function to end the game when the number is guessed correctly
69+
function endGame() {
70+
guessInput.disabled = true;
71+
guessButton.disabled = true;
72+
resetButton.style.display = 'inline-block'; // Show the reset button
73+
}
74+
75+
// Event Listeners
76+
guessButton.addEventListener('click', checkGuess);
77+
resetButton.addEventListener('click', newGame);
7878

79-
guessBtn.addEventListener('click', handleGuess);
80-
input.addEventListener('keydown', function onKeyDown(event) {
81-
if (event.key === 'Enter') {
82-
handleGuess();
79+
// Allow pressing "Enter" to submit a guess
80+
guessInput.addEventListener('keydown', (event) => {
81+
if (event.key === 'Enter' && !guessButton.disabled) { // Ensure button is not disabled
82+
checkGuess();
8383
}
84-
});
85-
restartBtn.addEventListener('click', restartGame);
84+
});
8685

87-
// Init state
88-
attemptsText.hidden = false;
89-
setFeedback('', '');
90-
}
9186

92-
window.addEventListener('DOMContentLoaded', initNumberGuessingGame);
87+
// Initialize the game when the page loads
88+
newGame();

0 commit comments

Comments
 (0)