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 @@
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();