Build Typing Speed Test Project using HTML CSS JavaScript

Typing faster is a skill that makes a big difference in productivity. Whether you’re coder, creating reports or chatting online, a typing practice tool can help you improve speed and accuracy. In this article, we’ll walk through building a Typing Speed Test Project with WPM, CPM and Accuracy using HTML, CSS and JavaScript. This typing test provides real-time performance tracking and displays results once the test is completed.

HTML Structure

To begin with, we design a clean HTML structure that holds the typing speed test project. The layout includes:

<div class="container">
    <h1>Test Your Typing Skills</h1>
    <div class="inner-wrapper"></div>
</div>
<div class="modal-container">
    <div class="modal">
        <h2>Your Result</h2>
        <span class="bi bi-check2-circle"></span>
        <div id="result">
            <div class="result-card" id="wpm">
                <p class="value-box" id="wpm-value">0</p>
                <p class="res-label">WPM</p>
            </div>
            <div class="result-card" id="cpm">
                <p class="value-box" id="cpm-value">0</p>
                <p class="res-label">CPM</p>
            </div>
            <div class="result-card" id="accuracy">
                <p class="value-box" id="accuracy-value">0%</p>
                <p class="res-label">Accuracy</p>
            </div>
        </div>
        <button class="primary-btn try-again-btn">Try Again</button>
        <div class="close-btn bi bi-x"></div>
    </div>
</div>

• A main container that displays the typing test interface.
• A typing area where sentences are shown for practice.
• A timer element that runs while the test is active.
• A results modal that shows the final score including WPM, CP,M and Accuracy once the test ends.

This structure ensures the project is lightweight, semantic and easy to extend for additional features like difficulty levels or sentence categories. With this HTML foundation, the typing speed test project gets a clear structure, making it easy to connect with CSS and JavaScript later.

CSS Styling

The next step is styling the typing speed test project for a modern and responsive appearance. The CSS focuses on:

@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap);
@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: "Baloo Bhai 2";

• A card-style layout with rounded corners and soft shadows for better readability.
• Typography choices such as Baloo Bhai 2 and Work Sans that give the interface a modern look.
• Highlighting correct and incorrect characters with green and red indicators.
• A progress circle for the timer that animates during the test.
• A modal popup for results, styled with a centered layout and bold typography for clarity.

With these CSS styles, the typing speed test project looks professional and visually appealing while guiding the user through the test smoothly.

JavaScript Functionality

Finally, JavaScript powers the interactivity and logic of the typing speed test project. The main functions include:

const elements = {
    innerWrapper: document.querySelector(".inner-wrapper"),
    wpmDiv: document.getElementById('wpm-value'),
    cpmDiv: document.getElementById('cpm-value'),
    accuracyDiv: document.getElementById('accuracy-value'),
    popupCloseBtn: document.querySelector(".close-btn"),
    tryAgainBtn: document.querySelector(".try-again-btn")
};

const durationOptions = [30, 60, 120, 240];

• Generating random sentences from a predefined list for each test attempt.
• Tracking keystrokes in real time and comparing them against the displayed sentence.
• Calculating WPM (Words Per Minute) based on correct words typed and elapsed time.
• Calculating CPM (Characters Per Minute) for more detailed insights into typing performance.
• Measuring Accuracy by checking correct characters against total typed characters.
• Displaying results in the modal once the timer ends or the sentence is completed.

This ensures the typing speed test project isn’t just static—it’s fully interactive, giving instant feedback and detailed performance metrics.

Wrap-Up

By combining HTML for structure, CSS for styling and JavaScript for logic, we created a fully functional Typing Speed Test Project with WPM, CPM and Accuracy. This tool is perfect for anyone looking to improve typing skills, practice daily or even prepare for coding interviews.

If you’re building a typing practice website, a typing speed test app using HTML CSS JS only or want a WPM calculator for fun, this HTML CSS JavaScript project gives you everything you need to get started.