Create a Typing Speed Test App with JavaScript

Fun & Interactive Project to Build Your JS Skills

Want to test how fast you can type? Or better yet — build your own typing speed test app and share it with friends?

In this blog, we’ll walk you through how to build a Typing Speed Test App using HTML, CSS, and JavaScript. It’s simple, fun, and a great project to improve your frontend development skills!

🚀 What You’ll Learn

DOM manipulation in JavaScript
Event listeners and timers
Real-time typing accuracy tracking
Displaying Words Per Minute (WPM)

📁 Step 1: Project Setup

Create the following files:

pgsql
typing-test/
│
├── index.html
├── style.css
└── script.js

🧱 Step 2: HTML Structure

html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Typing Speed Test</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>⌨️ Typing Speed Test</h1>
    <p id="sentence"></p>
    <textarea id="input" placeholder="Start typing here..."></textarea>
    <button id="restart">Restart</button>
    <div id="result"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

🎨 Step 3: CSS Styling

css
/* style.css */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background: white;
  padding: 30px;
  width: 90%;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
}

textarea {
  width: 100%;
  height: 120px;
  margin-top: 20px;
  font-size: 16px;
  padding: 10px;
  resize: none;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

#result {
  margin-top: 20px;
  font-weight: bold;
}

💡 Step 4: JavaScript Logic

javascript
// script.js
const sentences = [
  "JavaScript is a powerful language for web development.",
  "Typing fast is a skill worth mastering.",
  "Frontend development involves HTML, CSS, and JavaScript.",
  "Practice makes perfect when it comes to coding."
];

const sentenceEl = document.getElementById("sentence");
const inputEl = document.getElementById("input");
const resultEl = document.getElementById("result");
const restartBtn = document.getElementById("restart");

let startTime;
let currentSentence = "";

function startTest() {
  currentSentence = sentences[Math.floor(Math.random() * sentences.length)];
  sentenceEl.textContent = currentSentence;
  inputEl.value = "";
  resultEl.textContent = "";
  inputEl.disabled = false;
  inputEl.focus();
  startTime = new Date().getTime();
}

inputEl.addEventListener("input", () => {
  const typedText = inputEl.value;
  if (typedText === currentSentence) {
    const endTime = new Date().getTime();
    const timeTaken = (endTime - startTime) / 1000;
    const wordCount = currentSentence.split(" ").length;
    const speed = Math.round((wordCount / timeTaken) * 60);

    resultEl.textContent = `🎯 You typed at ${speed} words per minute!`;
    inputEl.disabled = true;
  }
});

restartBtn.addEventListener("click", startTest);

window.onload = startTest;

✅ How It Works

A random sentence is shown when the page loads.
When the user starts typing, a timer starts.
Once the sentence is typed exactly, it calculates:
- Time taken
- Number of words
- Words Per Minute (WPM)

🧠 Extra Features You Can Add

Live WPM counter
Accuracy percentage
Timer countdown
High score storage using localStorage
Theme switch (light/dark mode)

📦 Conclusion

This Typing Speed Test App is a great way to sharpen your JavaScript skills with real user interaction, timing, and performance calculation. You can use it to track your own speed, improve your typing, or even share it with others!

💬 Want a version with a leaderboard or multiplayer mode? Let me know in the comments and I’ll help you extend it!