Free Online Typing Speed Test

Concept Overview

A high-performance, minimalist, browser-based typing speed tester designed to help users quantify their keyboard proficiency. The interface will prioritize "distraction-free" typing, allowing users to focus entirely on the provided text passage.

Technical Specifications

• Architecture: Single-file HTML5/CSS3/Vanilla JS application.
• State Management: All WPM, accuracy, and timer data must be managed via in-memory JavaScript variables. NO localStorage, IndexedDB, or cookies are permitted.
• Performance: High-frequency keydown event listeners for sub-millisecond input response.

Features

• Real-time Metrics: Live display of current WPM and accuracy percentage as the user types.
• Visual Feedback: Real-time coloring of typed characters (Green for correct, Red for incorrect).
• Dynamic Text Generation: A randomized pool of common vocabulary to prevent pattern memorization.
• Completion Modal: A custom-built, lightweight modal that appears upon test completion, showing final WPM, total errors, and accuracy percentage.
• Reset Mechanism: An easily accessible button to restart the test without page reload.

UI/UX Design

• Aesthetic: Modern, clean, and "SaaS-inspired" light-mode design. Use high-contrast gray typography against a crisp white background.
• Layout:
  • Header: Contains the tool title and a simple "How to start" hint.
  • Stats Bar: Fixed position below the header displaying "WPM: 0" and "Accuracy: 100%".
  • Main Area: A centered, large, monospace font container for the text passage. This container should have a subtle drop shadow and rounded corners.
  • Controls: A single primary button for restarting the test.
• Color Palette:
  • Background: #F8FAFC
  • Text: #1E293B (Dark Blue-Grey)
  • Correct Input: #10B981 (Emerald Green)
  • Incorrect Input: #EF4444 (Soft Red)
  • Primary Buttons: #3B82F6 (Vibrant Blue)

Developer Directives

1. No External Frameworks: Use standard Vanilla JavaScript only. No React, Vue, or jQuery.
2. Responsive Design: Ensure the text container adapts to screen widths (max-width: 800px on desktop, padding for mobile).
3. Accessibility: All text elements must have appropriate contrast ratios. Ensure the input area is keyboard-accessible.
4. No Popups: Do not use alert() or confirm(). All feedback must be rendered as clean HTML elements within the DOM.
5. Sandboxed Compatibility: The code must be self-contained in one file. CSS should be inside a <style> block and JS inside a <script> block. Ensure all external library calls (e.g., Google Fonts) use HTTPS.