A minimalist, high-performance typing application built purely with semantic HTML5 🏗️, modern CSS3 🎨, and native JavaScript (ES6+) ⚡. This application allows users to measure their typing speed and precision instantly in a clean, distraction-free environment.
- 📦 Zero Dependencies: Pure vanilla implementation with no bulky frameworks or external libraries.
- 📈 Real-Time WPM: Track your Words Per Minute dynamically as you type.
- 🛑 Live Error Highlighting: Visual feedback system that instantly highlights mistyped or misspelled characters or words in red.
- 📊 Visual Performance Graph: Interactive charts that visually map out WPM trends and historical performance fluctuations.
- ⏱️ Custom Timers: Dropdown selector to choose your preferred test duration.
- 💾 Persistent Performance History: Saves past test results directly in the browser so stats remain intact unless browser cache/cookies are cleared.
- 🔄 Instant Reset: Dedicated controls to instantly wipe the current session and reload fresh text prompts.
The application leverages a carefully curated typography stack optimized for high readability, clean spacing, and structural alignment during fast-paced typing sessions:
- Primary Font Stack: Uses modern, highly readable sans-serif typography (
Segoe UI,Roboto,Helvetica Neue,Arial) to reduce eye strain during prolonged typing tests. - Monospace Integration: Integrates clean monospace elements (
SFMono-Regular,Consolas,Liberation Mono,Menlo) for precise character alignment, making it easy to spot trailing spaces or misplaced punctuation. - Dynamic Styling: Features optimized font weights and sizes that scale beautifully across mobile and desktop screens.
├── index.html # Application layout and structural elements 🏗️
├── style.css # Responsive UI layouts, typography settings, error states (red text) 🎨
└── script.js # Core timer logic, chart integration, local storage handling, and character checking ⚡
-
Clone the repository: 📥
git clone https://github.com
-
Launch the app: 🚀 Open the
index.htmlfile directly in any modern web browser.
- 🔍 Dynamic Character Checking: Compares user input character-by-character against the target string, instantly appending error CSS classes (e.g., color styling) to misspelled words.
- 📈 Data Visualization: Integrates canvas-based rendering or native charting logic to graph performance variations across sessions.
- 💾 Web Storage API: Utilizes
localStorageto save, fetch, and feed historical typing data directly into the graph across browser sessions. - 🖥️ DOM Manipulation: Updates the user interface and graph plots dynamically without requiring page refreshes.
Distributed under the MIT License. See LICENSE for more information. 📋