Code-the-Dream-School · deniseduardo12n-arch · Mar 8, 2026
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git 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
@@ -1,37 +1,56 @@
-<!DOCTYPE html>
+ <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="index.css" rel="stylesheet" />
-    <title>Number Guesser</title>
-  </head>
-  <body>
-    <main>
-      <h1>Guessing Game</h1>
-      <p>
-        I'm thinking of a number from 1 to 99! Can you guess it in 5 tries or
-        less?
-      </p>
-      <div>
-        <input type="number" id="guess" min="1" max="99" />
-        <button id="submit">Submit Guess</button>
-      </div>
-      <div>
-        <p class="message" id="number-of-guesses"></p>
-        <p class="message" id="too-high">You guessed too high. Try again.</p>
-        <p class="message" id="too-low">You guessed too low. Try again.</p>
-        <p class="message" id="max-guesses">
-          You reached the max number of guesses
-        </p>
-        <p class="message" id="correct">
-          Congratulations, You guessed correctly! <br />
-          Would you like to play again?
-        </p>
-      </div>
-      <button id="reset">Reset</button>
-    </main>
-    <script src="index.js"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Number Guesser</title>
+
+  <!-- CSS -->
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+
+<main>
+  <h1>Guessing Game</h1>
+
+  <p>
+    I'm thinking of a number from 1 to 99! 
+    Can you guess it in 5 tries or less?
+  </p>
+
+  <div>
+    <input type="number" id="guess" min="1" max="99">
+    <button id="submit">Submit Guess</button>
+  </div>
+
+  <div>
+    <p class="message" id="number-of-guesses"></p>
+
+    <p class="message" id="too-high">
+      You guessed too high. Try again.
+    </p>
+
+    <p class="message" id="too-low">
+      You guessed too low. Try again.
+    </p>
+
+    <p class="message" id="max-guesses">
+      You reached the max number of guesses.
+    </p>
+
+    <p class="message" id="correct">
+      Congratulations, you guessed correctly! <br>
+      Would you like to play again?
+    </p>
+  </div>
+
+  <button id="reset">Reset</button>
+
+</main>
+
+<!-- JavaScript -->
+<script src="index.js"></script>
+
+</body>
+</html>
diff --git 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}. <br> ${remainingAttempts} guesses remaining`;
-  }
+  numberOfGuessesMessage.style.display = '';
+  numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> ${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();