diff --git a/index.js b/index.js index 4c2a94e..1c0b190 100644 --- a/index.js +++ b/index.js @@ -1,90 +1,119 @@ -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'); - +// Get references to elements from the HTML +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"); + +// Game variables let targetNumber; let attempts = 0; const maxNumberOfAttempts = 5; // Returns a random number from min (inclusive) to max (exclusive) -// Usage: -// > getRandomNumber(1, 50) -// <- 32 -// > getRandomNumber(1, 50) -// <- 11 function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min)) + min; } function checkGuess() { - // Get value from guess input element + // Get the value from the input and convert it to a number const guess = parseInt(guessInput.value, 10); + + // BUG FIX #1: + // Added validation so the function will stop if the input is not a valid number + if (isNaN(guess)) { + return; + } + attempts = attempts + 1; + // Hide all previous messages before showing the new result hideAllMessages(); + // If the guessed number matches the target number if (guess === targetNumber) { - numberOfGuessesMessage.style.display = ''; - numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`; + numberOfGuessesMessage.style.display = ""; + numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
You made ${attempts} guesses`; - correctMessage.style.display = ''; + correctMessage.style.display = ""; + // Disable input and submit button after a correct guess submitButton.disabled = true; guessInput.disabled = true; - } - - if (guess !== targetNumber) { + } else { + // BUG FIX #2: + // Corrected the logic so guesses below the target show "too low" + // and guesses above the target show "too high" if (guess < targetNumber) { - tooLowMessage.style.display = ''; + tooLowMessage.style.display = ""; } else { - tooLowMessage.style.display = ''; + tooHighMessage.style.display = ""; } const remainingAttempts = maxNumberOfAttempts - attempts; - numberOfGuessesMessage.style.display = ''; + numberOfGuessesMessage.style.display = ""; numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} guesses remaining`; - } - if (attempts ==== maxNumberOfAttempts) { - submitButton.disabled = true; - guessInput.disabled = true; + // BUG FIX #3: + // Corrected invalid operator "====" to "===" + // Also disables the game when all guesses are used + if (attempts === maxNumberOfAttempts) { + maxGuessesMessage.style.display = ""; + maxGuessesMessage.innerHTML = "0 guesses remaining"; + + submitButton.disabled = true; + guessInput.disabled = true; + } } - guessInput.value = ''; + // Clear the input field after each guess + guessInput.value = ""; - resetButton.style.display = ''; + // Show the reset button after the first guess + resetButton.style.display = ""; } function hideAllMessages() { - for (let elementIndex = 0; elementIndex <= messages.length; elementIndex++) { - messages[elementIndex].style.display = 'none'; + // BUG FIX #4: + // Changed <= to < so the loop does not go past the end of the messages collection + for (let elementIndex = 0; elementIndex < messages.length; elementIndex++) { + messages[elementIndex].style.display = "none"; } } -funtion setup() { - // Get random number +// BUG FIX #5: +// Corrected the spelling of "function" (it was originally written as "funtion") +function setup() { + // Generate a new random target number targetNumber = getRandomNumber(1, 100); console.log(`target number: ${targetNumber}`); - // Reset number of attempts - maxNumberOfAttempts = 0; + // BUG FIX #6: + // Reset attempts back to 0 when the game starts over + // The original code incorrectly tried to reset maxNumberOfAttempts + attempts = 0; - // Enable the input and submit button - submitButton.disabeld = false; + // BUG FIX #7: + // Corrected the typo "disabeld" to "disabled" + submitButton.disabled = false; guessInput.disabled = false; + // Clear the input field + guessInput.value = ""; + + // Hide all messages and hide reset button on initial load/reset hideAllMessages(); - resetButton.style.display = 'none'; + resetButton.style.display = "none"; } -submitButton.addEventListener('click', checkGuess); -resetButton.addEventListener('click', setup); +// Event listeners +submitButton.addEventListener("click", checkGuess); +resetButton.addEventListener("click", setup); +// Initialize the game when the page loads setup();