TIL: Building a Simple Typing Practice Tool

#tooling #mrzaizai2k #html #css

📝 Today I Learned: Building a Simple Typing Practice Tool

I built a really small web-based tool to enhance typing skills with real-time feedback.

It’s just a single HTML file — no backend, no frameworks, no setup. You open it in your browser and start typing 🚀.

💭 Why I Built This

Most typing practice tools I tried don’t support Vietnamese text well:

Their UI looks broken or ugly when practicing with Vietnamese.
They rarely offer fresh, real-world Vietnamese content.
I wanted to auto-generate practice text from news so I don’t get bored.
I also wanted to customize the metrics I care about (e.g., word accuracy, correct WPM).
Plus, having a dark mode toggle and a cleaner UI makes practice more enjoyable.

That’s why I created this simple tool — just for myself at first — but it turned out useful enough to share.

✨ Features

Works everywhere — pure HTML, CSS, and JS.
Auto-fetches Vietnamese 🇻🇳 or English 🇺🇸 news text for practice.
Customizable reference text (you can paste or write your own).
Tracks:
- Time (seconds)
- Character Accuracy (%)
- Word Accuracy (%)
- Words Per Minute (WPM)
- Correct WPM
- Progress (typed vs total characters)
Real-time color coding: ✅ correct, ❌ incorrect, and 🎯 current character.
Auto-scrolls while typing.
Completion message when done.
Dark mode + Reset button.

⚡ How It Works

You type directly on the displayed reference text.
Each keystroke updates:
- Character accuracy → (correct chars ÷ total typed).
- Word accuracy → (correct full words ÷ attempted words).
- WPM → counts total words per minute (including mistakes).
- Correct WPM → only correct words per minute.
A progress bar and completion message keep you motivated.
You can fetch real news text from VnExpress and practice with something fresh.

🖥️ Demo Screenshot

You can try my Simple Typing

You can also visit my repo here 👉 mrzaizai2k/simple-typing.

Just download the typing.html file, open it in any browser — and you’re ready to practice 🚀.

💡 Why I Like It

Minimalistic: no dependencies, just one .html file.
Real-time feedback keeps me aware of typing mistakes instantly.
The news fetch feature means I can always practice with new content, instead of boring lorem ipsum.
Great for improving not just speed, but also accuracy.