JS Typing Speed Test

This is a typing speed test which will start timer when keypress the word and test whether the word you typing is same to the sample paragraph with border color changes.

The demo includes three files:html css and js.

html

Link the css and js in the head.
The main test part is test-area section which has origin-text,text-wrapper and meta for timer.

css

Test-wrapper display flex and the child textarea is 1 which means it will occupy the whole line.
The meta contains a timer and a reset button, which should be in same line and be space-between.

js1

The first step is selecting all the id from document and set default variables.

js2

js3

When keypress happends,the function start begins.

start(): if the textenterlength==0 which means you have press a word down and timerRunning is false, the runTimer begain every millisecond.

runTime():timer[3] is millinsecond and plus every 1/100 second. timer[0
 is minutes,timer[1] is second. timer[2] is hundreds od second. And store the currentTime in theTimer which can be shown.

Everytime pressup happends, the spellCheck function begin at the same time.

originTextMatch is the substring of the same length with originText from first letter.If the textEntered is same with the originTextMatch,the border should be light blue,and if all the letter you entered is total same with originText which means the test is over,so the timer should be stoped and border color change to blue.Other wise, when you typed the wrong letter,the border would be orange.

When the test is over,you can start over by reset button which will execute the reset function.

reset(): clear the timer, make all the variable default and also the border color and timer .