SpeedTest Checker Tool with colorful styling and all its features use any free library

 

Speed Test Checker

Results:

* { box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #e3f2fd; color: #333; margin: 0; padding: 20px; } .container { max-width: 600px; margin: 0 auto; padding: 20px; border-radius: 8px; background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #2196f3; } button { display: block; width: 100%; padding: 10px; background-color: #2196f3; color: white; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 20px; } button:hover { background-color: #1976d2; } .output { margin-top: 20px; } p { font-size: 1.2em; color: #2196f3; } #status { text-align: center; margin-top: 10px; font-weight: bold; } document.getElementById('start-btn').addEventListener('click', function() { const downloadSpeedDisplay = document.getElementById('download-speed'); const uploadSpeedDisplay = document.getElementById('upload-speed'); const pingDisplay = document.getElementById('ping'); const statusDisplay = document.getElementById('status'); statusDisplay.innerText = "Testing your speed..."; const speedTest = new SpeedTest(); speedTest.getBestServer().then(server => { return speedTest.downloadSpeed(); }).then(downloadSpeed => { downloadSpeedDisplay.innerText = `Download Speed: ${(downloadSpeed / 1e6).toFixed(2)} Mbps`; return speedTest.uploadSpeed(); }).then(uploadSpeed => { uploadSpeedDisplay.innerText = `Upload Speed: ${(uploadSpeed / 1e6).toFixed(2)} Mbps`; return speedTest.getPing(); }).then(ping => { pingDisplay.innerText = `Ping: ${ping} ms`; statusDisplay.innerText = "Speed Test Completed!"; }).catch(err => { console.error(err); statusDisplay.innerText = "Error during speed test."; }); });