Skip to content

feat(ui): enhance number guessing game UI for elegance #157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
venisha-kalola merged 1 commit into from
Oct 26, 2025
Merged

feat(ui): enhance number guessing game UI for elegance #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 22 additions & 16 deletions projects/number-guessing-game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Guessing Game</title>
<link rel="stylesheet" href="../../assets/styles.css">
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Guessing Game</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../assets/styles.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Number Guessing Game</h1>
<div id="game-container" class="card">
<p id="instructions">I'm thinking of a number between 1 and 100. Can you guess it?</p>
<div id="controls" class="controls">
<input id="guess-input" type="number" min="1" max="100" placeholder="Enter your guess" />
<button id="guess-btn" type="button">Guess</button>
<div class="container">
<div class="card">
<h1>Number Guessing Game</h1>
<p class="description">I'm thinking of a number between 1 and 100. Can you guess it?</p>

<div class="input-group">
<input type="number" id="guessInput" placeholder="Enter your guess" min="1" max="100">
<button id="guessButton" class="btn primary-btn">Guess</button>
</div>

<p class="message" id="message"></p>
<p class="attempts" id="attempts">Attempts: 0</p>

<button id="resetButton" class="btn secondary-btn reset-btn">Play Again</button>
</div>
</div>
<p id="feedback" aria-live="polite"></p>
<p id="attempts">Attempts: <span id="attempt-count">0</span></p>
<button id="restart-btn" type="button">Restart</button>
</div>
<script src="main.js"></script>
<script src="main.js"></script>
</body>
</html>
148 changes: 72 additions & 76 deletions projects/number-guessing-game/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,92 +1,88 @@
// Utility to generate a random integer in [min, max]
function generateRandomInteger(min, max) {
const minCeil = Math.ceil(min);
const maxFloor = Math.floor(max);
return Math.floor(Math.random() * (maxFloor - minCeil + 1)) + minCeil;
}
// Get references to the HTML elements
const guessInput = document.getElementById('guessInput');
const guessButton = document.getElementById('guessButton');
const resetButton = document.getElementById('resetButton');
const message = document.getElementById('message');
const attemptsDisplay = document.getElementById('attempts');

function initNumberGuessingGame() {
const input = document.getElementById('guess-input');
const guessBtn = document.getElementById('guess-btn');
const feedback = document.getElementById('feedback');
const attemptsText = document.getElementById('attempts');
const attemptCount = document.getElementById('attempt-count');
const restartBtn = document.getElementById('restart-btn');
// Game variables
let randomNumber;
let attempts;
const MIN_NUM = 1;
const MAX_NUM = 100;

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

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

function setFeedback(message, type) {
feedback.textContent = message;
feedback.dataset.type = type || '';
}
// 3. Clear messages and input field
message.textContent = '';
guessInput.value = '';

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

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

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

if (value === targetNumber) {
setFeedback(`Correct! The number was ${targetNumber}.`, 'success');
setGameOver(true);
return;
}
if (value < targetNumber) {
setFeedback('Too low. Try a higher number.', 'low');
// Increment attempts
attempts++;
attemptsDisplay.textContent = `Attempts: ${attempts}`;

// Compare the guess and provide feedback
if (userGuess < randomNumber) {
message.textContent = 'Too Low! Try again.';
message.style.color = '#3498db'; // Will be mapped by CSS
} else if (userGuess > randomNumber) {
message.textContent = 'Too High! Try again.';
message.style.color = '#e74c3c'; // Will be mapped to var(--error-color) by CSS
} else {
setFeedback('Too high. Try a lower number.', 'high');
message.textContent = `Correct! You guessed the number ${randomNumber} in ${attempts} attempts! 🎉`;
message.style.color = '#2ecc71'; // Will be mapped to var(--success-color) by CSS
endGame();
}
input.select();
}

function restartGame() {
targetNumber = generateRandomInteger(MIN, MAX);
attempts = 0;
attemptCount.textContent = '0';
setFeedback('', '');
input.value = '';
setGameOver(false);
input.focus();
}
// Clear the input for the next guess
guessInput.value = '';
guessInput.focus();
}

// Function to end the game when the number is guessed correctly
function endGame() {
guessInput.disabled = true;
guessButton.disabled = true;
resetButton.style.display = 'inline-block'; // Show the reset button
}

// Event Listeners
guessButton.addEventListener('click', checkGuess);
resetButton.addEventListener('click', newGame);

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

// Init state
attemptsText.hidden = false;
setFeedback('', '');
}

window.addEventListener('DOMContentLoaded', initNumberGuessingGame);
// Initialize the game when the page loads
newGame();
Loading
Loading