TypeTide

A typing speed test web app built purely on Vanilla JS

Click here to try it out!

Features

Core Features

• Live typing speed measurement (WPM - Words Per Minute)
• Real-time error detection and highlighting
• Accuracy tracking
• Time tracking per test
• Random quote selection for practice
• Dark/Light theme support
• Interactive guided tour for new users

Interactive Interface

• Clean, minimalist design
• Mobile-responsive layout
• Smooth animations and transitions
• Intuitive controls
• Information tooltips
• Theme toggle with persistent settings
• Animated keyboard symbols background
• Guided tour notifications

Stats & Metrics

• Real-time display of:
  • Time elapsed
  • Current speed (WPM)
  • Error count
• End-of-test statistics including:
  • Final WPM
  • Overall accuracy
  • Total errors
  • Time taken
• Visual accuracy indicators
• Performance-based notifications

User Controls

• Start/Stop functionality
• Pause/Resume feature
• Reset option
• Change quote button
• Information popup with tips
• Theme toggle button
• Results summary display

Technical Details

Built With

• HTML5
• CSS3 (with CSS Custom Properties)
• Vanilla JavaScript
• Responsive Design
• Google Fonts (Montserrat)
• Local Storage for theme persistence
• Module-based JavaScript architecture

Key Features

• Fluid responsive design for all screen sizes
• Touch-friendly mobile interface
• Animated notifications with pointing indicators
• Error highlighting
• Real-time statistics updates
• Dark/Light theme support
• Interactive guided tour system
• Performance-based feedback system

Getting Started

1. Open the application in your web browser
2. Follow the guided tour to learn about different features
3. Start typing the displayed quote
4. View your real-time stats above
5. Complete the test to see detailed results
6. Use the control buttons to:
   • Stop the current test
   • Pause/Resume typing
   • Reset and start over
   • Change to a different quote
   • View typing tips and information
   • Toggle theme preference

Usage Tips

• Focus on accuracy over speed initially
• Take note of your common mistakes
• Practice regularly with different quotes
• Use the information button for helpful tips
• Try to maintain a consistent typing rhythm
• Use the theme toggle for comfortable viewing
• Follow the guided tour on first visit

Performance Goals

Perfect Score Requirements:

• 100% accuracy
• At least 45 WPM
• Complete under 45 seconds

Close Pass Requirements:

• 90% accuracy
• At least 30 WPM
• Complete under 60 seconds

Mobile Usage

• Works on all mobile devices
• Horizontal stats display for better visibility
• Touch-friendly buttons
• Adaptive layout for different screen sizes
• Optimized spacing for mobile typing
• Theme support for better readability

Browser Support

Compatible with all modern browsers including:

• Chrome
• Firefox
• Safari
• Edge

License

This project falls under the MIT license, which allows for free use and modification. Please see the LICENSE file for more information.

Recent Updates

• Added Dark/Light theme toggle
• Implemented guided tour system
• Enhanced notification system with visual indicators
• Added performance-based feedback
• Improved mobile responsiveness
• Added pause/resume functionality