-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
53 lines (45 loc) · 1.87 KB
/
main.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
const RANDOM_QUOTE_API_URL = "http://api.quotable.io/random"
const quoteDisplayElement = document.getElementById("quoteDisplay")
const quoteInputlElement = document.getElementById("quoteInput")
quoteInputlElement.addEventListener("input",() =>{
const arrayQuote = quoteDisplayElement.querySelectorAll("span")
const arrayValues = quoteInputlElement.value.split("")
arrayQuote.forEach((characterSpan, index) =>{
const character = arrayValues[index]
if (character == null){
//Si no escribimos ningun caracter eliminales las 2 clases
characterSpan.classList.remove("correct")
characterSpan.classList.remove("incorrect")
}
else if (character === characterSpan.innerText){
//Si escribimos el caracter y coincide con el de la Quote asignale la clase correct
characterSpan.classList.add("correct")
characterSpan.classList.remove("incorrect")
}
else{
//Si no coincide asignale la clase incorrect
characterSpan.classList.add("incorrect")
characterSpan.classList.remove("correct")
}
})
if (arrayQuote.length == arrayValues.length){
// Si coinciden los largos se renderea otra quote
renderNewQuote();
}
})
function getRandomquote(){
return fetch(RANDOM_QUOTE_API_URL)
.then(Response => Response.json())
.then(data => data.content)
}
async function renderNewQuote(){
const quote = await getRandomquote()
quoteDisplayElement.innerText = "";
quoteInputlElement.value = null;
quote.split("").forEach(character => { // Iteramos por toda la quote y por cada una de las letras creamos un span en el DOM
const characterSpan = document.createElement("span")
characterSpan.innerText = character
quoteDisplayElement.appendChild(characterSpan)
});
}
renderNewQuote()