TypeRacer - Typing Speed Improvement Tool

Overview

TypeRacer is an interactive typing speed test application designed to help you measure and improve your typing skills. Challenge yourself with various difficulty levels and track your performance metrics.

Features

• Three Difficulty Levels: Easy, Medium, and Hard - choose your challenge
• Live Timer: Real-time countdown that shows elapsed time as you type
• Performance Metrics:
  • WPM (Words Per Minute) calculation
  • Accuracy percentage tracking
  • Performance feedback
• Interactive Feedback: Real-time colour-coded word highlighting as you type
  • Blue for correct words
  • Red for incorrect words
  • Text Accuracy score (%)
• Anti-Cheating: Prevents copying from the sample text and pasting into the input box

How to Play

1. Select Difficulty: Choose from Easy, Medium, or Hard using the dropdown menu
2. Start Typing: Begin typing in the text area to automatically start the timer
3. Match the Text: Type the exact text shown above, word for word
4. Finish the Test: Press Enter to stop the timer and see your results
5. View Results: Check your WPM, accuracy percentage, and performance rating
6. Try Again: Click "Ready for the next test" when you're ready.

Performance Ratings

• Super Fast! (70+ WPM) - Above Average Speed
• Good Job! (40-69 WPM) - Average Speed
• Slow Speed (20-39 WPM) - Below Average
• Super Slow (Below 20 WPM) - Very Slow

Sample Texts

Easy Level

Short, simple sentences perfect for beginners to build confidence and foundational speed.

Medium Level

Standard difficulty with everyday language and mixed sentence structures for intermediate typists.

Hard Level

Challenging content including technical terminology, complex sentences, and philosophical concepts for advanced users.

Technical Stack

• Frontend: HTML5, CSS3, Bootstrap 5
• JavaScript: Vanilla JavaScript
• Fonts: Alegreya (headings), Nunito (body text)

Project Structure

typeracer/
├── index.html              # Main application file
├── README.md              # This file
├── assets/
│   ├── css/
│   │   └── styles.css     # Custom styling
│   ├── images/
│   │   └── head.webp      # Header background image
│   └── script/
│       └── script.js      # Application logic

Future Enhancements

• Leaderboard system
• User accounts and progress tracking
• Custom text uploads
• Keyboard layout preferences
• Sound effects and notifications

License

This project is created for personal use and practice. Feel free to modify and enhance it for your own purposes.