Network Speed Test using JavaScript Source Code Free Download

Submitted by oretnom23 on Friday, April 21, 2023 - 13:59.

Language

This is a simple project entitled Network Speed Test Application. It is a web-based application that detects the internet or network speed. This mini-project application was mainly developed using Pure JavaScript. It has a simple and pleasant user interface using Custom CSS (stylesheet) scripts. It is an easy-to-use network speed detection application.

How does this Network Speed Test Application work?

This Network Speed Test Application is a straightforward application that is detecting the internet or network speed as the primary purpose. The application calculates the network speed in Bits, Kilobits, and Megabits. The users can simply browse the application with their preferred web browser and click the Check Network Speed button to calculate the speed. This application only computes the download speed of the network or internet.

Features and Functionalities

This Network Speed Test Application is containing the following features and Functionalities:

Computes Download Speed in Bits
Computes Download Speed in Kilobits
Computes Download Speed in Megabits
Check Network Speed Button
Loader while computing the speed

Technologies

Here is the list of Technologies I used to develop this Network Speed Test Application:

VS Code Editor
HTML
CSS
JavaScript
Google Fonts

Snapshots

Here are some snapshots of this Network Speed Test Application:

Page Interface

Computing Download Speed

Network Speed Result

How to Compute Network Speed using Pure JavaScript?

JavaScript comes with multiple useful built-in methods, functions, APIs, and properties. Some of these become handy for computing the Network or Internet Download Speed. We can simply load an Image or GIF using JS and while loading the image, we can calculate the time difference between the start and end time of the process. Then, we can simply divide the image file size by the time difference and divide it by 8 to get the total Bits. Lastly, using the total bits computed we can simply divide it into 1024 to convert the value into Kilobits and divide it into another 1024 value to convert it into Megabits. Check out the script I provided below, the JS code below is the one I used for computing the Speed of the Network on this project.

// Loader slector
const loaderEl = document.getElementById('loader')
// button slector
const detectSpeedBtn = document.getElementById('detect-speed')
// bits text container slector
const bitsEl = document.getElementById('bits-speed')
// kbps text container slector
const kbpsEl = document.getElementById('kbps-speed')
// mbps text container slector
const mbpsEl = document.getElementById('mbps-speed')
 
// Source of an image to load to check the speed
let imageSrc = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/132C_trans.gif/230px-132C_trans.gif?time="+ (new Date().getTime());
 
detectSpeedBtn.addEventListener('click', e => {
    // prevent default
    e.preventDefault
    var bits = 0;
    var kbps = 0;
    var mbps = 0;
    var starTime = 0;
    var endTime = 0;
    detectSpeedBtn.disabled = true
    loaderEl.style.display = `flex`
 
    var img = new Image()
    img.crossOrigin = ''
    var imgSize = 0;
 
    starTime = new Date().getTime();
    img.src = imageSrc
 
    img.onload = async ()=>{
        endTime = new Date().getTime()
 
        // Wait for the image link response and get image size
        await fetch(imageSrc)
        .then(response => {
            imgSize = response.headers.get("content-length")
            console.log(imgSize)
            var timeDiff = (endTime - starTime) / 1000;
            var loadedImgSizeInBits = imgSize * 8;
            bits = (loadedImgSizeInBits / timeDiff)
            kbps = (bits / 1024)
            mbps = (kbps / 1024)
            return
        })
        .then( () =>{
            var tmpBits = 0;
            var tmpKb = 0;
            var tmpMb = 0;
            // Animating the network result
            function animate(){
                if(tmpBits < bits || tmpKb < kbps || tmpMb < mbps){
                    bitsEl.innerText = tmpBits.toLocaleString('en-US',{style:'decimal', maximumFractionDigits:2})
                    kbpsEl.innerText = tmpKb.toLocaleString('en-US',{style:'decimal', maximumFractionDigits:2})
                    mbpsEl.innerText = tmpMb.toLocaleString('en-US',{style:'decimal', maximumFractionDigits:2})
                    tmpBits = tmpBits + (bits  / 20);
                    tmpKb = tmpKb + (kbps  / 20);
                    tmpMb = tmpMb + (mbps  / 20);
                    setTimeout(animate, 30)
                }else{
                    bitsEl.innerText = bits.toLocaleString('en-US',{style:'decimal', maximumFractionDigits:2})
                    kbpsEl.innerText = kbps.toLocaleString('en-US',{style:'decimal', maximumFractionDigits:2})
                    mbpsEl.innerText = mbps.toLocaleString('en-US',{style:'decimal', maximumFractionDigits:2})
                    detectSpeedBtn.disabled = false
                    detectSpeedBtn.innerText = `Re-Check Network Speed`
                    loaderEl.style.display = `none`
                }
            }
            animate()
        })
    }
})

The Network Speed Test Application complete source code zip file is available on this website and it is free to download. Feel free to download and modify the source code the way you wanted to meet your own requirements. Please note that this project was mainly developed for educational purposes only.

How to Run?

Download the provided source code zip file. (download button is located below)
Extract the downloaded source code zip file.
Locate the index.html file in the extracted source code directory.
Browse the index file with your preferred browser.

DEMO VIDEO

That's it! I hope this Network Speed Test Application using JavaScript Source Code will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

1457 views