How To Detect Internet Connection Using Toast Notification In JavaScript?

The question is that how to check or detect Internet Connection while the user is browsing your website using HTML CSS & JavaScript. In this tutorial, we will use Toast Notification to detect internet connection with HTML, CSS, and JavaScript. Here, We have shown you or taught you how you can check the detect internet connection status using JavaScript.

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. There are many code snippets available online or on many other blogs and websites but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1. Light Weight.
2. Pure Vanilla JavaScript.
3. Cross Browser.
4. No External Files.
5. Fully Customizable.
6. Toast Style Popup.
7. JSON Style Hit To Check.

How To Detect Internet Connection Status Using JavaScript On Web?

There are a few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.

CSS:

<style>
.main_wrapper{
position: absolute;
right: 40px;
bottom: 20px;
animation: toast_animation 2s ease forwards;
}
@keyframes toast_animation {
0% {
transform: translateX(100%);
}
40% {
transform: translateX(-10%);
}
80%, 100%{
transform: translateX(20px);
}
}
.main_wrapper.hide {
animation: hide_toast_animation 1s ease forwards;
}

@keyframes hide_toast_animation {
0% {
transform: translateX(20px);
}
40% {
transform: translateX(-10%);
}
80%, 100% {
opacity: 0;
pointer-events: none;
transform: translateX(100%);
}
}
.main_wrapper .toast_cls{
background: #fff;
padding: 20px 15px 20px 20px;
border-radius: 10px;
border-left: 5px solid #2ecc71;
box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.15);
width: 430px;
display: flex;
align-items: center;
justify-content: space-between;
}
.main_wrapper .toast_cls.offline{
border-color: #ccc;
}
.toast_cls .content{
display: flex;
align-items: center;
}
.content .icon{
font-size: 25px;
color: #fff;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
background: #2ecc71;
}
.toast_cls.offline .content .icon{
background: #ccc;
}
.content .details{
margin-left: 15px;
}
.details span{
font-size: 20px;
font-weight: 500;
}
.details p{
color: #878787;
}
.toast_cls .close-icon{
color: #878787;
font-size: 23px;
cursor: pointer;
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
border-radius: 50%;
background: #f2f2f2;
transition: all 0.3s ease;
}
.close-icon:hover{
background: #efefef;
}
</style>

HTML:

<div class="main_wrapper">
<div class="toast_cls">
<div class="content">
<div class="icon"><i class="fa fa-wifi" aria-hidden="true"></i></div>
<div class="details">
<span>You're online</span>
<p>Internet is connected.</p>
</div>
</div>
<div class="close-icon"><i class="fa fa-times"></i></div>
</div>
</div>

JavaScript:

<script>
const wrapper = document.querySelector(".main_wrapper"),
toast = wrapper.querySelector(".toast_cls"),
title = toast.querySelector("span"),
subTitle = toast.querySelector("p"),
wifiIcon = toast.querySelector(".icon"),
closeIcon = toast.querySelector(".close-icon");
window.onload = ()=>{

function ajax(){
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://reqres.in/api/users", true);
xhr.onload = ()=>{
if(xhr.status == 200 && xhr.status < 300){
toast.classList.remove("offline");
title.innerText = "You're online";
subTitle.innerText = "Internet is connected.";
wifiIcon.innerHTML = '<i class="fa fa-wifi"></i>';
closeIcon.onclick = ()=>{
wrapper.classList.add("hide");
}
setTimeout(()=>{
wrapper.classList.add("hide");
}, 5000);
}else{
offline();
}
}
xhr.onerror = ()=>{
offline();
}
xhr.send();
}

function offline() {
wrapper.classList.remove("hide");
toast.classList.add("offline");
title.innerText = "You're offline";
subTitle.innerText = "Sorry! Internet is disconnected.";
wifiIcon.innerHTML = '<i class="fa fa-times"></i>';
}

// this setInterval function call ajax after every 20000ms
setInterval(()=>{
ajax();
}, 2000);
}
</script>

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need.

Troubleshooting the Errors:

Do it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us or If you have any doubts and problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy development, See you in the next article.