From cab2597592992ce03c52afe43f14cc59b94f58aa Mon Sep 17 00:00:00 2001
From: MishtiGarg250 <msihti811@gmail.com>
Date: Wed, 8 Oct 2025 07:57:15 +0530
Subject: [PATCH] added typing-speed-test-app in beginner projects

---
 Projects/1-Beginner/Typing-Speed-Test-App | 76 +++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 Projects/1-Beginner/Typing-Speed-Test-App

diff --git a/Projects/1-Beginner/Typing-Speed-Test-App b/Projects/1-Beginner/Typing-Speed-Test-App
new file mode 100644
index 00000000..efb19e1e
--- /dev/null
+++ b/Projects/1-Beginner/Typing-Speed-Test-App
@@ -0,0 +1,76 @@
+# 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)  
+
+
+