Toast Notification to Detect Internet Connection in HTML CSS & JavaScript

3
Toast Notification to Detect Internet Connection in HTML CSS & JavaScriptHey 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 [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 cool animation that means when your internet status changed, 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 to detect internet connection and the codes behind creating this program. 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:

Check Internet Connection 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 of this program from the given download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.


Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

That’s all, now you’ve successfully created a Toast Notification to Detect Internet Connection in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded and you’ve extracted it.
 

 

Previous articleText Typing Animation using only HTML & CSS
Next articleLimit Input Characters using HTML CSS & JavaScript
CodingNepal is a blog where we post blogs related to HTML, CSS, JavaScript & PHP along with creative coding stuff.

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here