Speed typing game

Speed typing test websites are useful for people who want to learn to type faster, type without looking at their keyboards, practice typing specific sets of entries (think numeric tests, address test, emoji test?), or get used to a new keyboard. You will also learn how to load different data sources based on the user input, store state in the browser, and create a timer.

This project will take 20 to 40 hours, depending on your coding experience and how much searching you need to do.

• Create a display box for a paragraph of text that the user will type
• Create an input box for the user to type the displayed text
• Highlight the character of the word users are currently typing (in the display box):
  • GREEN - letter is correct
  • RED - letter is wrong
• Create a START button for the test to begin
• Create a display box for the countdown timer
  • Set a countdown time for each test
  • Activate the timer when the user clicks on START
• When the timer runs out, display how many words the user typed per minute

For an extra challenge:

• Create a drop down menu where the user can select the difficulty of the text (i.e. easy, medium, difficult). Based on the user’s selection, display the selected text.
• Calculate the accuracy (%) of the user’s inputs
• Give different words different weights: simple words like “a”, “the”, “an” etc. should weigh less than difficult words like “friendship” and “neighborhood”
• Allow users to see only one line of text, rather than the entire paragraph
• Create different types of tests for different use cases: text only, numbers only, emoji only, etc.

The project can be completed using any popular web framework, like React, Vue.js or Angular. You can also attempt to code something using plain JavaScript, HTML and CSS, but using frameworks would provide an easier journey if you understand their basics.

• Save the user’s start time with unix timestamp in the browser’s storage
• The data can be stored locally using LocalStorage API
• Create a “setInterval” method that updates the time elapsed as difference between start time and current time

• Example: https://www.typingtest.com/
• LocalStorage API: Window.localStorage - Web APIs | MDN
• SetInterval API: Window setInterval() Method
• How to import local json data
• Typing error analysis