update:new words link

.history/index_20231104225851.js

@@ -0,0 +1,252 @@
+let content = [];
+// window.addEventListener('load', getData, false )
+async function getData(){
+    let minLength = 100;
+    content = [];
+    try{
+	const resp = await fetch("https://api.quotable.io/random?minLength="+minLength);
+    	const data = await resp.json();
+    	console.log(data);
+    	content = [data.content];
+    }
+    catch(err){
+	    console.log(err);
+	    content =  [["Cosmology deals with the world as the totality of space, time and all phenomena. Historically, it has had quite a broad scope, and in many cases was founded in religion. In modern use metaphysical cosmology addresses questions about the Universe which are beyond the scope of science."]];
+    }
+    finally{
+    	console.log(content);
+    }
+}
+
+getData();
+
+
+let para = document.querySelector("#content-to-type");
+let start = document.querySelector("#start");
+let minutes = document.querySelector("#minutes");
+let seconds = document.querySelector("#seconds");
+let keys = document.querySelectorAll(".key");
+let inputContent = document.querySelector("#input-content");
+inputContent.value = "";
+let errorVal = document.querySelector("#error-val");
+let evaluation = document.querySelector(".evaluation");
+let speedVal = document.querySelector("#speed-val");
+let scoreVal = document.querySelector("#score-val");
+let letters,typingLetterErrors=0;
+
+
+// let dataKeys = [];
+// for(let i = 0;i<keys.length;i++) {
+//     dataKeys.push(keys.item(i).attributes[1].value);
+// }
+
+//keydown event listener 
+document.addEventListener("keydown",keyPress);
+
+//updated input value event listener
+inputContent.addEventListener("input",inputChange)
+
+//start typing button event listener
+start.addEventListener("click", loadContent,true);
+
+
+//keypress animation 
+function keyPress(event){
+    let keyboardCode = event.keyCode;
+    if(keyboardCode>=48&&keyboardCode<=57) {
+        //inputContent.removeEventListener("input",inputChange);
+        // inputContent.innerHTML = inputContent.innerHTML.substr(0,inputContent.length-2)
+        // console.log(keyboardCode)
+        //inputContent.addEventListener("input",inputChange)
+    }
+    else {
+    keyboardCode+=32;
+
+    for(let i = 0;i<keys.length;i++) {
+        if(parseInt(keys.item(i).attributes[1].value)===keyboardCode){
+             //console.log(keys.item(i).attributes[1].value)
+             keys.item(i).classList.add("pressed");
+             setTimeout(()=>{
+                keys.item(i).classList.remove("pressed"); 
+             },100)
+             break;
+        }
+    }
+}  
+}
+
+function inputChange(event){
+
+    let inputVal = inputContent.value;
+    //.classList.remove("current");
+
+    //finding the integer equivalent of the last input character
+    let intVal = parseInt(inputContent.value.charAt(inputContent.value.length-1));
+
+    //if integer value is not NaN i.e. it is a number, remove it from the input value
+    if(!Number.isNaN(intVal)) inputContent.value = inputVal.substr(0,inputContent.value.length-1);
+    // console.log(inputContent.value)
+    let keyCode = inputVal.charCodeAt(inputVal.length-1);
+    if(inputVal.length<=para.length-1)
+   startBlinking(inputVal.length)
+    checkInput(keyCode,inputVal);
+}
+function startBlinking(letterId){
+
+        window.blinkingId = setInterval(()=>{
+            blinking(letters.item(letterId));
+        },150);
+}
+function clearBlinking(){
+    clearInterval(window.blinkingId);
+}
+function blinking(letter){
+    if(letter!=null && letter.classList[1]==="current")
+        letter.classList.remove("current");
+        else {
+            letter.classList.add("current");
+        }
+}
+
+//letters.item(inputValue.length-1).innerHTML.charAt(0)==="_"&& inputValue ||
+
+function checkInput(keyCode,inputValue){
+    if(inputValue.length===letters.length){
+        pauseClock("Pause");
+       let [minsCompleted,secsCompleted] = getCurrentTimerValue(minutes.innerHTML,seconds.innerHTML);
+       let totalCorrect = letters.length - typingLetterErrors;
+       let percentageCorrect = Math.floor(totalCorrect/letters.length * 100);
+       let charsPerSecond = Math.floor(totalCorrect/(minsCompleted*60 + secsCompleted));
+       let wordsPerMinute = Math.floor(charsPerSecond*60)/10;
+       speedVal.innerHTML = wordsPerMinute+" words/min";
+       scoreVal.innerHTML = percentageCorrect;
+       start.innerHTML = "Restart";
+       //start.removeEventListener("click",loadContent,true)
+       console.log("Percentage =" +percentageCorrect)
+       console.log("Speed "+charsPerMinute+ " per minute")
+    }
+    else if(inputValue.length<letters.length){
+    if(keyCode>=97 && keyCode<=122 || keyCode===32){
+        if(keyCode===32) keyCode = 95;
+       if(letters.item(inputValue.length-1).innerHTML.charCodeAt(0)===keyCode){
+            //console.log(letters.item(inputValue.length-1),inputValue)
+            clearBlinking();
+            startBlinking(inputValue.length);
+
+            letters.item(inputValue.length-1).classList.add("typed");
+        }
+        else {
+            typingLetterErrors++;
+            errorVal.innerHTML = typingLetterErrors;
+            clearBlinking();
+            startBlinking(inputValue.length);
+            letters.item(inputValue.length-1).classList.add("wrong");
+            console.log("Errors = "+typingLetterErrors)
+        }
+    }
+}
+}
+
+
+    //event.key.charCodeAt(0);
+
+    //console.log(inputVal.charCodeAt(inputVal.length-1))
+    //checkCurrentInput(event.key,para.innerHTML.charAt(0)      
+
+
+function loadContent(){
+    if(start.innerHTML==="Restart"){
+        window.location.reload();
+    }
+    inputContent.focus();
+    if(start.innerHTML==="Start"){
+        setNewContent();
+        para = document.querySelector("#content-to-type");
+    }
+    else if (start.innerHTML==="Resume"){
+        startClock(seconds.innerHTML,minutes.innerHTML,start.innerHTML);//resume timer
+        start.innerHTML = "Pause";
+    }
+    else if (start.innerHTML === "Pause"){
+        pauseClock(start.innerHTML); //pausing the clock
+        start.innerHTML="Resume";
+    }
+}
+
+function setNewContent(){
+    typingLetterErrors=0;
+        let paraNumber = randomParaGenerator(1);
+        let wordsArray = wordSeparator(content[0].toLocaleLowerCase());
+        let typingPara =" ";
+        wordsArray = wordsArray.filter((word)=> word.length>=1)
+        //limiting to 25 words 
+        let letterId = 0;
+        for(let wordIndex = 0;wordIndex<Math.min(25,wordsArray.length);wordIndex++){
+            let word = wordsArray[wordIndex];
+            console.log("word ",wordIndex,word)
+            typingPara = typingPara+letterSeparator(word,letterId);
+            letterId = letterId+word.length+1;
+        }
+
+        para.innerHTML = typingPara.trim();
+        letters = document.querySelectorAll(".typing");
+        startClock(seconds.innerHTML,minutes.innerHTML,start.innerHTML);//start timer
+        start.innerHTML = "Pause";
+}
+
+
+function wordSeparator(currContent){
+    return currContent.split(/[,. -_]/)
+}
+
+
+function letterSeparator(currContent,id){
+    let wordSpan="";
+    for(let charIndex=0;charIndex<currContent.length;charIndex++){
+        wordSpan= wordSpan + `<div class="typing" id="${id}">${currContent.charAt(charIndex)}</div>`;
+        id++;
+    }
+    wordSpan.trim();
+    wordSpan= wordSpan + `<div class="typing" id="${id}">_</div>`
+    return wordSpan;
+}
+function randomParaGenerator(limit){
+    return Math.floor(Math.random()*limit);
+}
+function startClock(secs,mins,condition){
+    let timerVals = getCurrentTimerValue(mins,secs);
+    let [minsVal,secsVal] = [...timerVals];
+
+    //After every second, check the value of condition
+    //If it is start, call the increase seconds function
+    //IF not, do nothing
+
+    startBlinking(inputContent.value.length)
+    //using window object because using local variables result in error in pausing the clock because of scoping
+     window.timerClockID = setInterval(() => { 
+        if(condition==="Start"|| condition==="Resume"){
+            secsVal = increaseSeconds(secsVal);
+            if(secsVal>59){
+                secsVal = 0;
+                minsVal=minsVal+1;
+            }
+            seconds.innerHTML = secsVal;
+            minutes.innerHTML = minsVal;
+        }
+    }, 1000);
+}  
+
+function getCurrentTimerValue(mins,secs){
+    let secsVal = parseInt(secs);
+    let minsVal = parseInt(mins);
+    let timer = [minsVal,secsVal];
+    return timer;
+}
+function increaseSeconds(secondsValue){
+    return secondsValue+1;
+}
+function pauseClock(condition){
+    if(condition==="Pause"){
+        clearInterval(window.timerClockID)
+    }
+}