Internet Speed Test Display

INFORMATION & CODE

Internet Speed Test Display

What the Code Does

This code creates a simple Internet Speed Tester with a retro-style interface. The HTML provides the basic structure: a title, a display area for the speed result, a loading animation, and a button labelled "TEST YOUR INTERNET SPEED." It also loads the external CSS stylesheet, Google Fonts, Font Awesome icons, and the JavaScript file that controls the test.

How the Code Works

The CSS controls the appearance of the tester. It creates the green gradient outer container, black testing panel, large title, green circular spinning loader, and green button. The @keyframes spin animation makes the loader rotate while the speed test is running. The .result class enlarges the final speed display, while the .btn:hover rule changes the button colour when the mouse is over it.

When the user clicks the test button, the JavaScript downloads an image from Wikimedia. The time_start variable records the exact time the download begins, and when the image finishes loading, time_end records the finishing time. The script then calculates how many seconds the download took and uses the known image size (downloadSize) to estimate the download speed in Mbps.

The script temporarily hides the button and displays the spinning loader while the result is being processed. It then uses the animate() function to display the calculated speed progressively, creating the appearance of the speedometer counting upward. Once the animation reaches the final value, the loader disappears, the button returns, and the result is displayed with a speedometer icon and the Mbps unit.

How to Use the Code

To use it, save the HTML as something such as index.html, the CSS as styles.css, and the JavaScript as scripts.js in the same folder. Open index.html in a web browser and click TEST YOUR INTERNET SPEED. After the image has downloaded, the estimated internet download speed will be displayed. Clicking CHECK AGAIN repeats the test.

One important point is that this is an approximation rather than a professional internet-speed test. It measures the time required to download one particular image from Wikimedia, so the result can be affected by the image server, network conditions, browser caching, and the user's connection to that server.

HTML


                <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internet Speed Tester</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <div class="widget-container">
      <div class="loader-widget">
        <h2 class="title">Test Your Internet Speed</h2>
        <div class="loader-content ">
          <div class="content"><small></small></div>
        </div>
        <div class="loader" style="display:none;"></div>
        <button class="btn">TEST YOUR INTERNET SPEED</button>
      </div>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                     
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
                  
.widget-container {
    width: 560px;
    padding: 30px;
    background: linear-gradient(135deg, #3f7158, #436554);
    border-radius: 20px;
    text-align: center;
}

.title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.loader-widget {
    width: 500px;
    padding: 50px;
    background-color: rgba(0, 0, 0, 1);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.loader {
    width: 200px;
    height: 200px;
    border: 10px solid transparent;
    border-top-color: #00ff00;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    margin: 0 auto;
    margin-bottom: 1.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.result {
    color: #ffffff;
    font-size: 3rem;
    margin: 10px 10px 30px 10px;
}

.fa-tachometer-alt {
  color: #fff;
}

.btn {
    background-color: #00cc00;
    color: #ecf0f1;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #00aa00;
}

JAVASCRIPT


                document.querySelector('button').addEventListener('click', (e) => {
  var imageLink = 'https://upload.wikimedia.org/wikipedia/commons/3/3e/Tokyo_Sky_Tree_2012.JPG',
      downloadSize = 8185374,
      time_start, time_end,
      downloadSrc = new Image();
        
  time_start = new Date().getTime();
  var cacheImg = "?nn=" + time_start;
  downloadSrc.src = imageLink + cacheImg;
  downloadSrc.onload = function () {
    time_end = new Date().getTime();
    var timeDuration = (time_end - time_start) / 1000;
    loadedBytes = downloadSize * 8,
    totalSpeed = ((loadedBytes / timeDuration) / 1024 / 1024).toFixed(2);
    let i = 0, speedOut;
    document.querySelector('.loader').style.display= '';
    document.querySelector('.btn').style.display= 'none';
    const animate = () => {
      if (i < totalSpeed) {
        document.querySelector('.content').innerHTML = i.toFixed(2) + '<small>Mbps</small>';
        setTimeout(animate, 20);
        i += 1.02;
      }else{
        document.querySelector('.content').innerHTML = '<i class="fas fa-tachometer-alt"></i> ' + totalSpeed + '<small>Mbps</small>';
        document.querySelector('.loader').style.display= 'none';
        document.querySelector('.btn').style.display= '';
      }
    }
    animate();
      
    document.querySelector('.title').innerHTML = 'Your Internet Speed Is:'
    document.querySelector('.content').innerHTML = '<i class="fas fa-tachometer-alt"></i> ' + totalSpeed + '<small>Mbps</small>';
    document.querySelector('.loader-content').classList.add('result');
    e.target.innerText = 'CHECK AGAIN';
  }
})

MENU

INFORMATION & CODE