Typing Showdown
An interactive typing speed test that tracks accuracy and speed in real time, featuring visual feedback, detailed statistics, and customizable themes.
About This Project
This project is a fun typing speed test built using HTML, CSS, and JavaScript. It challenges users to type a given text within a timed session while measuring typing speed (WPM) and accuracy through real-time string comparison. The interface provides instant visual feedback by highlighting mistyped characters and displaying progress through a dynamic progress bar. After each attempt, curated statistics are generated to help users track performance and improvement over time. To enhance usability and personalization, the application includes multiple theme options (light, dark, and pastel) allowing users to customize the look and feel of the game.
Key Features
- Real-time typing speed (WPM) and accuracy calculation
- Visual progress bar to indicate status
- Highligting of incorrectly typed characters or words
- Statisics after each run
- Multiple UI themes --> light, dark, and pastel
Technologies Used
- IDE: VSCode
- HTML - structure and layout
- CSS - styling and themes
- JavaScript - timers, string comparison, user unput handling, and statistics logic
Challenges & Learnings
Challenges:
A challenge I faced was synchronizing timers with user input events.
What I Learned:
I learned about implementing timers and performance tracking in JavaScript and handling string comparison efficiently for real-time feedback.
