-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
117 lines (105 loc) · 3.13 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
//Random quotes api
const quoteApiUrl = "https://api.quotable.io/random?minLength=80&maxLength=100";
const quoteSection = document.getElementById("quote");
const userInput = document.getElementById("quote-input");
let quote = "";
let time = 60;
let timer = "";
let mistakes = 0;
const renderNewQuote = async () => {
const response = await fetch(quoteApiUrl);
let data = await response.json();
quote = data.content;
//Array of chars in quote
let arr = quote.split("").map((value) => {
return "<span class='quote-chars'>" + value + "</span>";
});
quoteSection.innerHTML += arr.join("");
};
//Logic to compare input words with quote
userInput.addEventListener("input", () => {
let quoteChars = document.querySelectorAll(".quote-chars");
quoteChars = Array.from(quoteChars);
//Array of user input chars
let userInputChars = userInput.value.split("");
//Loop through each char in quote
quoteChars.forEach((char, index) => {
//Check chars with quote chars
if (char.innerText == userInputChars[index]) {
char.classList.add("success");
}
//If user hasn't entered anything or backspaced
else if (userInputChars[index] == null) {
if (char.classList.contains("success")) {
char.classList.remove("success");
} else {
char.classList.remove("fail");
}
}
//if user entered wrong char
else {
if (!char.classList.contains("fail")) {
//increament and displaying mistakes
mistakes++;
char.classList.add("fail");
}
document.getElementById("mistakes").innerText = mistakes;
}
//Return true if all chars are correct
let check = quoteChars.every((element) => {
return element.classList.contains("success");
});
//End test if all chars are correct
if (check) {
displayResult();
}
});
});
//Update timer
function updateTimer() {
if (time == 0) {
//End test if reaches 0
displayResult();
} else {
document.getElementById("timer").innerText = --time + "s";
}
}
//Set timer
const timeReduce = () => {
time = 60;
timer = setInterval(updateTimer, 1000);
};
//End test
const displayResult = () => {
//Display result div
document.querySelector(".result").style.display = "block";
clearInterval(timer);
document.getElementById("stop-test").style.display = "none";
userInput.disabled = true;
let timeTaken = 1;
if (time != 0) {
timeTaken = (60 - time) / 100;
}
document.getElementById("wpm").innerText =
(userInput.value.length / 5 / timeTaken).toFixed(2) + "wpm";
document.getElementById("accuracy").innerText =
Math.round(
((userInput.value.length - mistakes) / userInput.value.length) * 100
) + "%";
};
//Start test
const startTest = () => {
mistakes = 0;
timer = "";
userInput.disabled = false;
timeReduce();
document.getElementById("start-test").style.display = "none";
document.getElementById("stop-test").style.display = "block";
};
window.onload = () => {
userInput.value = "";
document.getElementById("start-test").style.display = "block";
document.getElementById("stop-test").style.display = "none";
userInput.disabled = true;
renderNewQuote();
};