HTML
<!DOCTYPE html>
<html>
<head>
<title>Internet Speed Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Internet Speed Test</h1>
<button id="start-button">Start Test</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
<style>
.container {
text-align: center;
padding: 20px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 18px;
}
#result {
font-size: 18px;
margin-top: 20px;
}
</style>
Js
<script>
window.addEventListener('load', () => {
const startButton = document.getElementById('start-button');
const resultDiv = document.getElementById('result');
startButton.addEventListener('click', () => {
resultDiv.innerHTML = 'Testing...';
// Simulate network speed test
setTimeout(() => {
const downloadSpeed = Math.floor(Math.random() * 100) + 1;
const uploadSpeed = Math.floor(Math.random() * 100) + 1;
resultDiv.innerHTML = `Download Speed: ${downloadSpeed} Mbps<br>Upload Speed: ${uploadSpeed} Mbps`;
}, 3000); // Simulate test for 3 seconds
});
});
</script>
Also Read this Posts
- Screen Recorder HTML,CSS and JS || Blog,Website
- How to Customize Audio Player HTML Css in Blogger
- How to Add Target Tooltip with Title HTML and Css in Blogger
- Animated Gradient Color Background HTML and Css
- Hide Sidebar in Blogger || Css || Blog
- Top 5 Free Fire Bundles 3D Model in Free
- Motu,Patlu, Dr. Jhatka and Ghasitaram 3d Model
- Countdown Clock HTML CSS and JS
- Internet Detector || Css,HTML,JS || Script for Your Website
- Search by Your Voice HTML CSS and JS || SearchBar || for Blogger
- Animated Links Hover Effect HTML,Css
Contact Us!
0 Comments
type your comment...