This typing speed test app measures how fast a user types by timing how long it takes to retype a given sentence and then calculating words per minute (WPM); it starts the timer when the user begins typing, counts the number of words entered, and uses basic JavaScript logic with events, time calculation, and DOM manipulation to display the typing speed, making it a practical and beginner-friendly project for understanding real-world JavaScript interactivity.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Sets correct character encoding -->
<meta charset="UTF-8">
<!-- Title shown in browser tab -->
<title>Typing Speed Test</title>
<style>
/* Style the entire page */
body {
font-family: Arial, sans-serif; /* Simple readable font */
background: #f4f4f4; /* Light background */
text-align: center; /* Center all text */
padding: 40px; /* Space around content */
}
/* Main container */
.box {
background: white; /* White card */
padding: 20px; /* Inner spacing */
max-width: 500px; /* Limit width */
margin: auto; /* Center horizontally */
border-radius: 8px; /* Rounded corners */
}
/* Text area for typing */
textarea {
width: 100%; /* Full width */
height: 100px; /* Fixed height */
font-size: 16px; /* Comfortable text size */
padding: 10px; /* Inner spacing */
}
/* Button styling */
button {
margin-top: 10px; /* Space above button */
padding: 10px 15px; /* Button size */
cursor: pointer; /* Pointer on hover */
}
</style>
</head>
<body>
<!-- Main content box -->
<div class="box">
<!-- App heading -->
<h2>Typing Speed Test</h2>
<!-- Text the user must type -->
<p id="text">
JavaScript is a powerful language for building interactive websites.
</p>
<!-- Area where user types -->
<textarea id="input" placeholder="Start typing here..."></textarea>
<!-- Button to finish test -->
<button onclick="checkSpeed()">Check Speed</button>
<!-- Result output -->
<p id="result"></p>
</div>
<script>
// Store the text user must type
const text = document.getElementById("text").textContent;
// Get the textarea element
const input = document.getElementById("input");
// Get the result paragraph
const result = document.getElementById("result");
// Variable to store start time
let startTime = null;
// Start timer when user begins typing
input.addEventListener("keydown", function () {
// If timer has not started yet
if (startTime === null) {
// Record current time
startTime = new Date();
}
});
// Function to calculate typing speed
function checkSpeed() {
// Record end time
const endTime = new Date();
// Calculate time difference in seconds
const timeTaken = (endTime - startTime) / 1000;
// Count total words typed
const wordsTyped = input.value.trim().split(" ").length;
// Calculate Words Per Minute (WPM)
const wpm = Math.round((wordsTyped / timeTaken) * 60);
// Display result to user
result.textContent = "Your typing speed is " + wpm + " words per minute.";
}
</script>
</body>
</html>