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();