/touchTyping

Primary LanguageJavaScript

Touch Typing Practice

Touch Typing Practice is a React component that allows users to practice their touch typing skills. It provides a random string of characters that the user needs to type accurately within a specified time limit. The component calculates and displays the typing accuracy percentage and the total number of correct keys pressed.

Features

  • Generates a random string of characters for typing practice.
  • Tracks the user's input and updates the active key being typed.
  • Calculates and displays the accuracy percentage in real-time.
  • Keeps track of the total number of correct keys pressed.
  • Displays the overall accuracy percentage once the time limit is reached.
  • Supports timing the typing practice for 5 minutes.

Installation

  1. Clone the repository or download the code files.
  2. Navigate to the project directory in your terminal.
  3. Install the dependencies by running the following command:

npm install

Start the development server with the following command:

npm start

Open your browser and access the app at http://localhost:3000.

Final output

final output

Usage

  1. The app will display a random string of characters to be typed.
  2. Start typing the characters in the input field.
  3. The active key being typed will be highlighted.
  4. As you type, the app will calculate and display the accuracy percentage.
  5. Once you complete typing the string, the app will generate a new random string for further practice.
  6. The total number of correct keys pressed and the overall accuracy percentage will be displayed.
  7. The timer will track the time elapsed for the typing practice, up to 5 minutes.

Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.