diff --git a/index.css b/index.css index 3024e63..d2f54a6 100644 --- a/index.css +++ b/index.css @@ -12,4 +12,9 @@ main { #reset { margin: 20px; + display:block; +} + +#message { + display: none; } diff --git a/index.html b/index.html index af638da..928ecbb 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@

Guessing Game

-

+

You guessed too high. Try again.

You guessed too low. Try again.

diff --git a/index.js b/index.js index f3bc6d8..c4743a6 100644 --- a/index.js +++ b/index.js @@ -7,10 +7,12 @@ const tooLowMessage = document.getElementById('too-low'); const maxGuessesMessage = document.getElementById('max-guesses'); const numberOfGuessesMessage = document.getElementById('num-of-guesses'); const correctMessage = document.getElementById('correct'); +const setup = document.getElementById('setup'); + let targetNumber; -const attempts = 0; -const maxNumberOfAttempts = 5; +let attempts = 0; +let maxNumberOfAttempts = 5; // Returns a random number from min (inclusive) to max (exclusive) // Usage: @@ -22,6 +24,12 @@ function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min)) + min; } +function hideAllMessages() { + for (let elementIndex = 0; elementIndex < messages.length; elementIndex++) { + messages[elementIndex].style.display = 'none'; + } +} + function checkGuess() { // Get value from guess input element const guess = parseInt(guessInput.value, 10); @@ -37,54 +45,50 @@ function checkGuess() { submitButton.disabled = true; guessInput.disabled = true; - } - - if (guess !== targetNumber) { + } else { if (guess < targetNumber) { - tooLowMessage.style.display = ''; + tooLowMessage.style.display = ''; } else { - tooLowMessage.style.display = ''; + tooHighMessage.style.display = ''; } const remainingAttempts = maxNumberOfAttempts - attempts; - + + console.log(typeof maxNumberOfAttempts, typeof attempts, typeof guess); + + //numberOfGuessesMessage.style.display = ''; + //numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} guesses remaining`; + + if (attempts === maxNumberOfAttempts) { + submitButton.disabled = true; + guessInput.disabled = true; + } else { numberOfGuessesMessage.style.display = ''; numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} guesses remaining`; - } - - if (attempts ==== maxNumberOfAttempts) { - submitButton.disabled = true; - guessInput.disabled = true; - } - - guessInput.value = ''; - - resetButton.style.display = ''; -} - -function hideAllMessages() { - for (let elementIndex = 0; elementIndex <= messages.length; elementIndex++) { - messages[elementIndex].style.display = 'none'; + } + + guessInput.value = ''; + resetButton.style.display = ''; } } -funtion setup() { + function gameSetup() { // Get random number targetNumber = getRandomNumber(1, 100); console.log(`target number: ${targetNumber}`); // Reset number of attempts - maxNumberOfAttempts = 0; + attempts = 0; // Enable the input and submit button - submitButton.disabeld = false; + submitButton.disabled = false; guessInput.disabled = false; hideAllMessages(); - resetButton.style.display = 'none'; + //resetButton.style.display = 'none'; } -submitButton.addEventListener('click', checkGuess); -resetButton.addEventListener('click', setup); + submitButton.addEventListener('click', checkGuess); + resetButton.addEventListener('click', gameSetup); -setup(); + window.onload = gameSetup();