How to Build a Simple Typing Speed Test App
Hello Developers! In this tutorial, I'll walk you through creating a fun typing speed test app using just HTML and JavaScript. This project is perfect for learning event handling, DOM manipulation, and working with timers.
What We'll Build
Our app will:
- Display a random quote or sentence for users to type
- Measure typing speed in words per minute (WPM)
- Track accuracy percentage
- Provide real-time feedback
Step-by-Step Instructions
Step 1: Create the HTML Structure
Start by creating an index.html file with the basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Speed Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Typing Speed Test</h1>
<div class="display-area">
<p id="sample-text">The quick brown fox jumps over the lazy dog.</p>
</div>
<textarea id="input-area" placeholder="Start typing here..."></textarea>
<div class="stats">
<p>Time: <span id="timer">60</span>s</p>
<p>WPM: <span id="wpm">0</span></p>
<p>Accuracy: <span id="accuracy">100</span>%</p>
</div>
<button id="start-btn">Start Test</button>
<button id="reset-btn">Reset</button>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Add Basic Styling
Create a style.css file:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
max-width: 600px;
width: 100%;
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #333;
}
.display-area {
background: #f5f5f5;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
font-size: 18px;
line-height: 1.6;
}
#input-area {
width: 100%;
padding: 15px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 5px;
margin-bottom: 20px;
font-family: monospace;
min-height: 100px;
resize: vertical;
}
#input-area:focus {
outline: none;
border-color: #667eea;
}
.stats {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
background: #f0f0f0;
padding: 15px;
border-radius: 5px;
}
.stats p {
text-align: center;
}
.stats span {
font-weight: bold;
color: #667eea;
}
button {
padding: 12px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background: #667eea;
color: white;
cursor: pointer;
margin-right: 10px;
transition: background 0.3s;
}
button:hover {
background: #764ba2;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
Step 3: Write the JavaScript Logic
Create a script.js file:
let startTime = null;
let isTestActive = false;
let timeRemaining = 60;
let timerInterval = null;
const inputArea = document.getElementById('input-area');
const startBtn = document.getElementById('start-btn');
const resetBtn = document.getElementById('reset-btn');
const timerDisplay = document.getElementById('timer');
const wpmDisplay = document.getElementById('wpm');
const accuracyDisplay = document.getElementById('accuracy');
const sampleText = document.getElementById('sample-text').textContent;
// Start the typing test
startBtn.addEventListener('click', function() {
if (!isTestActive) {
isTestActive = true;
startTime = Date.now();
inputArea.focus();
startBtn.disabled = true;
inputArea.disabled = false;
// Start the countdown timer
timerInterval = setInterval(countdown, 1000);
}
});
// Reset the test
resetBtn.addEventListener('click', function() {
isTestActive = false;
clearInterval(timerInterval);
timeRemaining = 60;
inputArea.value = '';
inputArea.disabled = true;
startBtn.disabled = false;
timerDisplay.textContent = '60';
wpmDisplay.textContent = '0';
accuracyDisplay.textContent = '100';
});
// Update stats in real-time
inputArea.addEventListener('input', function() {
if (isTestActive) {
updateStats();
}
});
// Countdown timer
function countdown() {
timeRemaining--;
timerDisplay.textContent = timeRemaining;
if (timeRemaining <= 0) {
endTest();
}
}
// Calculate and display statistics
function updateStats() {
const userText = inputArea.value;
const words = userText.trim().split(/\s+/).length;
const timeElapsed = (Date.now() - startTime) / 1000 / 60; // in minutes
const wpm = Math.round(words / timeElapsed);
wpmDisplay.textContent = wpm;
// Calculate accuracy
let correct = 0;
for (let i = 0; i < userText.length; i++) {
if (userText[i] === sampleText[i]) {
correct++;
}
}
const accuracy = Math.round((correct / userText.length) * 100) || 100;
accuracyDisplay.textContent = accuracy;
}
// End the test
function endTest() {
isTestActive = false;
clearInterval(timerInterval);
inputArea.disabled = true;
startBtn.disabled = false;
alert('Test completed! Check your results above.');
}
How It Works
- Click "Start Test" - The timer begins and you can start typing
- Type the displayed text - Your accuracy and WPM update in real-time
- When time runs out - The test ends and shows your final stats
- Click "Reset" - Start over with a fresh attempt
Tips for Improvement
- Practice consistency over speed
- Focus on accuracy first, speed will follow
- Take regular breaks to avoid fatigue
- Challenge yourself with more difficult texts
Next Steps
Want to improve your typing skills? I recommend visiting typing practice at TypingPractice.org for more advanced exercises and challenges that can help you master touch typing!
Extending Your App
Here are some ideas to enhance your project:
- Add different difficulty levels with various texts.
- Save high scores to local storage.
- Add sound effects for feedback.
- Create a multiplayer mode.
- Track progress over time.
- Implement gamification to attract and motivate users.
What you did?
Congratulations! You have built your first typing speed test app. This project teaches you fundamental web development concepts that apply to many other applications. Keep practicing and building!
Happy coding! 🚀
Top comments (0)