From febc78a6cf0d12bafdfcb018a30f87496840fb28 Mon Sep 17 00:00:00 2001 From: MrPerfeccct <1ammrperfeccct@gmail.com> Date: Tue, 3 Mar 2026 23:36:37 -0600 Subject: [PATCH] # bugs found and fixed --- index.html | 22 +++++++++---------- index.js | 62 +++++++++++++++++++++++++++++++++++------------------- 2 files changed, 51 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index af638da..0afbc56 100644 --- a/index.html +++ b/index.html @@ -5,31 +5,31 @@ - Number Guesser + Number Guesser
-

Guessing Game

+ +

Guessing Game

+

I'm thinking of a number from 1 to 99! Can you guess it in 5 tries or less?

- - + + +
+

You guessed too high. Try again.

You guessed too low. Try again.

-

- You reached the max number of guesses -

-

- Congratulations, You guessed correctly!
- Would you like to play again? -

+

You reached the max number of guesses

+

Congratulations, You guessed correctly!
Would you like to play again?

+
diff --git a/index.js b/index.js index 4c2a94e..c0cbe94 100644 --- a/index.js +++ b/index.js @@ -1,15 +1,15 @@ -const guessInput = document.getElementById('guess'); -const submitButton = document.getElementById('submit'); -const resetButton = document.getElementById('reset'); -const messages = document.getElementsByClassName('message'); -const tooHighMessage = document.getElementById('too-high'); -const tooLowMessage = document.getElementById('too-low'); -const maxGuessesMessage = document.getElementById('max-guesses'); -const numberOfGuessesMessage = document.getElementById('number-of-guesses'); -const correctMessage = document.getElementById('correct'); - -let targetNumber; -let attempts = 0; +const guessInput = document.getElementById('guess'); //The input field for the user's guess, restricted to numbers between 1 and 99 +const submitButton = document.getElementById('submit'); //The button to submit the user's guess +const resetButton = document.getElementById('reset'); //The button to reset the game and start over +const messages = document.getElementsByClassName('message'); //All the messages displayed to the user based on their guess +const tooHighMessage = document.getElementById('too-high'); //The message displayed when the user's guess is too high +const tooLowMessage = document.getElementById('too-low'); //The message displayed when the user's guess is too low +const maxGuessesMessage = document.getElementById('max-guesses'); //The message displayed when the user has reached the maximum number of guesses +const numberOfGuessesMessage = document.getElementById('number-of-guesses'); //The message displayed to show the number of guesses the user has made +const correctMessage = document.getElementById('correct'); //The message displayed when the user has guessed the correct number + +let targetNumber; //The random number the user is trying to guess +let attempts = 0; //The number of attempts the user has made const maxNumberOfAttempts = 5; // Returns a random number from min (inclusive) to max (exclusive) @@ -18,43 +18,58 @@ const maxNumberOfAttempts = 5; // <- 32 // > getRandomNumber(1, 50) // <- 11 + + function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min)) + min; } +// Function to check the user's guess against the target number and update the game state accordingly. This function is called when the user clicks the submit button. function checkGuess() { // Get value from guess input element const guess = parseInt(guessInput.value, 10); attempts = attempts + 1; +// Call a function to hide all messages + hideAllMessages(); +// Check if the guess is correct, too high, or too low and update the messages and game state accordingly if (guess === targetNumber) { numberOfGuessesMessage.style.display = ''; numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`; correctMessage.style.display = ''; - + correctMessage.innerHTML = "Congratulations, You guessed correctly!
Would you like to play again?"; submitButton.disabled = true; guessInput.disabled = true; } - if (guess !== targetNumber) { + if (guess !== targetNumber && attempts < maxNumberOfAttempts) { if (guess < targetNumber) { tooLowMessage.style.display = ''; } else { - tooLowMessage.style.display = ''; + tooHighMessage.style.display = ''; } const remainingAttempts = maxNumberOfAttempts - attempts; + let guessWord; + if (remainingAttempts === 1) { + guessWord = 'guess'; + } else { + guessWord = 'guesses'; + } numberOfGuessesMessage.style.display = ''; - numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} guesses remaining`; + numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} ${guessWord} remaining`; } - if (attempts ==== maxNumberOfAttempts) { + if (attempts === maxNumberOfAttempts && guess !== targetNumber) { submitButton.disabled = true; guessInput.disabled = true; + + maxGuessesMessage.style.display = ''; + maxGuessesMessage.innerHTML = "0 guesses remaining"; } guessInput.value = ''; @@ -62,22 +77,25 @@ function checkGuess() { resetButton.style.display = ''; } +// Function to hide all messages displayed to the user. This is called at the beginning of the checkGuess function to clear any previous messages before displaying new ones based on the user's current guess. function hideAllMessages() { - for (let elementIndex = 0; elementIndex <= messages.length; elementIndex++) { - messages[elementIndex].style.display = 'none'; + for (let elementIndex = 0; elementIndex < messages.length; elementIndex++) { + messages[elementIndex].style.display = "none"; } } -funtion setup() { +// Function to generate a random number between min and max and return it. This is a number that the user will try to guess in the game. + +function setup() { // Get random number targetNumber = getRandomNumber(1, 100); console.log(`target number: ${targetNumber}`); // Reset number of attempts - maxNumberOfAttempts = 0; + attempts = 0; // Enable the input and submit button - submitButton.disabeld = false; + submitButton.disabled = false; guessInput.disabled = false; hideAllMessages();