Typing Speed Test

Typing Speed Test is a dynamic web application designed to help users assess and improve their typing speed. With features like real-time feedback, error tracking, and word-per-minute calculations, this application provides an engaging way to practice typing skills while maintaining an intuitive user interface.

Typing Speed Test Screenshot

Technologies Used

  • Frontend: HTML, SCSS, TypeScript
  • Backend: None (API Integration with axios)
  • API: Bacon Ipsum API for generating random text
  • Libraries & Tools:
    • Canvas Confetti (Visual Effects)
    • Toastify.js (Notification System)
    • UUID (Unique Identifier Generation)
    • Vite (Build Tool)
    • Feather Icons (UI Icons)

Features

  1. Real-Time Typing Analysis:

    • Tracks typing speed (WPM and CPM).
    • Counts typing mistakes in real time.

  2. Interactive User Interface:

    • Dynamic highlighting of text as users type.
    • Clear visual indicators for correct and incorrect input.

  3. Customizable Experience:

    • Adjustable time settings.
    • Responsive design for accessibility on various devices.

  4. Performance Metrics:

    • Displays a summary of user performance, including time left, errors made, and typing speeds.

  5. Error Feedback:

    • Immediate indication of mistakes, enhancing typing accuracy.

Code Architecture

The core functionality is encapsulated in a TypingSpeed class that handles:

  • Initialization: Dynamically creates and renders the DOM elements.
  • Event Handling: Tracks user input and updates metrics.
  • State Management: Maintains the typing progress, timer, and performance data.
  • API Integration: Fetches random text content via axios to populate the typing test.