TypeBeast/script.js at main · naemazam/TypeBeast · GitHub

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
118

const RANDOM_QUOTE_API_URL = "http://api.quotable.io/random";
const quoteDisplayElement = document.getElementById("quoteDisplay")
const quoteAuthorElement = document.getElementById("quoteAuthor")
const quoteInputElement = document.getElementById("quoteInput")
const timerElement = document.getElementById("timer")
const btnNextElement = document.getElementById("btnNext")

let myTime
let totalKeysPress = 0
let correctKeysPress
let incorrectKeysPress

let correct = true;
document.getElementById("quoteInput").onkeydown = function(e){

    if( !(e.key === "Shift" || e.key === "Backspace"))
    totalKeysPress ++;
    //console.log(totalKeysPress)
}

quoteInputElement.addEventListener('input', () => {

    correctKeysPress = 0
    incorrectKeysPress = 0
    const arrayQuote = quoteDisplayElement.querySelectorAll('span')
    const arrayValue = quoteInputElement.value.split('')
    arrayQuote.forEach((characterSpan, index) => {
        const character = arrayValue[index]
        if (character == null) {
            characterSpan.classList.remove('correct')
            characterSpan.classList.remove('incorrect')
            correct = false;
        }else if (character === characterSpan.innerText) {
            correctKeysPress ++
            characterSpan.classList.add('correct')
            characterSpan.classList.remove('incorrect')
            correct = true;
        } else {
            incorrectKeysPress ++
            characterSpan.classList.remove('correct')
            characterSpan.classList.add('incorrect')
            correct = false;
        }

    })

    if(correct) {
        showTime();
        setTimeout(renderNewQuote,5000);

        //renderNewQuote()
    }
})

function showTime(){

    quoteDisplayElement.innerText = "Your time: " + myTime + "s.\n" +
    "Total keys press = " + totalKeysPress + "\n" +
    "Correct keys press = " + correctKeysPress + "\n" +
    "Incorrect keys press = " + (totalKeysPress - correctKeysPress) + "\n" +
    "% de acierto = " + ((correctKeysPress * 100 ) / totalKeysPress).toFixed(2) + " %"
    quoteAuthorElement.innerText = ""
    quoteInputElement.style.display = "none"
    timerElement.style.visibility = "hidden"
    totalKeysPress = 0
    correctKeysPress = 0
    incorrectKeysPress = 0

    //btnNextElement.style.visibility = "hidden"
    //renderNewQuote()
}

function getRandomQuote() {
    return fetch(RANDOM_QUOTE_API_URL)
        .then(response => response.json())
        // .then(data => data.content);
        .then(data => data);
}

async function renderNewQuote() {


    const quote = await getRandomQuote();
    quoteDisplayElement.innerText = '' //quote.content;
    quoteAuthorElement.innerText = quote.author;
    quote.content.split('').forEach(character => {
        const characterSpan = document.createElement('span')
        characterSpan.innerText = character
        quoteDisplayElement.appendChild(characterSpan)
    })
    quoteInputElement.value = null;
    quoteInputElement.style.display = "block"
    timerElement.style.visibility = "visible"
    //btnNextElement.style.visibility = "visible"

    startTimer()
}
let startTime
function startTimer(){
    timerElement.innerText = 0
    startTime = new Date()
    setInterval(() => {
        timerElement.innerText = getTimerTime()
        myTime = getTimerTime()
    }, 1000);
}

function getTimerTime(){
    return Math.floor((new Date() - startTime) / 1000)
}

function nextQuote(){
    renderNewQuote();
}

renderNewQuote()