Internet Speed Test UI | HTML CSS JavaScript

Internet Speed Test UI with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #38

Project Overview

The Internet Speed Test UI is an interactive frontend project built using HTML, CSS, and JavaScript. It creates a visual speed-testing interface where users can click a button and watch an animated circular gauge display a simulated internet speed in Mbps. The project focuses on creating an engaging interface rather than performing an actual network speed measurement.

First, HTML creates the speed gauge, speed value, and Start Test button. Next, CSS builds the circular gauge using clipped elements, transformations, and smooth transitions. Finally, JavaScript generates a simulated speed value and gradually increases the displayed number while rotating the gauge. This project demonstrates DOM manipulation, event handling, setInterval(), CSS transforms, animations, and responsive frontend design.

Key Features

Circular Speed Gauge: The project displays internet speed through a circular visual gauge. The gauge rotates as the simulated speed increases, making the result easy to understand.
Interactive Start Test Button: Users can start the speed simulation by clicking the Start Test button. JavaScript listens for the click and begins the animated speed calculation.
Real-Time Speed Display: The current speed appears in the center of the gauge in Mbps. The displayed value increases gradually instead of appearing all at once.
Simulated Speed Result: JavaScript generates a random speed between 20 and 100 Mbps for the demonstration. Therefore, each test can produce a different simulated result.
Smooth Gauge Animation: The gauge rotates gradually while the speed value increases. CSS transitions help make the movement appear smooth and continuous.
Dynamic JavaScript Updates: JavaScript updates both the speed text and gauge rotation during the test. This demonstrates how multiple UI elements can respond to the same changing value.
Percentage-Based Gauge Rotation: The current speed is converted into a rotation angle between 0 and 180 degrees. As a result, the gauge visually represents the progress toward the maximum speed.
Clean User Interface: The project uses a centered white container with a circular gauge and a simple action button. This keeps the interface focused on the main speed-testing interaction.
Lightweight Frontend Project: The tool uses only HTML, CSS, and JavaScript without external libraries. This makes it a simple project for practicing frontend animation and DOM concepts.
Responsive Structure: The main container uses a fixed content width with a centered layout, while the gauge remains contained within the interface. This provides a simple presentation across different screen sizes.

What You'll Learn

How to create a speed test interface using HTML
How to build a circular gauge using CSS
How CSS clip and transform can create visual effects
How to handle button clicks with JavaScript
How to generate random values using Math.random()
How to create gradual animations using setInterval()
How to update DOM elements dynamically
How to combine JavaScript logic with CSS transformations

HTML Code

The HTML creates the basic structure of the Internet Speed Test UI. First, it adds a main container with the Internet Speed Test heading. Next, the .gauge contains a circular element made from mask and fill sections. The .inside element places the current speed value and the Mbps label in the center of the gauge.

Finally, the Start Test button uses the startBtn ID so JavaScript can attach a click event to it. The JavaScript file is loaded at the bottom of the page to control the speed animation.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internet Speed Test</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">
    <h2>Internet Speed Test</h2>

    <div class="gauge">
        <div class="circle">

            <div class="mask full">
                <div class="fill"></div>
            </div>

            <div class="mask half">
                <div class="fill"></div>
            </div>

            <div class="inside">
                <span id="speed">0</span>
                <p>Mbps</p>
            </div>

        </div>
    </div>

    <button id="startBtn">Start Test</button>
</div>

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

CSS Code

The CSS creates the centered speed-testing interface. The body uses Flexbox to place the white container in the center of the dark blue page background, while the container uses padding, rounded corners, and centered text. Next, the .circle element creates the main 200px circular gauge with a light gray background. The .mask and .fill elements use clipping to create the visible gauge sections.

The .fill element uses transform: rotate() to control the gauge position, while a CSS transition creates smoother movement. The speed value in the center uses a larger font size and bold text to make the result easy to see.

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.container{
background:white;
padding:40px;
border-radius:12px;
text-align:center;
width:300px;
}

h2{
margin-bottom:20px;
}

/* GAUGE */

.circle{
position:relative;
width:200px;
height:200px;
border-radius:50%;
background:#eee;
margin:auto;
overflow:hidden;
}

.mask, .fill{
position:absolute;
width:100%;
height:100%;
border-radius:50%;
}

.mask{
clip:rect(0px,200px,200px,100px);
}

.fill{
background:#2563eb;
clip:rect(0px,100px,200px,0px);
transform:rotate(0deg);
transition:transform 0.2s linear;
}

.inside{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
text-align:center;
}

#speed{
font-size:32px;
font-weight:bold;
}

button{
margin-top:20px;
padding:10px 20px;
border:none;
background:#2563eb;
color:white;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#1e40af;
}

Javascript Code

JavaScript controls the speed simulation and gauge animation. First, it selects the speed display, gauge fill elements, and Start Test button using getElementById() and querySelectorAll(). Next, clicking the Start Test button calls startTest(). This function generates a random speed between 20 and 100 Mbps using Math.random() and passes the result to animateSpeed().

After that, animateSpeed() gradually increases the current speed using setInterval(). JavaScript updates the displayed value with toFixed(1) and calculates a rotation angle based on the speed. Finally, the calculated angle is applied to both gauge fill elements using the style.transform property. Once the current speed reaches the target value, clearInterval() stops the animation.

const speedText = document.getElementById("speed");
const fills = document.querySelectorAll(".fill");
const startBtn = document.getElementById("startBtn");

startBtn.addEventListener("click", startTest);

function startTest(){

    let fakeSpeed = Math.random() * 80 + 20; // 20–100 Mbps

    animateSpeed(fakeSpeed);
}

function animateSpeed(target){

    let current = 0;

    const interval = setInterval(()=>{

        current += target / 60;

        if(current >= target){
            current = target;
            clearInterval(interval);
        }

        speedText.innerText = current.toFixed(1);

        let degree = (current / 100) * 180;

        fills.forEach(f => {
            f.style.transform = `rotate(${degree}deg)`; 
        });

    },50);
}