LiveChat Typing Test

This project is inspired by a typing speed test by LiveChat.

Interface Design

• PicoCSS and some customized CSS

Countdown Timer

• setInterval function with an interval of 1000 milliseconds (1 second)
• starts when a player starts typing (detected using keyboardEventHandler)
• in each interval, a variable with initial value of 60 will decrements by 1
• at value of 0 the interval will be terminated

Input Field

• The <span> element with the contenteditable attribute is a good choice because it adjusts its width as the content changes (during typing). Typed words on the left of the input field will transition smoothly from right to left.
• 

Two types of event handler is used for the <span> element:

1. KeyboardEventHandler, on:keydown:

   • detect player starts typing
   • modify the events of hitting Enter or Space key
     • when Input is empty, hitting Enter and Space key should not register Input value as answer.

2. FormEventHandler, on:input:

   • detect registered words and check for correctness
   • count total correct key pressed