Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to detect internet speed. To do this we need Javascript.
If you are interested to learn through tutorials you can check out this playlist here. This playlist consists of about 100 + JavaScript projects that will help you learn JavaScript. The playlist consists of projects whose difficulty varies from easy to quite complex.
Video Tutorial:
If you are interested to learn through a video tutorial instead of reading this blog post you can check out the video down below also subscribe to my YouTube channel where I was new tips tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. We create the project folder called – ‘Detect Internet Speed’.Inside this folder we have three files index.html, style.css and script.js.
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Detect Internet Speed</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<p id="bits"><span>Speed In Bits:</span></p>
<p id="kbs"><span>Speed In Kbs:</span></p>
<p id="mbs"><span>Speed In Mbs:</span></p>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
You can discard the CSS code as I have used it only to make the output more presentable.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(#f4edff 50%, #cd8aff 50%);
}
.container {
width: 350px;
background-color: #ffffff;
padding: 4em 2em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.5em;
font-family: "Poppins", sans-serif;
font-size: 1.2em;
line-height: 2.2em;
box-shadow: 0 1.6em 2.4em rgb(40, 4, 67, 0.3);
}
p {
font-size: 400;
color: #747497;
letter-spacing: 0.02em;
}
span {
font-weight: 500;
color: #090931;
}
Javascript:
Next, we implement the logic.
To do this we need Javascript.
We implement functionality to detect internet speed using Javascript. We do this in the following steps:
- Create initial references
- Create a variable to store links to random images from the Unsplash API.
- A Function when the image loads.
- Get image size
- Calculate the speed.
We calculate the speed using the time taken for the image to load. This time is calculated by subtracting the end time from the minus start time. To convert this time into seconds we divide it by a thousand.
6. Create an initial function that calculates the start time. It also assigns an image source a random image from the Unsplash API.
7. On Window load call the init()
//API link for random images: https://source.unsplash.com/random?topics=nature
let startTime, endTime;
let imageSize = "";
let image = new Image();
let bitOutput = document.getElementById("bits");
let kboutput = document.getElementById("kbs");
let mboutput = document.getElementById("mbs");
//Gets random image from unsplash.com
let imageLink = "https://source.unsplash.com/random?topics=nature";
//When image loads
image.onload = async function () {
endTime = new Date().getTime();
//Get image size
await fetch(imageLink).then((response) => {
imageSize = response.headers.get("content-length");
calculateSpeed();
});
};
//Function to calculate speed
function calculateSpeed() {
//Time taken in seconds
let timeDuration = (endTime - startTime) / 1000;
//total bots
let loadedBits = imageSize * 8;
let speedInBps = (loadedBits / timeDuration).toFixed(2);
let speedInKbps = (speedInBps / 1024).toFixed(2);
let speedInMbps = (speedInKbps / 1024).toFixed(2);
bitOutput.innerHTML += `${speedInBps}`;
kboutput.innerHTML += `${speedInKbps}`;
mboutput.innerHTML += `${speedInMbps}`;
}
//Initial
const init = async () => {
startTime = new Date().getTime();
image.src = imageLink;
};
window.onload = () => init();
That’s it for this tutorial.
If you face any issues while creating this code you can download the source code by clicking on the download button below. Also if you have any queries suggestions or feedback you can comment then below
Happy Coding!
thank you for all these amazing projects with source codes and descriptions.
code is not working