 |
| Internet speed check using javascript |
In this article, we given a Internet speed check using javascript with source code as a project. Try this project in your vs code to check how it works. We created Internet speed checker using html, css and javascript. This tool will help you to check the net speed using javascript. Let's go and check the source code.
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Speed-test.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Internet speed check using javascript source code
Here we given a html, css and js source code of net speed test checker as given -
HTML
In HTML, we've created a basic structure and added a heading of internet speed checker. Linked a CSS file and Javascript file for design and functionality. Used a classes and id as a selector to select the element. Added a button to check the speed with progress bar to check the speed in mbps. Copy the given html code and paste it into the index.html file in VSCode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Net Speed Checker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Internet Speed Checker</h1>
<div class="speed-test">
<button id="start-btn">Start Test</button>
<div class="progress-container">
<div id="speed-progress" class="progress"></div>
</div>
<div id="speed-result" class="result"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
In CSS, we created a design and added a properties to position the internet speed checker. Added a position bar to show the progress of net speed test. Copy the given css code and paste it into the style.css file in VSCode.
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 90%;
}
h1 {
color: #333;
}
.speed-test {
margin-top: 20px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
outline: none;
}
.progress-container {
height: 10px;
background-color: #ddd;
margin-top: 10px;
border-radius: 5px;
overflow: hidden;
}
.progress {
height: 100%;
background-color: #007bff;
width: 0%;
transition: width 0.3s ease;
}
.result {
margin-top: 10px;
font-size: 18px;
}Javascript
In javascript, added a functionality to measure the net speed. When test button is clicked, then it will process to measure the net speed and it will show the speed in Mbps. Copy the given code of javascript and paste it into the script.js file in VSCode.
document.getElementById('start-btn').addEventListener('click', function() {
const startTime = performance.now();
const downloadSize = 1024 * 1024 * 10;
const chunkSize = 1024 * 1024;
let loadedBytes = 0;
const simulateDownload = async () => {
while (loadedBytes < downloadSize) {
loadedBytes += chunkSize;
updateProgress();
const delay = Math.random() * 200 + 100;
await sleep(delay);
}
const endTime = performance.now();
const duration = (endTime - startTime) / 1000;
const bitsLoaded = loadedBytes * 8;
const speedBps = bitsLoaded / duration;
const speedMbps = (speedBps / 1024 / 1024).toFixed(2);
document.getElementById('speed-result').innerHTML = `Your internet speed is: ${speedMbps} Mbps`;
document.getElementById('speed-progress').style.width = '100%';
};
simulateDownload();
function updateProgress() {
const progress = (loadedBytes / downloadSize) * 100;
document.getElementById('speed-progress').style.width = progress + '%';
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
});
Output
Check this output of Internet speed checker -
Also see this -
Internet speed checker is the unique project which helps to test the net speed in few seconds using the code. We used html, css and javascript to make it better and responsive with design. Use this code properly and see the output. Also, you can add this into your project list to create and make it more better as you want.
Hope this helps you to knwo about Internet speed checker using javascript with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects