Internet Connectivity checker
Hello Guys! In this blog, I'm going to explain to you how to make an internet connectivity checker using javascript. You can use this project to any realtime web application to check if the user is online or not. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.
Let's cover the HTML part
Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in head tag.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">Now let's design the container in our <body> tag. In the below HTML code, we have created a container that contains a div for status (message). Next, we have the button with the onclick listener attribute, to check connectivity status by clicking on the button.
<div class="container">
<div> class="status" id="status">
Click button to check status
</div>
<button> onclick="checkConnectivityStatus()">Check Status</button>
</div>
Here is the Final HTML Code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Internet Connectivity Detector using JavaScript - @code.scientist x @codingtorque</title>
</head>
<body>
<div class="container">
<div> class="status" id="status">
Click button to check status
</div>
<button> onclick="checkConnectivityStatus()">Check Status</button>
</div>
</body>
</html>Output Till Now
Let's understand CSS Part
In the below CSS code,
- We declare a * selectors to set the font Poppins that we have imported in our head tag.
- Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.
- Next for the container we have background property, border-radius property for curve edges, padding, and flex properties to align items to the center.
- Next for the status, we have padding, and background which will change according to connectivity status, and flex properties.
* {
font-family: 'Poppins', sans-serif;
}
body {
background-color: #111827;
color: white;
display: flex;
align-items: center;
justify-content: center;
padding-top: 15rem;
}
.container {
background: white;
border-radius: 10px;
padding: 3rem 6rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.status {
padding: 10px 40px;
background: lawngreen;
display: flex;
justify-content: center;
align-items: center;
}
button {
margin-top: 15px;
}
Output Till Now
Finally a JavaScript Part
In the below javascript code, we have the checkConnectivityStatus() function which checks whether the user is online or offline.
In checkConnectivityStatus() function, we have declared constant variable status that contains the status div element. Next, we have the if-else conditional statement that checks connectivity status using navigation api. navigator.online returns the boolean value, if it returns true then we set the background of our status div to lawngreen and set the inner text 'Online', and If it returns the false then it executes the else statement where we set the background red and innertext 'Offline'.
function checkConnectivityStatus() {
// Getting status div
const status = document.getElementById("status");
if (navigator.onLine) {
status.style.background = 'lawngreen';
status.innerText = 'Online!';
} else {
status.style.background = 'red';
status.innerText = 'Offline';
}
}