I recently made a typing game in JavaScript and I would like it to be reviewed so I can become better knowing where I made mistakes and what I should improve on.CodePenvar temp = document.querySelector('.time');  var button = document.querySelector(button);  var words = document.querySelector(.words);  var timerDiv = document.querySelector(.time);  var scoreDiv = document.querySelector(.score);  var points = 0;  var spans;  var typed;  var seconds = 60;  var spark = new Audio(spark.mp3);  function countdown() {   points = 0;   var timer = setInterval(function(){    button.disabled = true;      seconds--;      temp.innerHTML = seconds;      if (seconds === 0) {       alert(Game over! Your score is  + points);       scoreDiv.innerHTML = 0;       words.innerHTML = ;       button.disabled = false;       clearInterval(timer);       seconds = 60;       timerDiv.innerHTML = 60;       button.disabled = false;       }   }, 1000);  }   function random() {    words.innerHTML = ;    var random = Math.floor(Math.random() * (1943 - 0 + 1)) + 0; // random number of 1943 words in the list    var wordArray = list[random].split();    for (var i = 0; i < wordArray.length; i++) { //building the words with spans around the letters     var span = document.createElement(span);     span.classList.add(span);     span.innerHTML = wordArray[i];     words.appendChild(span);    }    spans = document.querySelectorAll(.span);   }const list = [HERE IS A LIST OF 1900+ WORDS, so i cut it to save the space];button.addEventListener(click, function(e){    countdown();    random();    button.disabled = true;    });   function typing(e) {     typed = String.fromCharCode(e.which);     for (var i = 0; i < spans.length; i++) {      if (spans[i].innerHTML === typed) { // if typed letter is the one from the word       if (spans[i].classList.contains(bg)) { // if it already has class with the bacground color then check the next one        continue;       } else if (spans[i].classList.contains(bg) === false && spans[i-1] === undefined || spans[i-1].classList.contains(bg) !== false ) { // if it dont have class, if it is not first letter or if the letter before it dont have class (this is done to avoid marking the letters who are not in order for being checked, for example if you have two As so to avoid marking both of them if the first one is at the index 0 and second at index 5 for example)              spans[i].classList.add(bg);        break;       }      }     }     var checker = 0;     for (var j = 0; j < spans.length; j++) { //checking if all the letters are typed      if (spans[j].className === span bg) {       checker++;      }      if (checker === spans.length) { // if so, animate the words with animate.css class       spark.pause();       spark.currentTime = 0;       spark.play();       words.classList.add(animated);       words.classList.add(fadeOut);       points++; // increment the points       scoreDiv.innerHTML = points; //add points to the points div       document.removeEventListener(keydown, typing, false);       setTimeout(function(){        words.className = words; // restart the classes        random(); // give another word        document.addEventListener(keydown, typing, false);       }, 400);      }     }   }    button.addEventListener(click, function(e){      countdown();      random();      button.disabled = true;       document.addEventListener(keydown, typing, false);    });* { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box;}body { background-color: #353535; font-family: 'Raleway', sans-serif;}.wrapper { max-width: 600px; margin: 0 auto; width: 100%; text-align: center; padding: 2%; background-color: #424242; height: 500px;}h1 {    color: #ecf0f1;}h1 + p { margin-bottom: 5%;    color: #3498db;}.scoreWrap {float: left;}.timeWrap {float: right;}.outerWrap:after { content: ; display: block; clear: both;}.bg { background-color: #04AF71;}button {   border: none;  background-color: #FF7373;  box-shadow: 0px 5px 0px 0px #CE4646;  outline: none;  border-radius: 5px;  padding: 10px 15px;  font-size: 22px;  text-decoration: none;  margin: 20px;  color: #fff;  position: relative;  display: inline-block;  cursor: pointer;}button:active {  transform: translate(0px, 5px);  -webkit-transform: translate(0px, 5px);  box-shadow: 0px 1px 0px 0px;}.scoreWrap p, .scoreWrap span, .timeWrap p, .timeWrap span {    font-size: 30px;    color: #FF7373;}.wordsWrap { margin-top: 50px;}.words span{    font-size: 60px;    letter-spacing: 1px;    color: #ECF0F1;}<html><head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content=IE=edge> <title>Typing game</title> <link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'> <link rel=stylesheet href=animate.css> <link rel=stylesheet href=main.css></head><body> <div class=wrapper>  <h1>Typing game by Nikola Simovic</h1>  <p>Type as many words as you can until time runs out!</p>  <button>START</button>  <div class=outerWrap>   <div class=scoreWrap>    <p>Score</p>    <span class=score>0</span>   </div>   <div class=timeWrap>    <p>Time left</p>    <span class=time>60</span>   </div>  </div>  <div class=wordsWrap>   <p class=words></p>  </div> </div>
Typing game in JavaScript
javascript;game;html;css