Check Internet Connection Javascript | Check Internet Connection Html Css Javascript

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

 <!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
Check Internet Connection Javascript | Check Internet Connection Html Css Javascript

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

Check Internet Connection Javascript | Check Internet Connection Html Css Javascript

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
Check Internet Connection Javascript | Check Internet Connection Html Css Javascript


Check Internet Connection Javascript | Check Internet Connection Html Css Javascript
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 

Post a Comment

Previous Post Next Post