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.
var 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 "A"s 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>