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 a frontend tool developed using HTML, CSS, and JavaScript that visually represents internet speed through a circular gauge. Users can start the test with a single click and view animated speed results in real time. This project demonstrates concepts like DOM manipulation, event handling, animation logic, and responsive design, making it ideal for showcasing frontend development skills and UI creativity.

Key Features

Convert speed into visual gauge animation
Interactive Start Test button
Real-time speed display simulation
Smooth and dynamic speed animation
Clean and user-friendly interface
Responsive design for all devices
Dynamic updates using JavaScript
Lightweight and fast frontend project

HTML Code

<!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

*{
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

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);
}