Project 2: Number Guesser Game
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Number Guesser Game</title>
<style>
body { font-family: sans-serif; max-width: 400px; margin: 2rem auto; text-align: center; }
input { padding: 0.5rem; width: 80px; }
button { padding: 0.5rem 1rem; margin-left: 0.5rem; }
#message { margin-top: 1rem; font-weight: bold; }
</style>
</head>
<body>
<h1>Guess the Number!</h1>
<p>I'm thinking of a number between 1 and 100.</p>
<input type="number" id="guessInput" placeholder="1–100" />
<button id="guessBtn">Guess</button>
<p id="message"></p>
<p>Attempts left: <span id="attemptsLeft">10</span></p>
<button id="resetBtn" style="display:none;">Play Again</button>
<script>
let secretNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 10;
const guessInput = document.getElementById('guessInput');
const guessBtn = document.getElementById('guessBtn');
const message = document.getElementById('message');
const attemptsLeft = document.getElementById('attemptsLeft');
const resetBtn = document.getElementById('resetBtn');
guessBtn.addEventListener('click', () => {88
const guess = Number(guessInput.value);
if (!guess || guess < 1 || guess > 100) {
message.textContent = 'Please enter a number between 1 and 100.';
return;
}
attempts--;
attemptsLeft.textContent = attempts;
if (guess === secretNumber) {
message.textContent = `🎉 Correct! The number was ${secretNumber}.`;
endGame();
} else if (guess < secretNumber) {
message.textContent = 'Too low! Try again.';
} else {
message.textContent = 'Too high! Try again.';
}
if (attempts === 0 && guess !== secretNumber) {
message.textContent = `😢 Game over! The number was ${secretNumber}.`;
endGame();
}
guessInput.value = '';
});
resetBtn.addEventListener('click', () => {
secretNumber = Math.floor(Math.random() * 100) + 1;
attempts = 10;
message.textContent = '';
attemptsLeft.textContent = attempts;
guessInput.value = '';
resetBtn.style.display = 'none';
guessBtn.disabled = false;
guessInput.disabled = false;
});
function endGame() {
guessBtn.disabled = true;
guessInput.disabled = true;
resetBtn.style.display = 'inline-block';
}
</script>
</body>
</html>