How To Detect The Internet Connection Status Is Online or Offline? - letsbug
Hey everyone in this video I am making a simple web page with a feature which is very handy for all of us the developers. We are making a programme that will detect if the device in which this page is open it will show a message to the user that if his/her device is connected to the internet or not.
It is fairly simple we have just created a title element and a h3 title tag as a container which will store the message. Main work is in JS where first we are setting a const variable con as the container where we will show message. And we set a 1 sec interval which calls a function checkStatus and this function does all of our work.
In checkStaus function we are just doing a simple if check that if navigator object whose property value depends on device has a property Online as true or false. We check that and if true we display message Online else Offline. That's all it has. And you want to know all the navigator objects property then you can visit here.
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>Network Status</title></head><body> <h1>Netwrok Status</h1> <h3 id="section"></h3> <script> const con = document.getElementById("section"); window.setInterval(checkStaus, 1000) function checkStaus(){ if(navigator.onLine){ con.innerHTML = "Online | Connected to Internet" }else{ con.innerHTML = "Offline | Please Connect to Internet" } } </script></body></html> |
| Output |
Comments
Post a Comment