// Challenge instructions

// Wire up the loader so that it spins

// Stretch goals:

// 1. Add a timer
// 2. Change the loader stylev

const loaderOutEl = document.getElementById("loader-out");
const btnEl = document.getElementById("btn");
const loaderText = document.getElementById("loader-text");
let isRunning = false;
btnEl.addEventListener("click", ()=>{
    if(!isRunning){
        isRunning = true;
        loaderOutEl.style.display = "flex";
        loaderInEl.style.display = "block";
        loaderOutEl.style.animation = "spin 2s linear 0s infinite";
        loaderOutEl.style.animationFillMode = "forwards";    
        loaderInEl.style.animation = "spin2 2s linear 0s infinite";
        loaderInEl.style.animationFillMode = "forwards";
        setTimeout(()=>{
            const loadArr = document.getElementsByClassName("textLoad");
            for(let i=0; i < loadArr.length; i++){
                setTimeout(()=>{
                loadArr[i].style.display = "block";
                setColor(i, loadArr[i]);
                loadArr[i].style.fontWeight = "900";
                loadArr[i].style.animation = "rotate 2s linear 0s 1"},i*2000);
            }
        }, 2000);
    } else{
        window.location.reload();
        isRunning = false;
        loaderOutEl.style.display = "none";
        loaderInEl.style.display = "none";
        loaderOutEl.style.animation = "";
        loaderOutEl.style.animationFillMode = "";    
        loaderInEl.style.animation = "";
        loaderInEl.style.animationFillMode = "";
        const loadArr = document.getElementsByClassName("textLoad");
        for(let i=0; i < loadArr.length; i++){            
            loadArr[i].style.display = "none";
        }
    }      
})

const setColor = (num, element)=>{
    if(num%2 !== 0){
        element.style.color = "hotpink";
    }
};

const loaderInEl = document.getElementById("loader-in");