script.js

console.log(localStorage.getItem('record')); // check if record exists in local storage
document.getElementById('record').innerHTML = "Record: " + (localStorage.getItem('record') / 1000).toFixed(2) + " seconds"; // get record from local storage

const quotes = [
    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
    'There is nothing more deceptive than an obvious fact.',
    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
    'I never make exceptions. An exception disproves the rule.',
    'What one man can invent another can discover.',
    'Nothing clears up a case so much as stating it to another person.',
    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
]; // all quotes

let words = [];
let wordIndex = 0;
let startTime = Date.now();
const quoteElement = document.getElementById('quote');
const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');

document.getElementById('start').addEventListener('click', () => {
    const quoteIndex = Math.floor(Math.random() * quotes.length); // get random quote
    const quote = quotes[quoteIndex]; // get quote
    words = quote.split(' '); // split quote into words
    wordIndex = 0; // reset word index

    // UI updates
    const spanWords = words.map(function(word) { return `<span>${word} </span>`; }); // wrap each word in a span
    // convert into string and set as innerHTML on quote display
    quoteElement.innerHTML = spanWords.join('');
    // highlight first word
    quoteElement.childNodes[0].className = 'highlight';
    // clear message
    messageElement.innerText = '';

    // setup textbox
    // clear textbox
    typedValueElement.value = '';
    typedValueElement.disabled = false;
    // set focus
    typedValueElement.focus();
    // set event handler

    // start timer
    startTime = new Date().getTime();
});

typedValueElement.addEventListener('input', () => {
    const currentWord = words[wordIndex];
    const typedValue = typedValueElement.value;
    if (typedValue === currentWord && wordIndex === words.length - 1) {
        // end of sentence
        // display success
        const elapsedTime = new Date().getTime() - startTime;
        const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
        messageElement.innerText = message;
        typedValueElement.disabled = true; // disable input

        // save record
        const record = localStorage.getItem('record');
        if (record < 0.1 || elapsedTime < record) {
            localStorage.setItem('record', elapsedTime);
            document.getElementById('record').innerHTML = "Record: " + (elapsedTime / 1000).toFixed(2) + " seconds"; // update record
        }

    } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
        // end of word
        // clear the typedValueElement for the new word
        typedValueElement.value = '';
        wordIndex++;
        for (const wordElement of quoteElement.childNodes) {
            // reset class name for all elements in quote
            wordElement.className = '';
        }
        quoteElement.childNodes[wordIndex].className = 'highlight'; // highlight the next word
    } else if (currentWord.startsWith(typedValue)) {
        // correct so far
        typedValueElement.className = ''; // reset class name
    } else {
        // incorrect
        typedValueElement.className = 'error'; // set class name to error
    }
});