​

const theTimer = document.querySelector('.timer');

const testArea = document.querySelector(".text_input");

const originText = document.querySelector(".patern_origin");

const testWrapper = document.querySelector('.test_wrapper');

​

var timer=[0,0,0,0];

var timerRunning=false;

var interval;

​

function leadingTime(time){

    if(time<=9){

        time="0"+time;

    }

    return time;

}

​

function runTimer (){

​

    let currentTime = leadingTime(timer[0])+":"+leadingTime(timer[1])+":"+leadingTime(timer[2]);

    theTimer.innerHTML = currentTime;

    timer[3]++;

​

    timer[0]=Math.floor((timer[3]/100)/60);

    timer[1]=Math.floor(timer[3]/100)-(timer[0]*60);

    timer[2]=Math.floor(timer[3]-(timer[1]*100)-(timer[0]*6000));

​

}

​

function spellCheck(){

    let textEntered=testArea.value;

    let originTextMatch=originText.substring ( '0' , textEntered.length);

​

    if(textEntered==originText){

​

        testWrapper.style.borderColor="green";

        clearInterval(interval);

​

    }else{

​

        if(textEntered==originTextMatch){

            testWrapper.style.borderColor="yellow";

​

        }else{

            testWrapper.style.borderColor="red";

        }

    }

}

​

function start (){

    let textEnteredLength = testArea.value.length;

​

    if (textEnteredLength==0 && !timerRunning)

    {

        timerRunning=true;

        interval = setInterval(runTimer,10);

    }

}

​

​

 testArea.addEventListener("keypress", start);  

 testArea.addEventListener("keyup", spellCheck);