This content originally appeared on DEV Community and was authored by Mai Chi Bao

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 .

Table of Contents

• Why I Built This
• Features
• How It Works
• Demo Screenshot
• Why I Like It
• Reference

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

1. You type directly on the displayed reference text.
2. 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.
3. A progress bar and completion message keep you motivated.
4. 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.

Reference

All the code is live here on my GitHub:

mrzaizai2k/simple-typing

Feel free to clone it, star it , or ask me anything.

This content originally appeared on DEV Community and was authored by Mai Chi Bao