8 bugs found and fixed

index.html

@@ -20,6 +20,7 @@ <h1>Guessing Game</h1>
       </div>
       <div>
         <p class="message" id="number-of-guesses"></p>
+        <p class="message" id="not-right">Please pick a number between 0 and 100.</p>
         <p class="message" id="too-high">You guessed too high. Try again.</p>
         <p class="message" id="too-low">You guessed too low. Try again.</p>
         <p class="message" id="max-guesses">

index.js

@@ -2,6 +2,8 @@ const guessInput = document.getElementById('guess');
 const submitButton = document.getElementById('submit');
 const resetButton = document.getElementById('reset');
 const messages = document.getElementsByClassName('message');
+// * -- stretch goal: added a new response if higher than 100 or lower than 0
+const notRightMessage = document.getElementById('not-right');
 const tooHighMessage = document.getElementById('too-high');
 const tooLowMessage = document.getElementById('too-low');
 const maxGuessesMessage = document.getElementById('max-guesses');
@@ -10,7 +12,8 @@ const correctMessage = document.getElementById('correct');
 
 let targetNumber;
 let attempts = 0;
-const maxNumberOfAttempts = 5;
+// * -- bug 3: const instead of let for changing variable
+let maxNumberOfAttempts = 5;
 
 // Returns a random number from min (inclusive) to max (exclusive)
 // Usage:
@@ -25,10 +28,11 @@ function getRandomNumber(min, max) {
 function checkGuess() {
   // Get value from guess input element
   const guess = parseInt(guessInput.value, 10);
+
   attempts = attempts + 1;
 
   hideAllMessages();
-
+  
   if (guess === targetNumber) {
     numberOfGuessesMessage.style.display = '';
     numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`;
@@ -38,21 +42,29 @@ function checkGuess() {
     submitButton.disabled = true;
     guessInput.disabled = true;
   }
-
+// * -- bug 6: else statement repeats tooLowMessage instead of tooHighMessage
   if (guess !== targetNumber) {
-    if (guess < targetNumber) {
+    // * -- Stretch Goal: added a loop to replenish attempts and coerce a "correct input"
+    if ((guess < 0) || (guess > 99)) {
+      notRightMessage.style.display = '';
+      attempts = attempts -1;    
+    } else if (guess < targetNumber) {
       tooLowMessage.style.display = '';
     } else {
-      tooLowMessage.style.display = '';
+      tooHighMessage.style.display = '';
     }
 
     const remainingAttempts = maxNumberOfAttempts - attempts;
-
+    // * -- Stretch Goal: with 1 guess remaining 'guesses' becomes 'guess'
+    let singularPlural = 'guesses';
+    if (remainingAttempts === 1) {
+      singularPlural = 'guess';  
+    } 
     numberOfGuessesMessage.style.display = '';
-    numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> ${remainingAttempts} guesses remaining`;
+    numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> ${remainingAttempts} ${singularPlural} remaining`;
   }
-
-  if (attempts ==== maxNumberOfAttempts) {
+// * -- bug 1: extra = after 'attempts'
+  if (attempts === maxNumberOfAttempts) {
     submitButton.disabled = true;
     guessInput.disabled = true;
   }
@@ -61,23 +73,28 @@ function checkGuess() {
 
   resetButton.style.display = '';
 }
-
+// * -- bug 5: length of for loop should be '<' and not '<=' messages.length
 function hideAllMessages() {
-  for (let elementIndex = 0; elementIndex <= messages.length; elementIndex++) {
+  for (let elementIndex = 0; elementIndex < messages.length; elementIndex++) {
     messages[elementIndex].style.display = 'none';
   }
 }
 
-funtion setup() {
+// * -- bug 2: mispelled 'function'
+function setup() {
   // Get random number
   targetNumber = getRandomNumber(1, 100);
   console.log(`target number: ${targetNumber}`);
 
+  // * -- bug 7: maxNumberOfAttempts on setup was 0 instead of 5
+  // * -- bug 8: attempts was not reset and continued on
   // Reset number of attempts
-  maxNumberOfAttempts = 0;
+  maxNumberOfAttempts = 5;
+  attempts = 0;
 
+// * -- bug 4: mispelled 'disabled' on submitButton
   // Enable the input and submit button
-  submitButton.disabeld = false;
+  submitButton.disabled = false;
   guessInput.disabled = false;
 
   hideAllMessages();