-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
70 lines (61 loc) · 2.06 KB
/
script.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
const RANDOM_QUOTE_API_URL = 'http://api.quotable.io/random';
const quoteDisplayElement = document.getElementById('quoteDisplay');
const quoteInputElement = document.getElementById('quoteInput');
const timerElement = document.getElementById('timer');
let startTime;
// Event listener for input in quoteInputElement
quoteInputElement.addEventListener('input', handleInput);
// Function to handle input in quoteInputElement
function handleInput() {
const arrayQuote = Array.from(quoteDisplayElement.children);
const arrayValue = quoteInputElement.value.split('');
let correct = true;
arrayQuote.forEach((characterSpan, index) => {
const character = arrayValue[index];
if (character == null) {
characterSpan.classList.remove('correct', 'incorrect');
correct = false;
} else if (character === characterSpan.innerText) {
characterSpan.classList.remove('incorrect');
characterSpan.classList.add('correct');
} else {
characterSpan.classList.remove('correct');
characterSpan.classList.add('incorrect');
correct = false;
}
});
if (correct) {
renderNewQuote();
}
}
// Function to fetch a random quote
async function getRandomQuote() {
const response = await fetch(RANDOM_QUOTE_API_URL);
const data = await response.json();
return data.content;
}
// Function to render a new quote
async function renderNewQuote() {
const quote = await getRandomQuote();
quoteDisplayElement.innerHTML = '';
quote.split('').forEach(character => {
const characterSpan = document.createElement('span');
characterSpan.innerText = character;
quoteDisplayElement.appendChild(characterSpan);
});
quoteInputElement.value = '';
startTimer();
}
// Function to start the timer
function startTimer() {
timerElement.innerText = 0;
startTime = new Date();
setInterval(updateTimer, 1000);
}
// Function to update the timer
function updateTimer() {
const elapsedTimeInSeconds = Math.floor((new Date() - startTime) / 1000);
timerElement.innerText = elapsedTimeInSeconds;
}
// Initial call to render a new quote
renderNewQuote();