Check Internet Connection Javascript | Check Internet Connection Html Css Javascript

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.

HTML Code

Table of Contents

 <!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

   <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 javascriptHope 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. 

Written by – Code With Random/Anki 

Leave a Reply