https://speed-typing-html.netlify.app/script.js

1const quoteDisplayElement = document.getElementById('quote-display');
2const quoteInputElement = document.getElementById('quote-input');
3const timer = document.getElementById('timer');
4
5const RANDOM_QUOTE_API_URL = "https://api.quotable.io/random";
6
7let startTime;
8
9const getRandomQuote = async () => {
10    const quote = await fetch(RANDOM_QUOTE_API_URL)
11        .then(response => response.json())
12        .then(data => data.content);
13
14    return quote.includes('.') ? quote.substr(0, quote.length -1) : quote;
15}
16
17const getTime = () => {
18    return Math.floor((new Date() - startTime) / 1000);
19}
20
21const startTimer = () => {
22    timer.innerText = 0;
23    startTime = new Date()
24    setInterval(() => {
25        timer.innerText = getTime();
26    }, 1000)
27}
28
29const renderQuote = async () => {
30    const quote = await getRandomQuote();
31    quoteDisplayElement.innerHTML = '';
32
33    quote.split('').forEach(char => {
34        const charSpan = document.createElement('span');
35        charSpan.innerText = char;
36        quoteDisplayElement.appendChild(charSpan)
37    });
38
39    quoteInputElement.value = null;
40    startTimer()
41}
42
43quoteInputElement.addEventListener('input', () => {
44    const quoteChars = quoteDisplayElement.querySelectorAll('span');
45    const arrayValue = quoteInputElement.value.split('');
46    
47    let correct = true;
48
49    quoteChars.forEach((span, index) => {
50        const character = arrayValue[index];
51
52        if (character == null) {
53            span.classList.remove('incorrect'); 
54            span.classList.remove('correct');  
55            correct = false;
56        } else if (character === span.innerText) {
57            span.classList.add('correct');
58            span.classList.remove('incorrect');
59        } else {
60            span.classList.add('incorrect');
61            span.classList.remove('correct');  
62            correct = false;
63        }
64    })
65
66    
67    if (correct) renderQuote()
68})
69
70renderQuote();