Number Game Errors: Format with Prettier (#776)

## Because As per (mdn/content#36541 (comment)), the MDN code standard uses Prettier. This repo hasn't fully caught up but this exercise can be formatted as the changes in that PR would reference this code's line numbers. Using Prettier here would also mean fewer discrepancies in case any learners happen to already have Prettier configured (e.g. formatting on autosave) - not too unreasonable of a situation. ## This PR - Formats the number game html file with Prettier's default rules.
mdn · Nov 1, 2024 · af5a4cf · af5a4cf
1 parent f262a5a
commit af5a4cf
Showing 1 changed file with 38 additions and 34 deletions.
diff --git a/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html b/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html
@@ -1,7 +1,7 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
 
     <title>Number guessing game</title>
 
@@ -25,12 +25,16 @@
   <body>
     <h1>Number guessing game</h1>
 
-    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.</p>
+    <p>
+      We have selected a random number between 1 and 100. See if you can guess
+      it in 10 turns or less. We'll tell you if your guess was too high or too
+      low.
+    </p>
 
     <div class="form">
       <label for="guessField">Enter a guess: </label>
-      <input type="text" id="guessField" class="guessField">
-      <input type="submit" value="Submit guess" class="guessSubmit">
+      <input type="text" id="guessField" class="guessField" />
+      <input type="submit" value="Submit guess" class="guessSubmit" />
     </div>
 
     <div class="resultParas">
@@ -42,70 +46,70 @@ <h1>Number guessing game</h1>
     <script>
       let randomNumber = Math.floor(Math.random()) + 1;
 
-      const guesses = document.querySelector('.guesses');
-      const lastResult = document.querySelector('.lastResult');
-      const lowOrHi = document.querySelector('lowOrHi');
-      const guessSubmit = document.querySelector('.guessSubmit');
-      const guessField = document.querySelector('.guessField');
+      const guesses = document.querySelector(".guesses");
+      const lastResult = document.querySelector(".lastResult");
+      const lowOrHi = document.querySelector("lowOrHi");
+      const guessSubmit = document.querySelector(".guessSubmit");
+      const guessField = document.querySelector(".guessField");
 
       let guessCount = 1;
       let resetButton;
 
       function checkGuess() {
         const userGuess = Number(guessField.value);
-        if(guessCount === 1) {
-          guesses.textContent = 'Previous guesses: ';
+        if (guessCount === 1) {
+          guesses.textContent = "Previous guesses: ";
         }
-        guesses.textContent += userGuess + ' ';
+        guesses.textContent += userGuess + " ";
 
-        if(userGuess === randomNumber) {
-          lastResult.textContent = 'Congratulations! You got it right!';
-          lastResult.style.backgroundColor = 'green';
-          lowOrHi.textContent = '';
+        if (userGuess === randomNumber) {
+          lastResult.textContent = "Congratulations! You got it right!";
+          lastResult.style.backgroundColor = "green";
+          lowOrHi.textContent = "";
           setGameOver();
-        } else if(guessCount === 10) {
-          lastResult.textContent = '!!!GAME OVER!!!';
+        } else if (guessCount === 10) {
+          lastResult.textContent = "!!!GAME OVER!!!";
           setGameOver();
         } else {
-          lastResult.textContent = 'Wrong!';
-          lastResult.style.backgroundColor = 'red';
-          if(userGuess < randomNumber) {
-            lowOrHi.textContent = 'Last guess was too low!';
-          } else if(userGuess > randomNumber) {
-            lowOrHi.textContent = 'Last guess was too high!';
+          lastResult.textContent = "Wrong!";
+          lastResult.style.backgroundColor = "red";
+          if (userGuess < randomNumber) {
+            lowOrHi.textContent = "Last guess was too low!";
+          } else if (userGuess > randomNumber) {
+            lowOrHi.textContent = "Last guess was too high!";
           }
         }
 
         guessCount++;
-        guessField.value = '';
+        guessField.value = "";
         guessField.focus();
       }
-      guessSubmit.addeventListener('click', checkGuess);
+      guessSubmit.addeventListener("click", checkGuess);
 
       function setGameOver() {
         guessField.disabled = true;
         guessSubmit.disabled = true;
-        resetButton = document.createElement('button');
-        resetButton.textContent = 'Start new game';
+        resetButton = document.createElement("button");
+        resetButton.textContent = "Start new game";
         document.body.appendChild(resetButton);
-        resetButton.addeventListener('click', resetGame);
+        resetButton.addeventListener("click", resetGame);
       }
 
       function resetGame() {
         guessCount = 1;
 
-        const resetParas = document.querySelectorAll('.resultParas p');
+        const resetParas = document.querySelectorAll(".resultParas p");
         for (const resetPara of resetParas) {
-          resetPara.textContent = '';
+          resetPara.textContent = "";
         }
         resetButton.parentNode.removeChild(resetButton);
 
         guessField.disabled = false;
         guessSubmit.disabled = false;
-        guessField.value = '';
+        guessField.value = "";
         guessField.focus();
 
-        lastResult.style.backgroundColor = 'white';
+        lastResult.style.backgroundColor = "white";
 
         randomNumber = Math.floor(Math.random()) + 1;
       }