|
|
# Typing Speed Test App
|
|
|
|
|
|
**Tier:** 1-Beginner
|
|
|
|
|
|
Typing speed tests are a fun and interactive way to measure how fast and accurately you can type.
|
|
|
In this project, you'll build a simple **Typing Speed Test App** that displays a random passage for the user to type within a limited time.
|
|
|
Once the timer runs out (or the user finishes typing), the app calculates and displays their **typing speed (WPM)** and **accuracy (%).**
|
|
|
|
|
|
This project will help you understand **real-time input handling**, **timing events**, and **DOM manipulation** — essential skills for building interactive web apps.
|
|
|
|
|
|
|
|
|
## Features
|
|
|
|
|
|
- **Real-time Timer** – Start typing to begin the timer automatically.
|
|
|
- **Live Accuracy Check** – Incorrect letters are highlighted instantly.
|
|
|
- **Performance Stats** – Get detailed results including Words Per Minute (WPM) and Accuracy (%).
|
|
|
- **Restart Option** – Take the test again with a new random passage.
|
|
|
- **No External Libraries** – All calculations implemented manually.
|
|
|
|
|
|
|
|
|
## User Stories
|
|
|
|
|
|
- [ ] User can see a **random passage** to type on the screen.
|
|
|
- [ ] User can start the test by clicking a **Start** button (starts the timer).
|
|
|
- [ ] User can see a **typing input area** to type the given text.
|
|
|
- [ ] User can view a **countdown timer** showing how much time is left (e.g., 60 seconds).
|
|
|
- [ ] User can see their **WPM** and **Accuracy (%)** after finishing or when the timer ends.
|
|
|
- [ ] User can click **Restart** to take the test again with a new passage.
|
|
|
- [ ] User sees **real-time error highlighting** while typing.
|
|
|
|
|
|
|
|
|
## Bonus Features
|
|
|
|
|
|
- [ ] User can select different **time durations** (15s, 30s, 60s, 120s).
|
|
|
- [ ] User can choose **difficulty levels** or text lengths.
|
|
|
- [ ] User’s **best WPM** is saved locally using `localStorage`.
|
|
|
- [ ] **Dark/Light Mode** toggle for better UI experience.
|
|
|
- [ ] Live **WPM and Accuracy** tracking while typing.
|
|
|
- [ ] **Progress Graphs or History** showing previous scores.
|
|
|
|
|
|
|
|
|
## Constraints
|
|
|
|
|
|
- Do not use any third-party libraries for typing speed or accuracy calculations.
|
|
|
- Use only front-end technologies like **HTML**, **CSS**, and **JavaScript** (or React if preferred).
|
|
|
|
|
|
|
|
|
## How to Calculate WPM
|
|
|
|
|
|
**Words Per Minute (WPM)** = (Total Characters Typed / 5) ÷ (Time in Minutes)
|
|
|
**Accuracy (%)** = (Correct Characters / Total Characters Typed) × 100
|
|
|
|
|
|
|
|
|
## Example UI Inspirations
|
|
|
|
|
|
- [Monkeytype](https://monkeytype.com)
|
|
|
- [10FastFingers](https://10fastfingers.com)
|
|
|
|
|
|
|
|
|
## Useful Resources
|
|
|
|
|
|
- [Typing Test (Wikipedia)](https://en.wikipedia.org/wiki/Typing_test)
|
|
|
- [MDN: Keyboard Events](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
|
|
|
- [How to Calculate WPM](https://www.speedtypingonline.com/typing-equations)
|
|
|
|
|
|
|
|
|
## Example Projects
|
|
|
|
|
|
- [Typing Speed Test – Monkeytype Clone](https://monkeytype.com)
|
|
|
- [Typing Speed Test (CodePen)](https://codepen.io/rajatkantinandi/pen/PoKyLMy)
|
|
|
- [Speed Typing Game – Web Dev Simplified](https://github.com/WebDevSimplified/Speed-Typing-Game)
|
|
|
- [Typing Game in React](https://github.com/karlhadwen/typing-game)
|
|
|
- [10FastFingers Clone – Vanilla JS](https://codepen.io/joshuaward/full/jObXJZj)
|
|
|
|
|
|
|
|
|
|
