⌨️ Typing Speed Test Game

An interactive, modern, and minimalist web-based typing speed test app (inspired by Monkeytype) built using Vanilla HTML5, CSS3, and JavaScript.

---

🛠️ What I Used (Tech Stack)

Technology	Usage
HTML5	Project structure, SVG icons, semantic tags, and keyboard focus using tabindex="0".
CSS3	Dark mode styling, custom variables, smooth transition animations, blur filters, and typography with Google Fonts (Roboto & Roboto Mono).
JavaScript (ES6+)	Pure Vanilla JS for DOM manipulation, typing listener algorithms, live timer, dynamic WPM calculation, backspace handling, and smooth cursor movement.

---

📋 Step-by-Step Explanation of What I Did

Step 1: Built the HTML Layout (index.html)

• Created a clean container layout with a header displaying the 30-second timer and a "New Game" button.
• Added a game container #game with tabindex="0" so the div can receive keyboard focus and capture typing events.
• Added child elements for #words (where text is rendered), #cursor (the yellow caret indicator), and #focus-error (overlay shown when the user clicks away from the game).

Step 2: Styled the Application (style.css)

• Theme Variables: Defined a dark theme palette using CSS variables (--bgColor, --primaryColor, --textPrimary, --textSecondary).
• Typography: Imported Roboto for headers and Roboto Mono for the monospaced typing test words.
• Focus Detection: Used CSS pseudo-class #game:focus to blur text and display a "Click here to focus" message whenever the game area loses focus.
• Color Feedback: Styled correct letters in white (#fff), incorrect letters in red (#f55), and active target letter highlighting.
• Smooth Caret Cursor: Styled the cursor #cursor with smooth transition on top and left properties so it smoothly glides across letters as you type.

Step 3: Generated Dynamic Words (typing.js)

• Created an array of vocabulary words.
• Implemented a randomWord() function that picks random words from the pool.
• Built a formatWord() helper to wrap each word in a <div class="word"> and each letter in a <span class="letter">.
• Rendered 200 random words into the #words container upon starting a newGame().

Step 4: Built the Interactive Keyboard Typing Logic (typing.js)

• Added a keyup event listener to #game to capture user keystrokes in real time.
• Letter Matching: Compared typed key against expected character:
  • If correct ➔ Adds .correct class (white text).
  • If incorrect ➔ Adds .incorrect class (red text).
  • Handles extra characters typed past the word length.
• Space Bar Navigation: Pressing Space moves to the next word. Un-typed letters in the skipped word are marked incorrect.
• Backspace Support: Allowed correcting mistakes:
  • Deletes extra characters if present.
  • Moves cursor backwards to previous letters or even previous words.
  • Clears .correct or .incorrect state when backspacing over letters.

Step 5: Dynamic Cursor & Smooth Scrolling (typing.js)

• Used getBoundingClientRect() to measure exact letter positions on the screen in real-time.
• Updated #cursor position (top and left) dynamically after every keystroke.
• Implemented vertical line scrolling (marginTop) whenever the cursor moves past line boundaries to keep the active line centered.

Step 6: Added Timer Countdown & WPM Calculation (typing.js)

• Timer: Automatically starts a 30-second countdown on the very first keystroke.
• WPM Calculation: $$\text{WPM} = \left( \frac{\text{Number of Correct Words}}{\text{Elapsed Time in Minutes}} \right)$$
• Game Over: Automatically ends input after 30 seconds and displays the final WPM score on screen.

---

✨ Features

• ⏱️ 30-Second Countdown: Automated game timer triggered on first keystroke.
• 📊 Accurate WPM Calculation: Only fully and correctly typed words contribute to the score.
• 🎨 Visual Feedback: Real-time color updates for typed characters (White = Correct, Red = Incorrect).
• 🖱️ Focus Protection: Blurs text and prompts user to click to focus when clicked away.
• 🔄 Restart Game: "New Game" button to instantly reset and load fresh words.
• 📱 Smooth Cursor & Scroll: Fluid caret movement and automatic text line scrolling.

---

🚀 How to Run the Project Easily

1. Clone or Download this project folder to your local machine.
2. Open the index.html file directly in any browser (Chrome, Firefox, Edge, Safari) by double-clicking it.
3. Optional: Use VS Code extension Live Server to run it on a local dev server (http://127.0.0.1:5500).
4. Click inside the game area to focus and start typing!