internet speed checker

To style the form and the page, we have used some CSS. Bootstrap classes are utilized for responsive styling and a clean layout.

The JavaScript code uses the speedtest-net library to perform the speed test. It creates a new Speedtest object and sets up event listeners for the onupdate, onerror, and onend events. The onupdate event handler updates the result values, the onerror event handler displays an error message, and the onend event handler shows the result card.

Remember to save the code in an HTML file and open it in a web browser to see the SpeedTest Checker Tool in actions

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>SpeedTest Checker</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

  <style>

    body {

      background-color: #f8f9fa;

      padding-top: 5rem;

    }

    

    .container {

      max-width: 600px;

    }

    

    .speedtest-form {

      background-color: #ffffff;

      padding: 2rem;

      border-radius: 0.5rem;

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    }

    

    .result-card {

      background-color: #ffffff;

      padding: 2rem;

      border-radius: 0.5rem;

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

      margin-top: 2rem;

    }

    

    .error-message {

      color: #dc3545;

    }

  </style>

</head>

<body>

  <div class="container">

    <div class="speedtest-form">

      <h1>SpeedTest Checker</h1>

      <button class="btn btn-primary" onclick="runSpeedTest()">Run SpeedTest</button>

      <div class="result-card d-none" id="result-card">

        <h2>Results</h2>

        <div class="mb-3">

          <label for="download-speed">Download Speed (Mbps)</label>

          <p id="download-speed"></p>

        </div>

        <div class="mb-3">

          <label for="upload-speed">Upload Speed (Mbps)</label>

          <p id="upload-speed"></p>

        </div>

        <div class="mb-3">

          <label for="ping">Ping (ms)</label>

          <p id="ping"></p>

        </div>

      </div>

      <div class="error-message mt-4" id="error-message"></div>

    </div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/speedtest-net/1.1.4/speedtest.min.js"></script>

  <script>

    function runSpeedTest() {

      const resultCard = document.getElementById('result-card');

      const downloadSpeed = document.getElementById('download-speed');

      const uploadSpeed = document.getElementById('upload-speed');

      const ping = document.getElementById('ping');

      const errorMessage = document.getElementById('error-message');

      resultCard.classList.add('d-none');

      errorMessage.textContent = '';

      const speedTest = new Speedtest();

      speedTest.onupdate = ({ download, upload, ping: latency }) => {

        downloadSpeed.textContent = download.toFixed(2);

        uploadSpeed.textContent = upload.toFixed(2);

        ping.textContent = latency.toFixed(0);

      };

      speedTest.onerror = err => {

        errorMessage.textContent = 'Failed to run SpeedTest.';

      };

      speedTest.onend = () => {

        resultCard.classList.remove('d-none');

      };

      speedTest.start();

    }

  </script>

</body>

</html>