In this program [Check Internet Connection Status] we have a webpage with an awesome toast notification and it changes its icon, color and, text according to your internet connection status as you can see in the preview image above. It has a cool animation effect which means when your internet connection status changes it comes from the top-right side with a sliding animation.
You may like these:-
The concepts/codes behind creating this program are so simple. In javascript, we have a concept of Window Navigator Object This navigator object contains information about the browser. This navigator object can be accessed with Window.navigator OR navigator only. In this object, we get an online parameter that returns the true or false value which means if the return value is true So the user has internet access else the user doesn't have internet access.
In this program [Check Internet Connection Status] we are using window.addEventListener to detect the internet connection status. If you're unable to understand what am I trying to say So you can check the source code and preview as well.
Check Internet Connection Status using HTML, CSS, and Javascript [Source Code]
Initially, you won't see anything in the result section. If you wanna test this program. Just turn off your device's internet connection then a toast will appear for a few seconds with a message based on your connection.
I hope you liked it. If you want to create this. You'll have to create three files HTML, CSS, and Javascript with the extension for example:- For HTML - .HTML and for CSS - .css and for Javascript - .js and just paste the given code in the files and don't forget to link the CSS and Javascript files to HTML file.
Hurray! now you've created an Internet Connection Status checker. You can download files by clicking on the download button after downloading the file if you are facing any kind of problem feel free to ask me in the comment section and you can also contact me via e-mail. Thanks for giving your precious time for reading this blog. Here is the download button:-