Typing Speed Tester

A modern, feature-rich typing speed test application built with vanilla HTML, CSS, and JavaScript. Test and improve your typing speed with multiple modes, difficulty levels, and real-time performance tracking.

Features

Test Modes

Timed Mode

• Test your typing speed within a set time limit
• Available durations: 15s, 30s, 60s, 120s
• Countdown timer with visual progress bar

Word Count Mode

• Type a specific number of words
• Available counts: 10, 25, 50, 100 words
• Track elapsed time as you type

Quote Mode

• Type famous quotes and inspirational messages
• Random quote selection for variety
• Perfect for practicing with real-world text

Difficulty Levels

• Easy: Common, short words for beginners
• Medium: Moderate vocabulary with varied word lengths
• Hard: Complex words and technical terminology

Real-Time Metrics

• WPM (Words Per Minute): Adjusted for accuracy
• Raw WPM: Total typing speed without penalties
• Accuracy: Percentage of correctly typed characters
• Error Count: Total mistakes made during the test
• Live Progress Bar: Visual representation of completion
• WPM Sparkline: Real-time graph showing speed fluctuations

Visual Feedback

• Color-Coded Characters:
  • Gray: Completed words
  • Green: Correctly typed characters
  • Red: Incorrect characters
  • Animated cursor on current character
• Shake Animation: Visual feedback on typing errors
• Caps Lock Indicator: Warning when Caps Lock is active
• On-Screen Keyboard: Glass-morphism design with key press highlighting

User Experience

• Theme Toggle: Switch between dark and light modes
• Best Score Tracking: Saves your best WPM for each mode and difficulty
• Celebration Effect: Visual feedback when beating your personal best
• Keyboard Shortcuts: Tab + Enter to restart current test
• Word-Level Editing: Backspace only works within the current word
• Anti-Cheat: Blocks copy-paste and developer tools during tests

Accessibility

• ARIA labels for screen readers
• Keyboard-first navigation
• High contrast color schemes
• Responsive design for all screen sizes

Getting Started

Installation

No installation required. Simply open the index.html file in any modern web browser.

# Clone or download the repository
# Navigate to the project directory
# Open index.html in your browser

Browser Compatibility

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

How to Use

1. Select a Mode: Choose between Timed, Word Count, or Quote mode
2. Choose Difficulty: Select Easy, Medium, or Hard from the dropdown
3. Set Parameters: Pick duration (Timed) or word count (Words)
4. Start Typing: Click on the passage area and begin typing
5. View Results: See your performance metrics when the test completes
6. Restart or New Test: Use the buttons to retry or generate a new passage

Keyboard Shortcuts

• Tab + Enter: Restart the current test
• Click Passage Area: Focus the typing input

Technical Details

Architecture

• Single-File Application: All HTML, CSS, and JavaScript in one file
• No Dependencies: Pure vanilla JavaScript, no frameworks required
• Local Storage: Saves best scores and theme preferences
• Canvas API: Used for real-time WPM sparkline visualization

Performance Metrics Calculation

• WPM: (correctChars / 5) / minutes
• Raw WPM: (totalChars / 5) / minutes
• Accuracy: (correctChars / totalChars) * 100

Data Pools

• Easy: 150+ common English words
• Medium: 100+ intermediate vocabulary words
• Hard: 80+ complex and technical terms
• Quotes: 5 inspirational quotes from notable figures

Styling

• CSS Variables: Theme-aware color system
• Glass Morphism: Modern translucent keyboard design
• Responsive Grid: Adapts to different screen sizes
• Smooth Animations: Subtle transitions and effects

Customization

Adding New Quotes

Edit the quotes array in the JavaScript section:

const quotes = [
  "Your new quote here. - Author Name",
  // Add more quotes...
];

Modifying Word Pools

Extend the pools object with additional words:

const pools = {
  easy: ["word1", "word2", ...],
  medium: ["word1", "word2", ...],
  hard: ["word1", "word2", ...]
};

Changing Color Scheme

Modify CSS variables in the :root selector:

:root {
  --bg: #0f1220;
  --surface: #1a1a2e;
  --text: #e9e7ff;
  /* Customize other colors... */
}

Features in Detail

Anti-Cheat Mechanisms

• Prevents copy-paste operations
• Blocks developer tools shortcuts (F12, Ctrl+Shift+I)
• Disables right-click context menu during tests
• Word-level backspace restriction

Progress Tracking

• Real-time WPM calculation updated every second
• Visual progress bar showing completion percentage
• Sparkline graph displaying WPM fluctuations over time
• Best score persistence across sessions

Responsive Design

• Mobile-friendly layout with adjusted font sizes
• Touch-optimized on-screen keyboard
• Adaptive grid system for different screen widths
• Media queries for screens below 720px and 480px

Browser Storage

The application uses localStorage to persist:

• Best WPM scores for each mode and difficulty combination
• Theme preference (dark/light mode)

Storage keys format:

• typing_best_{mode}_{difficulty}: Best WPM scores
• typing_theme: Current theme setting

Known Limitations

• Requires JavaScript enabled
• Best scores are stored locally (not synced across devices)
• Limited quote collection (5 quotes)
• No user accounts or cloud synchronization

Future Enhancements

Potential features for future versions:

• User authentication and cloud sync
• Multiplayer racing mode
• Custom text input option
• Detailed statistics and history tracking
• More comprehensive quote library
• Typing lessons and tutorials
• Leaderboards and achievements

License

This project is open source and available for personal and educational use.

Credits

Built with modern web technologies and best practices for typing speed testing.

Support

For issues, questions, or suggestions, please open an issue in the project repository.

---

Happy typing! Practice regularly to improve your speed and accuracy.