09_javascript.js

const quoteApiUrl = "https://api.freeapi.app/api/v1/public/quotes/quote/random";
const quoteSection = document.getElementById("quote");
const userInput = document.getElementById("quote-input");

let quote = "";
let time = 60;
let timer = "";
let mistakes = 0;

// Display random quotes
const renderNewQuote = async () => {
    const response = await fetch(quoteApiUrl);
    let data = await response.json();
    // console.log(data);
    quote = data.data.content;
    // console.log(quote);
    const minLength = 100;
    const maxLength = 160;

    if (quote.length > maxLength) {
        // Trim the quote to maxLength and avoid cutting in the middle of a word
        quote = quote.substring(0, maxLength);
        let lastSpace = quote.lastIndexOf(" ");
        quote = quote.substring(0, lastSpace) + "...";
    } else if (quote.length < minLength) {
        // Fetch a new quote if it's too short
        return renderNewQuote();
    }

    // array of characters in the quote
    let arr = quote.split("").map((value) => {
        // wrap characters in span tag
        return "<span class='quote-chars'>"+ value +"</span>";
    })

    // join array for displaying
    quoteSection.innerHTML = arr.join("");
    // console.log(arr);
}

window.onload = () => {
    userInput.value = "";
    document.getElementById("start-test").style.display = "block";
    document.getElementById("stop-test").style.display = "none";
    userInput.disabled = true;
    renderNewQuote();
};

// logic for comparing input and quote
userInput.addEventListener("input", () => {
    let quoteChars = document.querySelectorAll(".quote-chars");
    // console.log(quoteChars);
    // from quoteChars create an array
    quoteChars = Array.from(quoteChars);

    // array of user input
    let userInputChars = userInput.value.split("");
    quoteChars.forEach((char, index) => {
        // check if quote = userinput 
        if(char.innerText == userInputChars[index]){
            char.classList.add("success");
        }
        else if(userInputChars[index] == null){
            if(char.classList.contains("success")){
                char.classList.remove("success");
            }
            else{
                char.classList.remove("fail");
            }
        }
        // not same
        else{
            if(!char.classList.contains("fail")){
                mistakes += 1;
                char.classList.add("fail");
            }
            document.getElementById("mistakes").innerText = mistakes;
        }
        // return true if all characters are entered
        let check = quoteChars.every((element) => {
            return element.classList.contains("success");
        });
        // end if all characters are correct
        if(check){
            // console.log("working");
            displayResult();
        }
    })
})

// Start test
const startTest = () => {
    mistakes = 0;
    timer = "";
    userInput.disabled = false;
    reduceTime();
    document.getElementById("start-test").style.display = "none";
    document.getElementById("stop-test").style.display = "block";
}

// update timer
function updateTimer(){
    if(time == 0){
        // end
        displayResult();
    }
    else{
        document.getElementById("timer").innerText = --time + "sec.";
    }
}

// reduce time
const reduceTime = () => {
    time = 60;
    timer = setInterval(updateTimer, 1000);
}

// end test
const displayResult = () => {
    // display result div
    document.querySelector(".result").style.display = "block";
    clearInterval(timer);
    document.getElementById("stop-test").style.display = "none";
    userInput.disabled = true;

    let timeTaken = (60 - time) / 100;
    if (timeTaken <= 0){
        timeTaken = 1;
    }
    
    document.getElementById("wpm").innerText = (userInput.value.length / 5 / timeTaken).toFixed(2)+"wpm";
    document.getElementById("accuracy").innerText = Math.round(((userInput.value.length - mistakes) / userInput.value.length)* 100) + "%";
};