Test Your Typing Speed & Accuracy Test your typing speed with WPM calculation, accuracy tracking, and error highlighting.

The tool works under the hood by utilizing React's useState and useRef hooks to manage its state and reference DOM elements, specifically a textarea for user input. It employs the Date.now() function from the JavaScript API to track the start and end times of the typing test, calculating the elapsed time in seconds. The test text is randomly selected from an array of predefined strings using Math.floor(Math.random() * SAMPLE_TEXTS.length), simulating real-world typing scenarios. As the user types, it iterates through each character in the input string, comparing it to the corresponding character in the original text and incrementing an error count for any mismatches. This process is handled by the handleType function, which updates the state with the current typed text, elapsed time, and error count.

It calculates words per minute (WPM) using the formula Math.round((wordCount / elapsed) * 60), where wordCount is determined by splitting the typed text into words and filtering out empty strings. Characters per minute (CPM) are calculated similarly, using the length of the typed text instead of word count. The tool displays these statistics in a stats bar, along with accuracy and error counts, providing users with real-time feedback on their performance. React's useEffect hook is used to implement a live timer update every 200 milliseconds when the test is running, ensuring that the displayed elapsed time remains accurate and up-to-date.

The tool uses TypeScript for type checking and defines its own types, such as TestState, which can be 'idle', 'running', or 'finished'. It also utilizes React's useCallback hook to memoize functions like pickText and startTest, preventing unnecessary re-renders and improving performance. The typed text is compared to the original text character by character, with correct characters highlighted in green and errors highlighted in red, providing immediate visual feedback to the user. By leveraging these technologies and algorithms, the tool provides an accurate and engaging typing speed test experience for users.