diff --git a/index.html b/index.html index af638da..2d9010d 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

Guessing Game

less?

- +
diff --git a/index.js b/index.js index 4c2a94e..9783dd7 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,15 @@ const guessInput = document.getElementById('guess'); const submitButton = document.getElementById('submit'); + +//event listener to validate input data +guessInput.addEventListener("input", () => { + const value = guessInput.valueAsNumber; + + submitButton.disabled = + isNaN(value) || value < 1 || value > 99; +}); + + const resetButton = document.getElementById('reset'); const messages = document.getElementsByClassName('message'); const tooHighMessage = document.getElementById('too-high'); @@ -25,6 +35,7 @@ function getRandomNumber(min, max) { function checkGuess() { // Get value from guess input element const guess = parseInt(guessInput.value, 10); + attempts = attempts + 1; hideAllMessages(); @@ -37,22 +48,28 @@ function checkGuess() { submitButton.disabled = true; guessInput.disabled = true; - } - - if (guess !== targetNumber) { + } else { + //was 2 if instead if/else if (guess < targetNumber) { tooLowMessage.style.display = ''; } else { - tooLowMessage.style.display = ''; + //wrong message was displayed - tooLowMessage + tooHighMessage.style.display = ''; } const remainingAttempts = maxNumberOfAttempts - attempts; + + //additing of output with quontity of remain guesses + numberOfGuessesMessage.style.display = ''; - numberOfGuessesMessage.style.display = ''; + if (remainingAttempts === 1) { + numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
1 guess left`; + } else { numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} guesses remaining`; } - - if (attempts ==== maxNumberOfAttempts) { +} +// was additional '=' in row below + if (attempts === maxNumberOfAttempts) { submitButton.disabled = true; guessInput.disabled = true; } @@ -61,23 +78,25 @@ function checkGuess() { resetButton.style.display = ''; } - +//<= massages.length can give result undefined 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() { +//misspelling in "function" +function setup() { // Get random number targetNumber = getRandomNumber(1, 100); console.log(`target number: ${targetNumber}`); // Reset number of attempts - maxNumberOfAttempts = 0; + // Does not valid out of this function on global level: const maxNumberOfAttempts = 0; we need attempts + attempts = 0; // Enable the input and submit button - submitButton.disabeld = false; + // we need to turn off submitButton before input check + submitButton.disabled = true; guessInput.disabled = false; hideAllMessages();