Hello, guys hope you all are well. Today, we are going to learn Check Internet Connection Status With HTML,CSS & JavaScript.
We use the navigator.onLine property. This property returns a boolean value. If the browser is connected to the internet it returns true or else it returns false.
Check Internet Connection Status With HTML,CSS & JavaScript | Video
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>Check Network Status using JavaScript | Grapdroad</title>
<!-- custom CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Font Awesome cdn -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="icon">
</div>
<div class="details">
<span> </span>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(190,190,180);
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
padding: 20px 10px 20px 20px;
border-radius: 10px;
width: 18em;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 0 10px rgb(29,243,29);
border: .1em solid rgb(29,243,29);
}
.wrapper .content{
display: flex;
align-items: center;
}
.wrapper .content .icon{
font-size: 1.8em;
background-color: rgb(29,243,29);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
color: #fff;
}
.wrapper .content .details{
margin-left: 2em;
}
.wrapper .content .details span{
font-size: 1.2em;
font-weight: 500;
letter-spacing: 2px;
}
JavaScript
const wrapper =document.querySelector(".wrapper"),
content = wrapper.querySelector(".content"),
online_icon = wrapper.querySelector(".icon"),
title = wrapper.querySelector("span");
function contentOnline()
{
title.innerText = "You are Online";
online_icon.innerHTML = '';
online_icon.style = "background-color: rgb(29,243,29); "
wrapper.style = "box-shadow: 0 0 10px rgb(29,243,29); border: .1em solid rgb(29,243,29);"
};
function contentOffline()
{
title.innerText = "You are Offline";
online_icon.innerHTML = '';
online_icon.style = "background-color: rgb(243,72,29); "
wrapper.style = "box-shadow: 0 0 10px rgb(243,72,29); border: .1em solid rgb(243,72,29);"
};
if(window.navigator.onLine)
{
contentOnline();
}
else
{
contentOffline();
}
window.addEventListener("online", contentOnline);
window.addEventListener("offline", contentOffline);
