Toast Notification to Detect Internet Connection in HTML CSS & JavaScript
Hey friends, today in this blog you’ll learn how to create a Toast Notification to Detect Internet Connection Status using HTML CSS & JavaScript. Earlier I have shared many blogs on JavaScript projects but in that project still I haven’t shown you or teach you how you can check the internet connection status in JavaScript.
In this program [Toast Notification to Detect Internet Connection], there is a webpage with a minimal toast notification and it changes its icon, color, text according to the internet connection status as you can see in the preview image. It has a pretty animation that means when your internet status changed then it’ll show from the left top side with a sliding animation.
The concepts/codes behind creating this program are so simple. At first, using JavaScript Ajax I send a GET request to a particular passed URL and check, that URL is sending any data as a response or not and the response status of that request URL is equal to 200 and less than 300 or not. If the passed URL is sending data as a response and the response status of that URL is also equal to 200 then the user is connected to the Internet so he/she is getting data as a response but if it isn’t then the user is disconnected from the Internet.
Video Tutorial of Detect Internet Connection Status
In the video, you have seen the demo of this toast notification and the codes behind creating this program or detect internet connection status. I believe you have understood the basic codes and concepts behind creating this program but if you’re a beginner then you may have difficulties understanding JavaScript codes because I used ajax in JavaScript so if you don’t know about it then it’ll be a little bit hard to understand.
But if you know ajax and still having problems understanding codes then you’ve to watch the video two or more times and then download code files from the given button and try changing or analyzing the codes then definitely you’ll understand.
You might like this:
- Todo List App with Local Storage
- Realtime Chat Web Application in PHP
- Responsive Image Lightbox in JavaScript
- Drag & Drop or Browse File Upload Button
Check Offline/Online Status in JavaScript [Source Codes]
To create this program [Check Offline/Online Status]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files from this given link. Click here to download code files.
Originally published at https://www.codingnepalweb.com on March 3, 2021.
