This tutorial contains to check your inernet connectivity. If you are online, then you can see here the text "Online" with green color. Then turn off your internet connection. You will see the "Online" text converted in "Offline" with red color.
Demo
You are
Let's Start Coding
Step 1 : Add HTML
HTML
<!DOCTYPE html>
<html>
<head>
<body>
</html>
<html>
<head>
<title> Online Connectivity Check </title>
</head> <body>
<div id="checkConnectivity">
</body>
<div class="text"> You are
<span id="result">
</span>
</div>
</div>
</html>
Step 2 : Add CSS
CSS
body {
#checkConnectivity {
#checkConnectivity .text {
background : #333;
font-family : tahoma;
} font-family : tahoma;
#checkConnectivity {
position : relative;
width : 100%;
height : 100vh;
} width : 100%;
height : 100vh;
#checkConnectivity .text {
color : #fff;
font-family : tahoma;
font-size : 20px;
position : absolute;
top : 50%;
transform : translateY(-50%);
width : 100%;
text-align : center;
}
font-family : tahoma;
font-size : 20px;
position : absolute;
top : 50%;
transform : translateY(-50%);
width : 100%;
text-align : center;
Step 3 : Add JavaScript
JavaScript
let result = document.querySelector("#result");
window.addEventListener("online", showResult);
window.addEventListener("offline", showResult);
function showResult(){
showResult();
window.addEventListener("online", showResult);
window.addEventListener("offline", showResult);
function showResult(){
if(navigator.onLine){
}
result.innerHTML = "Online";
result.style.color = "lightgreen";
} else{
result.style.color = "lightgreen";
result.innerHTML = "Offline";
result.style.color = "red";
}
result.style.color = "red";
showResult();
Browse my all Front End Designs to learn and use on your project to make it more functional.