Typing speed tests are a fun and engaging way to measure how quickly you can type while maintaining accuracy. If you’re a web developer looking for a hands-on project to practice your JavaScript skills, building a typing speed test is a perfect choice. In this blog, we’ll walk through creating a simple but effective typing speed test application using HTML, CSS, and JavaScript.

Prerequisites

To follow along, you should have a basic understanding of:

  • HTML: Structure of the web pages
  • CSS: Styling of the web pages
  • JavaScript: Adding interactivity to the web pages

Project Overview

The typing speed test application will display a random sentence that the user must type as quickly and accurately as possible. The application will then calculate and display the user’s typing speed in Words Per Minute (WPM) and the accuracy percentage.

1. Setting Up the Project Structure

Create a new directory for your project and add the following files:

  • index.html: For the HTML structure.
  • style.css: For styling the application.
  • script.js: For JavaScript functionality.

2. Creating the HTML Structure

Let’s start by defining the basic structure of our typing test in index.html. We will have a container that includes:

  • A header for the title
  • A paragraph to display the sentence to type
  • An input box for the user to type into
  • A button to start the test
  • A section to display the results
				
					<!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>
        <p id="sentence">Click "Start Test" to begin</p>
        <input type="text" id="input-box" placeholder="Start typing..." disabled>
        <button id="start-button">Start Test</button>
        <div id="results">
            <p id="wpm">WPM: 0</p>
            <p id="accuracy">Accuracy: 0%</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Styling with CSS

Next, we’ll add some CSS to make our application visually appealing. Open the style.css file and add the following styles:

				
					body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
}

.container {
    text-align: center;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

h1 {
    color: #333;
}

#sentence {
    font-size: 18px;
    margin-bottom: 20px;
}

#input-box {
    width: 80%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

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

#results {
    margin-top: 20px;
    font-size: 18px;
    color: #555;
}

4. Adding JavaScript Functionality

Now, let’s add functionality to our typing speed test with JavaScript. Open the script.js file and add the following code:

Step 1: Initial Setup

First, define some variables to keep track of the time, accuracy, and sentences. We’ll also add an array of sentences that will be randomly selected for each test.

				
					const sentences = [
    "The quick brown fox jumps over the lazy dog.",
    "JavaScript is a versatile programming language.",
    "Typing speed tests are fun and engaging.",
    "Practice makes perfect in typing.",
    "Speed and accuracy are essential in coding."
];

let startTime;
let endTime;
let totalWords;
let correctWords;
let currentSentence;

const inputBox = document.getElementById('input-box');
const startButton = document.getElementById('start-button');
const sentenceDisplay = document.getElementById('sentence');
const wpmDisplay = document.getElementById('wpm');
const accuracyDisplay = document.getElementById('accuracy');

Step 2: Starting the Test

When the user clicks the “Start Test” button, we’ll pick a random sentence, display it, and enable the input box for typing. We’ll also record the start time.

				
					startButton.addEventListener('click', () => {
    currentSentence = sentences[Math.floor(Math.random() * sentences.length)];
    sentenceDisplay.textContent = currentSentence;
    inputBox.value = '';
    inputBox.disabled = false;
    inputBox.focus();
    startTime = new Date().getTime();
    totalWords = currentSentence.split(' ').length;
    correctWords = 0;
});

Step 3: Measuring Typing Speed and Accuracy

We’ll add an event listener to the input box that checks the user’s input against the current sentence. When the user types the complete sentence correctly, we’ll calculate the WPM and accuracy.

				
					inputBox.addEventListener('input', () => {
    const inputText = inputBox.value;
    
    if (inputText === currentSentence) {
        endTime = new Date().getTime();
        const timeTaken = (endTime - startTime) / 1000 / 60; // time in minutes

        const wordsTyped = inputText.split(' ').length;
        const speed = Math.round(wordsTyped / timeTaken);
        wpmDisplay.textContent = `WPM: ${speed}`;

        const correctCharacters = inputText.split('').filter((char, index) => char === currentSentence[index]).length;
        const accuracy = Math.round((correctCharacters / currentSentence.length) * 100);
        accuracyDisplay.textContent = `Accuracy: ${accuracy}%`;

        inputBox.disabled = true;
    }
});

5. Testing and Enhancements

Now that the basic typing speed test is working, test it by opening the index.html file in your web browser. You should be able to click “Start Test,” type the sentence, and see your WPM and accuracy displayed.

Possible Enhancements:

  • Add a Countdown Timer: Add a timer to challenge the user to type within a specific time limit.
  • Highlight Typing Errors: Highlight incorrect characters in the input box as the user types.
  • Track History: Keep a record of past typing tests to track progress.
  • Different Difficulty Levels: Add more complex sentences for advanced users.
  • Mobile Responsiveness: Ensure the application works well on mobile devices.

Conclusion

Congratulations! You’ve built a simple yet effective typing speed test using HTML, CSS, and JavaScript. This project is a great way to practice JavaScript, especially handling user input and manipulating the DOM. As a next step, consider implementing some of the enhancements to make the application more engaging and challenging. Happy coding!