From af5a4cf5428ac1a8b5cfdb6a8d211e3571b9c518 Mon Sep 17 00:00:00 2001
From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>
Date: Fri, 1 Nov 2024 16:34:06 +0000
Subject: [PATCH] Number Game Errors: Format with Prettier (#776)

## Because

As per
(https://github.com/mdn/content/pull/36541#issuecomment-2450332532), 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.
---
 .../troubleshooting/number-game-errors.html   | 72 ++++++++++---------
 1 file changed, 38 insertions(+), 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
index 3a01026ef..0e40f3293 100644
--- 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;
       }
