Detect Internet Speed using JavaScript

Hey there, coders! Are you tired of slow internet speeds affecting your productivity? In this blog post, we are going to explore the creation of an Internet Speed Checker using JavaScript. With this tool, you will be able to quickly and easily test your internet connection speed, allowing you to diagnose any issues and optimize your browsing experience. By building this project, you will also gain valuable knowledge in JavaScript programming concepts such as making HTTP requests, handling responses, and updating the DOM dynamically. So, let’s get started and take control of your internet speed today!

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Check internet speed using javascript - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

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

</html>

Paste the below code in your `<body>` tag.

<div class="container">
    <p style="font-weight: bold;">Your Internet Speed:-</p>
    <p id="kbs">calculating...</p>
    <p id="mbs"></p>
</div>

Output Till Now

CSS Code

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  align-items: start;
  justify-content: center;
  background: #8e2de2;
}

.container {
  background: white;
  color: black;
  font-size: 26px;
  margin-top: 15rem;
  border-radius: 10px;
  padding: 30px 30px;
}

Output Till Now

JavaScript Code

Create a file script.js and paste the code below.

let startTime, endTime;
let imageSize = "";
let image = new Image();

let kboutput = document.getElementById("kbs");
let mboutput = document.getElementById("mbs");

let imageLink = "https://source.unsplash.com/random?topics=nature";

image.onload = async function () {
    endTime = new Date().getTime();

    await fetch(imageLink).then((response) => {
        imageSize = response.headers.get("content-length");
        calculateSpeed();
    });
};

function calculateSpeed() {
    let timeDuration = (endTime - startTime) / 1000;

    let loadedBits = imageSize * 8;
    let speedInBps = (loadedBits / timeDuration).toFixed(2);
    let speedInKbps = (speedInBps / 1024).toFixed(2);
    let speedInMbps = (speedInKbps / 1024).toFixed(2);

    kboutput.innerHTML = `<span style="font-weight: bold">${speedInKbps} </span>kbps`;
    mboutput.innerHTML = `<span style="font-weight: bold">${speedInMbps} </span>mbps`;
}

const init = async () => {
    startTime = new Date().getTime();
    image.src = imageLink;
};

window.onload = () => init();

Written by: Piyush Patil

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖