diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.css b/index.css index 3024e63..011c239 100644 --- a/index.css +++ b/index.css @@ -1,7 +1,7 @@ -main { + main { display: flex; - justify-content: center; flex-direction: column; + justify-content: center; align-items: center; margin: auto; } diff --git a/index.html b/index.html index af638da..7f59fd5 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,56 @@ - + - - - - - - Number Guesser - - -
-

Guessing Game

-

- I'm thinking of a number from 1 to 99! Can you guess it in 5 tries or - less? -

-
- - -
-
-

-

You guessed too high. Try again.

-

You guessed too low. Try again.

-

- You reached the max number of guesses -

-

- Congratulations, You guessed correctly!
- Would you like to play again? -

-
- -
- - - + + + + Number Guesser + + + + + + + +
+

Guessing Game

+ +

+ I'm thinking of a number from 1 to 99! + Can you guess it in 5 tries or less? +

+ +
+ + +
+ +
+

+ +

+ You guessed too high. Try again. +

+ +

+ You guessed too low. Try again. +

+ +

+ You reached the max number of guesses. +

+ +

+ Congratulations, you guessed correctly!
+ Would you like to play again? +

+
+ + + +
+ + + + + + \ No newline at end of file diff --git a/index.js b/index.js index 4c2a94e..e8bd4ee 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,6 @@ + +// Element references + const guessInput = document.getElementById('guess'); const submitButton = document.getElementById('submit'); const resetButton = document.getElementById('reset'); @@ -8,83 +11,94 @@ 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 + +// Returns a random number from min (inclusive) to max (inclusive) + function getRandomNumber(min, max) { - return Math.floor(Math.random() * (max - min)) + min; + return Math.floor(Math.random() * (max - min + 1)) + min; } + +// Check user's guess + function checkGuess() { - // Get value from guess input element const guess = parseInt(guessInput.value, 10); - attempts = attempts + 1; + attempts += 1; hideAllMessages(); if (guess === targetNumber) { numberOfGuessesMessage.style.display = ''; - numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`; + numberOfGuessesMessage.innerHTML = `You made ${attempts} guess${attempts > 1 ? 'es' : ''}.`; correctMessage.style.display = ''; submitButton.disabled = true; guessInput.disabled = true; + + resetButton.style.display = ''; + return; } - if (guess !== targetNumber) { - if (guess < targetNumber) { - tooLowMessage.style.display = ''; - } else { - tooLowMessage.style.display = ''; - } + if (guess < targetNumber) { + tooLowMessage.style.display = ''; + } else if (guess > targetNumber) { + tooHighMessage.style.display = ''; + } - const remainingAttempts = maxNumberOfAttempts - attempts; + const remainingAttempts = maxNumberOfAttempts - attempts; - numberOfGuessesMessage.style.display = ''; - numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} guesses remaining`; - } + numberOfGuessesMessage.style.display = ''; + numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} guesses remaining.`; - if (attempts ==== maxNumberOfAttempts) { + if (attempts >= maxNumberOfAttempts) { submitButton.disabled = true; guessInput.disabled = true; + maxGuessesMessage.style.display = ''; + resetButton.style.display = ''; } guessInput.value = ''; - - resetButton.style.display = ''; } + +// Hide all messages + function hideAllMessages() { - for (let elementIndex = 0; elementIndex <= messages.length; elementIndex++) { - messages[elementIndex].style.display = 'none'; + for (let i = 0; i < messages.length; i++) { + messages[i].style.display = 'none'; } } -funtion setup() { - // Get random number - targetNumber = getRandomNumber(1, 100); - console.log(`target number: ${targetNumber}`); - // Reset number of attempts - maxNumberOfAttempts = 0; +// Setup game + +function setup() { + targetNumber = getRandomNumber(1, 99); + console.log(`Target number: ${targetNumber}`); - // Enable the input and submit button - submitButton.disabeld = false; + attempts = 0; + + submitButton.disabled = false; guessInput.disabled = false; + guessInput.value = ''; hideAllMessages(); resetButton.style.display = 'none'; } + +// Event listeners + submitButton.addEventListener('click', checkGuess); resetButton.addEventListener('click', setup); +// Start the game setup();