View difference between Paste ID: jtQDJEzG and iy3gL5At

 ============================================ HTML ============================================
 <!DOCTYPE html>
 <html lang="pl">
   <head>
     <title>Wisielec</title>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- import the webpage's stylesheet -->
     <link rel="stylesheet" href="/style.css" />
     <link
       rel="icon"
       href="https://cdn.glitch.com/fbbbb34f-0b8d-49c9-afe0-d55182ec0908%2Fwis.png?v=1608563089741"
     />
     <!-- import the webpage's javascript file -->
     <script src="/script.js" defer></script>
   </head>
   <body>
     <div id="container">
       <h1>Hangman</h1>
 
       <p id="game">
         <!--here we will display the obscured password and if we guess it right, the given letter will be revealed-->
       </p>
 
       <label>Submit a letter</label>
       <input
         id="letter"
         type="text"
         maxlength="1"
       /><!--field for entering letters-->
 
       <button id="ok">Ok</button>
       <!-- button that appears at the end of the game-->
       <button id="reset">reset</button>
 
       <!--here we will display messages like lost/win/no letter/repeated letter-->
       <h3 id="message"></h3>
 
       <div>
         <!--the place where the gallows will appear-->
 
         <img
           id="hangman"
           src="https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F1.png?v=1585147286506"
           width="300"
         />
       </div>
     </div>
   </body>
 </html>
 
 ============================================ JS ============================================
 //words array
 
 const words = ["giants", "function", "hangman"];
 
 // random word from the words array
 const word = words[Math.floor(Math.random() * words.length)];
 
 //table for addresses to pictures
 const picturesArray = [
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F0.png?v=1623760735527",
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F1.png?v=1623760735604",
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F2.png?v=1623760735890",
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F3.png?v=1623760735703",
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F4.png?v=1623760735867",
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F5.png?v=1623760735857",
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F6.png?v=1623760735876",
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F7.png?v=1623760735751",
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F8.png?v=1623760735918",
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F9.png?v=1623760735966",
   "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F10.png?v=1623760735998",
 ];
 
 // the answers array contains an obscure password which we will gradually reveal in the game
 const answers = [];
 
 // a variable indicating whether the letter was guessed correctly after being entered
 let ifGuessed = false;
 
 //the chances in the game must be such a value because we have so many pictures
 let chances = 11;
 
 //an array storing the letters already used
 
 const used = [];
 
 //variable counting the number of spaces between words
 let spaces = 0;
 
 //preparing the covered drawn word
 for (let i = 0; i < word.length; i++) {
   if (word[i] == " ") {
     answers[i] = "|";
     spaces++;
   } else {
     answers[i] = "_";
   }
 }
 
 //variable storing info how many letters are left to guess
 let remainingLetters = word.length - spaces;
 
 //display an array of the covered word each element in the array i.e. _ is joined with a space
 document.getElementById("game").textContent = answers.join(" ");
 
 // the event for clicking the ok button
 document.getElementById("ok").addEventListener("click", function () {
   // before each new letter approval, set this variable to false
   ifGuessed = false;
 
   // we clear the display of the message
   document.getElementById("message").textContent = "";
 
   //variable storing the player's letter
   const guess = document.getElementById("letter").value;
 
   document.getElementById("letter").value = "";
 
   if (guess.length == 0) {
     document.getElementById("message").textContent = "Please enter one letter.";
   } else if (used.includes(guess)) {
     document.getElementById("message").textContent =
       "You already entered this letter.";
   } else {
     used.push(guess);
     //we search the given word letter by letter and check if somewhere there is the same letter as our shot if so, we expose that letter in the answer array
     for (let j = 0; j < word.length; j++) {
       if (word[j] == guess) {
         ifGuessed = true;
         answers[j] = guess; //recover the letter in the password
         remainingLetters;
 
         //update the display of our password
         document.getElementById("game").textContent = answers.join(" ");
       }
     }
 
     //we search the given word letter by letter and check if somewhere there is the same letter as our shot if so, we reveal in the answer array that letter
     for (let j = 0; j < word.length; j++) {
       if (word[j] == guess) {
         ifGuessed = true;
         answers[j] = guess; //odsłonięcie litery w haśle
         remainingLetters--;
 
         //update the display of our password
         document.getElementById("game").textContent = answers.join(" ");
       }
     }
 
     // win
 
     if (remainingLetters == 0) {
       document.getElementById("ok").disabled = true;
       document.getElementById("letter").disabled = true;
       document.getElementById("message").textContent =
         "Bravo the guessed password is: " + word;
     }
 
     //losing the chance, drawing a hangman
 
     if (ifGuessed == false) {
       setPicture();
       chances--;
 
       //losing condition
       if (chances == 0) {
         document.getElementById("ok").disabled = true;
         document.getElementById("letter").disabled = true;
         document.getElementById("message").textContent =
           "You lost, the word is: " + word;
       }
     }
   }
 });
 
 //we search the given word letter by letter and check if somewhere there is the same letter as our shot if so, we reveal in the answer array that letter
 
 function setPicture() {
   //select the appropriate image address from the array and set as image source
   document.getElementById("hangman").src = picturesArray[chances - 1];
   //display the image
   document.getElementById("hangman").style.display = "block";
 }
 
 document.getElementById("reset").addEventListener("click", function () {
   //refreshing the page
   window.location.reload();
 });
 
 ============================================ CSS ============================================
 @import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Bungee+Outline&display=swap");
 
 body {
   font-family: "Black Ops One", cursive;
   font-size: 30px;
 }
 
 h1 {
   color: #373fff;
 }
 
 img {
   display: none;
 }
 
 #container {
   width: 1000px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }
 
 input {
   font-family: "Black Ops One", cursive;
   width: 50px;
   height: 50px;
   font-size: 35px;
 }
 
 button {
   width: 200px;
   height: 50px;
   background-color: #fa4a0a;
   color: white;
   cursor: pointer;
   font-size: 16px;
   border-radius: 4px;
   transition-duration: 0.4s;
   border: 2px solid #fa4a0a;
   text-transform: uppercase;
   font-family: "Black Ops One", cursive;
 }
 
 button:hover {
   background-color: white;
   color: black;
 }
 
 p {
   letter-spacing: 4px;
 }
 
 .active {
   display: block;
 }
 
 .hidden {
   display: none;
 }