Spaces:
Running
Running
File size: 2,954 Bytes
ebeed0f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Random Number Game</title>
<link rel="stylesheet" href="style.css" />
<style>
.game-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
input, button {
padding: 8px;
margin: 5px;
font-size: 16px;
}
#message {
margin: 15px 0;
font-weight: bold;
min-height: 24px;
}
</style>
</head>
<body>
<div class="game-container">
<h1>Guess the Number Game</h1>
<p>I'm thinking of a number between 1 and 100. Can you guess it?</p>
<input type="number" id="guess" min="1" max="100" placeholder="Enter your guess">
<button id="check">Check</button>
<button id="new-game">New Game</button>
<div id="message"></div>
<div id="attempts">Attempts: 0</div>
<a href="index.html">Back to Home</a>
</div>
<script>
let randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
document.getElementById('check').addEventListener('click', checkGuess);
document.getElementById('new-game').addEventListener('click', newGame);
document.getElementById('guess').addEventListener('keypress', function(e) {
if (e.key === 'Enter') checkGuess();
});
function checkGuess() {
const guess = parseInt(document.getElementById('guess').value);
const message = document.getElementById('message');
const attemptsDisplay = document.getElementById('attempts');
if (isNaN(guess) || guess < 1 || guess > 100) {
message.textContent = 'Please enter a valid number between 1 and 100';
return;
}
attempts++;
attemptsDisplay.textContent = `Attempts: ${attempts}`;
if (guess === randomNumber) {
message.textContent = `Congratulations! You guessed the number in ${attempts} attempts!`;
message.style.color = 'green';
} else if (guess < randomNumber) {
message.textContent = 'Too low! Try again.';
message.style.color = 'red';
} else {
message.textContent = 'Too high! Try again.';
message.style.color = 'red';
}
}
function newGame() {
randomNumber = Math.floor(Math.random() * 100) + 1;
attempts = 0;
document.getElementById('guess').value = '';
document.getElementById('message').textContent = '';
document.getElementById('message').style.color = 'black';
document.getElementById('attempts').textContent = 'Attempts: 0';
}
</script>
</body>
</html> |