diff --git a/index.html b/index.html
index af638da..5a39746 100644
--- a/index.html
+++ b/index.html
@@ -9,15 +9,19 @@
   </head>
   <body>
     <main>
+      <!-- Basic game instructions are always visible. -->
       <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>
+      <!-- The form lets the player submit a guess by button click or Enter key. -->
+      <form id="guess-form">
+        <label for="guess">Enter your guess</label>
         <input type="number" id="guess" min="1" max="99" />
-        <button id="submit">Submit Guess</button>
-      </div>
+        <button id="submit" type="submit">Submit Guess</button>
+      </form>
+      <!-- Feedback messages stay hidden until the player interacts with the game. -->
       <div>
         <p class="message" id="number-of-guesses"></p>
         <p class="message" id="too-high">You guessed too high. Try again.</p>
@@ -30,6 +34,7 @@ <h1>Guessing Game</h1>
           Would you like to play again?
         </p>
       </div>
+      <!-- Reset starts a brand-new game after a win or after using all guesses. -->
       <button id="reset">Reset</button>
     </main>
     <script src="index.js"></script>
diff --git a/index.js b/index.js
index 4c2a94e..f8c0a33 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,5 @@
+// Cache the key elements the game updates after each guess.
+const guessForm = document.getElementById('guess-form');
 const guessInput = document.getElementById('guess');
 const submitButton = document.getElementById('submit');
 const resetButton = document.getElementById('reset');
@@ -22,69 +24,74 @@ function getRandomNumber(min, max) {
   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;
+// Hides every feedback message so only the current game state is visible.
+function hideAllMessages() {
+  for (let elementIndex = 0; elementIndex < messages.length; elementIndex += 1) {
+    messages[elementIndex].style.display = 'none';
+  }
+}
 
-  hideAllMessages();
+function getGuessWord(remainingAttempts) {
+  return remainingAttempts === 1 ? 'guess' : 'guesses';
+}
 
-  if (guess === targetNumber) {
-    numberOfGuessesMessage.style.display = '';
-    numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`;
+// Resets the game to the initial state with a new random target number.
+function setup() {
+  targetNumber = getRandomNumber(1, 100);
+  console.log(`target number: ${targetNumber}`);
 
-    correctMessage.style.display = '';
+  attempts = 0;
+  guessInput.value = '';
+  submitButton.disabled = false;
+  guessInput.disabled = false;
 
-    submitButton.disabled = true;
-    guessInput.disabled = true;
-  }
+  hideAllMessages();
+  resetButton.style.display = 'none';
+}
 
-  if (guess !== targetNumber) {
-    if (guess < targetNumber) {
-      tooLowMessage.style.display = '';
-    } else {
-      tooLowMessage.style.display = '';
-    }
+// Checks the player's guess and updates the visible game messages.
+function checkGuess(event) {
+  event.preventDefault();
 
-    const remainingAttempts = maxNumberOfAttempts - attempts;
+  const guess = parseInt(guessInput.value, 10);
 
+  if (!Number.isInteger(guess) || guess < 1 || guess > 99) {
+    hideAllMessages();
     numberOfGuessesMessage.style.display = '';
-    numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> ${remainingAttempts} guesses remaining`;
+    numberOfGuessesMessage.innerHTML = 'Enter a number from 1 to 99.';
+    resetButton.style.display = attempts > 0 ? '' : 'none';
+    return;
   }
 
-  if (attempts ==== maxNumberOfAttempts) {
+  attempts += 1;
+
+  hideAllMessages();
+
+  const remainingAttempts = maxNumberOfAttempts - attempts;
+
+  numberOfGuessesMessage.style.display = '';
+  numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> ${remainingAttempts} ${getGuessWord(remainingAttempts)} remaining`;
+
+  if (guess === targetNumber) {
+    correctMessage.style.display = '';
+    submitButton.disabled = true;
+    guessInput.disabled = true;
+  } else if (attempts === maxNumberOfAttempts) {
+    maxGuessesMessage.style.display = '';
+    numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> 0 guesses remaining`;
     submitButton.disabled = true;
     guessInput.disabled = true;
+  } else if (guess < targetNumber) {
+    tooLowMessage.style.display = '';
+  } else {
+    tooHighMessage.style.display = '';
   }
 
   guessInput.value = '';
-
   resetButton.style.display = '';
 }
 
-function hideAllMessages() {
-  for (let elementIndex = 0; elementIndex <= messages.length; elementIndex++) {
-    messages[elementIndex].style.display = 'none';
-  }
-}
-
-funtion setup() {
-  // Get random number
-  targetNumber = getRandomNumber(1, 100);
-  console.log(`target number: ${targetNumber}`);
-
-  // Reset number of attempts
-  maxNumberOfAttempts = 0;
-
-  // Enable the input and submit button
-  submitButton.disabeld = false;
-  guessInput.disabled = false;
-
-  hideAllMessages();
-  resetButton.style.display = 'none';
-}
-
-submitButton.addEventListener('click', checkGuess);
+guessForm.addEventListener('submit', checkGuess);
 resetButton.addEventListener('click', setup);
 
 setup();
