Home
Script

AutoDetect Internet Connection Status in HTML CSS & JavaScript

AutoDetect Internet Connection Status in HTML CSS & JavaScript


AutoDetect Internet Connection Status

Hey friends, nowadays, during this weblog, you’ll learn how to make a Toast Notification to observe net affiliation standing victimization HTML CSS & JavaScript. Earlier I even have shared several blogs on JavaScript comes; however, therein project still, I haven’t shown you or teach you ways you'll be able to check the net affiliation standing in JavaScript.

In this program [Detect net Connection], there's a webpage with a stripped-down toast notification, and it changes its icon, color, text in step with the net affiliation standing as you'll be able to see within the preview image. It's a reasonably cool animation, meaning once your net standing is modified, it’ll show from the left high facet with a slippy animation.

The concepts/codes behind making this program are therefore easy. At first, victimization JavaScript Ajax I send a GET request to a specific passed address and check. That address is causation any information as a response or not. Therefore, the response standing of that request address can be two hundred and fewer than three hundred or not.

If the passed address is causation information as a response and therefore the response standing of that address is additionally capable two hundred then the user is connected to the net; therefore, they are obtaining information as a response; however, if it isn’t, then the user is disconnected from the net.

observing net affiliation standing

In the image, you've got seen the demo of this toast notification to observe net affiliation and, therefore, the codes behind making this program. I think you've got understood the fundamental codes and ideas behind making this program; however, if you’re a beginner, then you'll have difficulties understanding JavaScript codes as a result of I used Ajax in JavaScript; therefore, if you don’t understand it, then it’ll be a touch bit exhausting to grasp.

But if you recognize Ajax and still having issues perceiving codes, then you’ve to look at video 2 or a lot of times, so transfer code files from the given button and check out dynamical or analyzing the codes, then, positively you’ll understand.

Check net affiliation in JavaScript [Source Codes]

To create this program, [Check Offline/Online Status]. First, you would like to make 3 files, HTML File, CSS File, and JavaScript File. When making these files, simply paste the subsequent codes into your files.

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

<!DOCTYPE html>
<!-- Created By CodingNepal - www.Cyberchipe.blogspot.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Detect Internet Connection | Cyber Chipe</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>

Second, produce a CSS file with favor.css and paste the given codes in your CSS file. Remember, you’ve to form a file with a .css extension.

@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;
}

Last, produce a JavaScript file with script.js and paste the given codes into your JavaScript file. Remember, you’ve to form a file with a .js extension.

// Selecting all required elements
const wrapper = document.querySelector(".wrapper"),
toast = wrapper.querySelector(".toast"),
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(); //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
        ajax();
    }, 100);
}

That’s all. Currently, you've,e with success, created a Toast Notification to sight net association in hypertext markup language CSS & JavaScript. If your code doesn’t work or you’ve round-faced any error/problem, please contact me.

Post a Comment