Check Internet Connection Javascript | Check Internet Connection Html Css Javascript
Welcome🎉 to Code With Random blog. In this blog, we learn how we create Check Internet Connection Javascript. We use HTML, Css, and javascript for this Check Internet Connection Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Check Internet Connection Javascript.
<!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>internet Off or On</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="random"> Lets Try To internet Off or On</p>
</body>
</html>
There is all the HTML code for the Check Internet Connection Javascript. Now, you can see an output with Check Internet Connection Javascript then we write javascript for Check Internet Connection Javascript.
output
CSS code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
}
.live-box{
margin: 3rem;
width: 50px;
height: 50px;
text-align: center;
background-color: red;
border-radius: 50%;
font: 3rem sans-serif;
}
.off-box{
margin: 3rem;
width: 50px;
height: 50px;
text-align: center;
background-color: green;
border-radius: 50%;
font: 3rem sans-serif;
}
p#random{
margin: 4rem;
font: 3rem sans-serif;
}
Css Updated output
Javascript code
<script>
let random = document.getElementById("random");
if(navigator.onLine){
random.textContent = "We Are Online !";
random.style.color = "green";
}
window.addEventListener("online",function(){
random.textContent = "We Are Online !";
random.style.color = "green";
});
window.addEventListener("offline",function(){
random.textContent = "We Are Offine !";
random.style.color = "red";
vibratePattern();
});
</script>
Final output
Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like the Check Internet Connection Javascript you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
In this post, we learn how to create Check Internet Connection Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
