How to create an Internet status viewer using JavaScript?
Flurabula
Posted on February 27, 2023
In this tutorial, we are sharing the source code a simple internet status viewer using HTML, CSS and JavaScript. This tool will looks like:
As you can see from the image above, the connection status will be visible. If
the network is off then the connection status will be “no connection” in red
colour ( look the second image).
I have used font-awesome to display the wifi icon. Also I am connected the
project with font-awesome using URL.
I have used font-awesome to display the wifi icon. Also I am connected the
project with font-awesome using URL.
Files and folder
For this project you want to create a folder containing the files called
index.html and style.css. I am added the javascript with the html file.
Index.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>connection test</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body ononline="myfunction()">
<div class="network">
<i class="fa fa-wifi"></i>
<h3 id="message">No connection</h3>
</div>
</body>
<script>
let message = document.getElementById("message");
let wifi = document.querySelector(".fa-wifi");
let messageOnline = () => {
message.textContent = "Connected";
message.style.cssText = "color: #689f38";
wifi.style.cssText = "color: white; background-color:#689f38;";
};
let messageOffline = () => {
message.textContent = "No Connection";
message.style.cssText = "color: #d32f2f";
wifi.style.cssText = "color: red; background-color:white;";
};
if (window.navigator.onLine) {
messageOnline();
} else {
messageOffline();
}
window.addEventListener("online", messageOnline);
window.addEventListener("offline", messageOffline);
</script>
</html>
style.css
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.network{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.network i{
padding: 30px;
font-size: 35px;
background-color: rgb(245, 244, 244);
border-radius: 50%;
transition: 2s;
border: 2px solid;
}
.network h3{
padding-left: 15px;
color: brown;
font-size: 25px;
}
Read more:
simple contact form using HTML CSS and JavaScript
Rich text editor using HTML CSS and JavaScript
Download the Youtube video thumbnail using JavaScript
Posted on February 27, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
