Today, I will tell you how to check internet online or offline detection with lights using JS and CSS
Getting started
It’s pretty easy to get started with Statusfy.
Create a new index.html file with this HTML code..
<div class="main">
<div class="light">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
<h2 id="heading"></h2>
</div>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&display=swap');
* {
margin:0px;
padding:0px;
}
html,body{
min-height:100%;
width:100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
}
#heading{
width:100%;
text-align:center;
color:rgb(0, 0, 0);
}
.light {
display: flex;
justify-content: center;
}
.lightBody #heading:after{
content:"Try to DISCONNECT from Internet...";
}
.offline #heading:after{
content:"Ooops you are OFFLINE...";
}
.online #heading:after{
content:"Wow ! You are ONLINE again...";
}
.red{
background: red;
background-image: radial-gradient(brown, transparent);
color:red;
top: 2vh;
border: dotted .2vh red;
}
.yellow{
background: yellow;
background-image: radial-gradient(orange, transparent);
color:yellow;
border: dotted .2vh yellow;
top: 14.5vh;
}
.green{
background: green;
background-image: radial-gradient(lime, transparent);
color: green;
border: dotted .2vh lime;
top: 27vh;
}
.red, .yellow, .green{
background-size: .5vh .5vh;
width: 20vh;
height: 20vh;
border-radius: 50%;
box-shadow: 0 0 2.0vh #111 inset;
cursor:pointer;
font-weight:900;
font-size:2.2vh;
text-align:center;
line-height:10vh;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.lightBody .red, .lightBody .green,
.online .red, .online .yellow,
.offline .green, .offline .yellow
{
opacity:.1;
}
.lightBody .yellow,
.online .green,
.offline .red{
opacity:1;
}
body.lightBody{
background: rgba(255, 238, 0, 0.364);
}
body.offline{
background: #f80;
}
body.online{
background: #0f8;
}
Create script.js file with this Jaascript Code
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
function updateOnlineStatus(event) {
var condition = navigator.onLine ? "online" : "offline";
document.body.className = condition;
}
then,
connect the style.css and script.js file in index.html file
I hope you know how to add css and js file in html. Or follow tutorial video..
0 Comments