diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6c3a219 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "workbench.editor.enablePreview": false +} diff --git a/index.css b/index.css index 3024e63..f49663f 100644 --- a/index.css +++ b/index.css @@ -1,6 +1,7 @@ main { display: flex; justify-content: center; + /* flex-direction column makes items stack vertically */ flex-direction: column; align-items: center; margin: auto; diff --git a/index.html b/index.html index af638da..1a53b6b 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,11 @@ - + + + Number Guesser @@ -15,7 +17,9 @@

Guessing Game

less?

+ +
@@ -29,9 +33,16 @@

Guessing Game

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

+

+ Error - Value less than minimum value NOT allowed. Try again. +

+

+ Error - Value greater than maximum value NOT allowed. Try again. +

+ diff --git a/index.js b/index.js index 4c2a94e..95e885b 100644 --- a/index.js +++ b/index.js @@ -1,16 +1,16 @@ -const guessInput = document.getElementById('guess'); -const submitButton = document.getElementById('submit'); -const resetButton = document.getElementById('reset'); -const messages = document.getElementsByClassName('message'); -const tooHighMessage = document.getElementById('too-high'); -const tooLowMessage = document.getElementById('too-low'); -const maxGuessesMessage = document.getElementById('max-guesses'); -const numberOfGuessesMessage = document.getElementById('number-of-guesses'); -const correctMessage = document.getElementById('correct'); - -let targetNumber; -let attempts = 0; -const maxNumberOfAttempts = 5; +const guessInput = document.getElementById("guess") +const submitButton = document.getElementById("submit") +const resetButton = document.getElementById("reset") +const messages = document.getElementsByClassName("message") +const tooHighMessage = document.getElementById("too-high") +const tooLowMessage = document.getElementById("too-low") +const maxGuessesMessage = document.getElementById("max-guesses") +const numberOfGuessesMessage = document.getElementById("number-of-guesses") +const correctMessage = document.getElementById("correct") + +let targetNumber +let attempts = 0 +const maxNumberOfAttempts = 5 // Returns a random number from min (inclusive) to max (exclusive) // Usage: @@ -19,72 +19,109 @@ const maxNumberOfAttempts = 5; // > getRandomNumber(1, 50) // <- 11 function getRandomNumber(min, max) { - return Math.floor(Math.random() * (max - min)) + min; + return Math.floor(Math.random() * (max - min)) + min } function checkGuess() { // Get value from guess input element - const guess = parseInt(guessInput.value, 10); - attempts = attempts + 1; + const guess = parseInt(guessInput.value, 10) - hideAllMessages(); + if (guess < 1) { + hideAllMessages() + document.getElementById("less-than-min").style.display = "" + guessInput.value = "" + return + } + + if (guess > 99) { + hideAllMessages() + document.getElementById("greater-than-max").style.display = "" + guessInput.value = "" + return + } + + attempts = attempts + 1 + + // hide all messages before showing the appropriate message when the user makes a guess + hideAllMessages() + // Calculate the remaining attempts and display a message to the user indicating + // their guess and how many guesses they have left. + const remainingAttempts = maxNumberOfAttempts - attempts + + // Check if the guess is correct, too high, or too low, and display the appropriate message. if (guess === targetNumber) { - numberOfGuessesMessage.style.display = ''; - numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`; + numberOfGuessesMessage.style.display = "" + numberOfGuessesMessage.innerHTML = `You made ${maxNumberOfAttempts - attempts} guesses` - correctMessage.style.display = ''; + correctMessage.style.display = "" - submitButton.disabled = true; - guessInput.disabled = true; + submitButton.disabled = true + guessInput.disabled = true } if (guess !== targetNumber) { if (guess < targetNumber) { - tooLowMessage.style.display = ''; + tooLowMessage.style.display = "" } else { - tooLowMessage.style.display = ''; + tooHighMessage.style.display = "" } - const remainingAttempts = maxNumberOfAttempts - attempts; + numberOfGuessesMessage.style.display = "" - numberOfGuessesMessage.style.display = ''; - numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} guesses remaining`; + if (remainingAttempts === 1) { + numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} guess remaining` + } else { + numberOfGuessesMessage.innerHTML = `You guessed ${guess}.
${remainingAttempts} guesses remaining` + } } - if (attempts ==== maxNumberOfAttempts) { - submitButton.disabled = true; - guessInput.disabled = true; + // If the user has reached the maximum number of attempts, disable the submit button and guess input, + // and display a message indicating that they have reached the maximum number of guesses. + //2. Syntax error: the comparison operator should be '===' instead of '===='. + if (attempts === maxNumberOfAttempts) { + submitButton.disabled = true + guessInput.disabled = true } - guessInput.value = ''; + guessInput.value = "" - resetButton.style.display = ''; + resetButton.style.display = "" } +// The hideAllMessages function iterates through all elements with the class 'message' and +// sets their display style to 'none', effectively hiding them from view. function hideAllMessages() { - for (let elementIndex = 0; elementIndex <= messages.length; elementIndex++) { - messages[elementIndex].style.display = 'none'; + for (let elementIndex = 0; elementIndex < messages.length; elementIndex++) { + messages[elementIndex].style.display = "none" } } -funtion setup() { +// The setup function initializes the game by generating a random target number, +// resetting the number of attempts, enabling the input and submit button, hiding all messages, +// and hiding the reset button. +//1.Syntax error: spelling of the function keyword prevents setup to run. +function setup() { // Get random number - targetNumber = getRandomNumber(1, 100); - console.log(`target number: ${targetNumber}`); + targetNumber = getRandomNumber(1, 100) + console.log(`target number: ${targetNumber}`) + + // maxNumberOfAttempts is const cannot be and should be changed + // maxNumberOfAttempts = 0 - // Reset number of attempts - maxNumberOfAttempts = 0; + // Reset attempts to 0 at the start of the game + attempts = 0 // Enable the input and submit button - submitButton.disabeld = false; - guessInput.disabled = false; + submitButton.disabled = false + guessInput.disabled = false - hideAllMessages(); - resetButton.style.display = 'none'; + hideAllMessages() + resetButton.style.display = "none" } -submitButton.addEventListener('click', checkGuess); -resetButton.addEventListener('click', setup); +// Add event listeners to the submit and reset buttons to call the appropriate functions when clicked. +submitButton.addEventListener("click", checkGuess) +resetButton.addEventListener("click", setup) -setup(); +setup()