Spaces:
Running
Running
| <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> |