Internet Connection Detect using Vanilla Javascript

Internet Connection Detect
Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Hello Js Lovers,

How are you doing? In this Internet Connection Detect tutorial, I will show you how to make an internet connection detector component from scratch. You may be noticed that on Facebook when the internet connection has been lost we can see a notification like the below picture.

Internet Connection Detect using Vanilla Javascript HTML and CSS

Internet Connection Detect
Internet Connection Detect

In this tutorial, I will share with you this project’s HTML, CSS, and JS code. So, Now create an HTML file on your desktop or wherever do you want. Then paste bellows code in HTML file

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Detect Internet Connection </title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
</head>
<body>
  <div class="wrapper">
    <div class="toast">
      <div class="content">
        <div class="icon"><i class="uil uil-wifi"></i></div>
        <div class="details">
          <span>You're online now</span>
          <p>Hurray! Internet is connected.</p>
        </div>
      </div>
      <div class="close-icon"><i class="uil uil-times"></i></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>
Read More: What is Object and Array Destructuring in JavaScript

Internet Connection Detect

You may notice that I have added a CDN which is for icons (iconscout) . Inside the head tag, I have also added a CSS file which name is style.css, and the bottom I have linked with a js file. Create a CSS file and Paste bellows CSS code.

style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  overflow: hidden;
  background: #f2f2f2;
}
.wrapper {
  position: absolute;
  top: 20px;
  left: 20px;
  animation: show_toast 1s ease forwards;
}
@keyframes show_toast {
  0% {
    transform: translateX(-100%);
  }
  40% {
    transform: translateX(10%);
  }
  80%,
  100% {
    transform: translateX(20px);
  }
}
.wrapper.hide {
  animation: hide_toast 1s ease forwards;
}
@keyframes hide_toast {
  0% {
    transform: translateX(20px);
  }
  40% {
    transform: translateX(10%);
  }
  80%,
  100% {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
  }
}
.wrapper .toast {
  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;
}
.wrapper .toast.offline {
  border-color: #ccc;
}
.toast .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.offline .content .icon {
  background: #ccc;
}
.content .details {
  margin-left: 15px;
}
.details span {
  font-size: 20px;
  font-weight: 500;
}
.details p {
  color: #878787;
}
.toast .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;
}

Well, Our design part has been done. Now time to make it dynamic using JS. Create a js file which name would be script.js then paste this bellows code.

Internet Connection Detect using Vanilla Javascript

script.js

const $ = (el) => document.querySelector(el)
const wrapper = $(".wrapper"),
toast = $(".toast"),
title = $("span"),
subTitle = $("p"),
wifiIcon = $(".icon"),
closeIcon = $(".close-icon");

globalThis.onload = ()=>{
    function ajaxCall(){
        let xhr = new XMLHttpRequest(); //creating new XML object
        xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true); //sending get request on this URL
        xhr.onload = ()=>{ //once ajax loaded
            //if ajax status is equal to 200 or less than 300 that mean user is getting data from that provided url
            //or his/her response status is 200 that means he/she is online
            if(xhr.status == 200 && xhr.status < 300){
                toast.classList.remove("offline");
                title.innerText = "You're online now";
                subTitle.innerText = "Hurray! Internet is connected.";
                wifiIcon.innerHTML = '<i class="uil uil-wifi"></i>';
                closeIcon.onclick = ()=>{ //hide toast notification on close icon click
                    wrapper.classList.add("hide");
                }
                setTimeout(()=>{ //hide the toast notification automatically after 5 seconds
                    wrapper.classList.add("hide");
                }, 5000);
            }else{
                offline(); //calling offline function if ajax status is not equal to 200 or not less that 300
            }
        }
        xhr.onerror = ()=>{
            offline(); //calling offline function if the passed url is not correct or returning 404 or other error
        }
        xhr.send(); //sending get request to the passed url
    }

    function offline(){ //function for offline
        wrapper.classList.remove("hide");
        toast.classList.add("offline");
        title.innerText = "You're offline now";
        subTitle.innerText = "Opps! Internet is disconnected.";
        wifiIcon.innerHTML = '<i class="uil uil-wifi-slash"></i>';
    }

    setInterval(()=>{ //this setInterval function call ajax frequently after 100ms
        ajaxCall();
    }, 100);
}

In this JS file, I am using an AJAX request for checking our conditions. If the internet connection is connecting then our condition is succeeded then we can see a notification that we are online, on the other hand, if we lost net connection then can see the offline notification. Finally, I have used a setInterval function so that it can call this setInterval function call ajax frequently after 100ms.

Well, Our all part have done. Now you can hit the index.html file in your favorite browser and finally, you can see the output like the top image.

Read More : To Do List Project using Vanilla Javascript


Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  

About Anisur Rahman Shahin

Hello. My name is Shahin. I'm a tech enthusiast guy. Personally, I’m Optimistic and always in hurry kinda person. I'm a freelance web developer. I am working at Zakir Soft as Laravel Developer. My Portfolio website: https://devshahin.com/

View all posts by Anisur Rahman Shahin →

Leave a Reply

Your email address will not be published. Required fields are marked *