diff --git a/index.html b/index.html index af638da..f61e330 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@

Guessing Game

+

Please pick a number between 0 and 100.

You guessed too high. Try again.

You guessed too low. Try again.

diff --git a/index.js b/index.js index 4c2a94e..266911c 100644 --- a/index.js +++ b/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}.
${remainingAttempts} guesses remaining`; + numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${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();