Internet Connection Detector With
Toast Notification
Video Tutorial of Internet Connection Detector With Toast Notification
Internet Connection Detector With Toast Notification[Source Codes]
To Create Internet Connection Detector With a Toast Notification with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Internet Connection Detector </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>Internet access.</p>
- </div>
- </div>
- <div class="close-icon"><i class="uil uil-times"></i></div>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Open Sans', 'Open Sans Regular', sans-serif;
- }
- body{
- overflow: hidden;
- background: #CFD0D0;
- }
- .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;
- }
-
Now paste the following codes into your script.js file
- 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();
- xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
-
- xhr.onload = ()=>{
-
- if(xhr.status == 200 && xhr.status < 300){
- toast.classList.remove("offline");
- title.innerText = "You're online now";
- subTitle.innerText = "Internet access.";
- wifiIcon.innerHTML = '<i class="uil uil-wifi"></i>';
- closeIcon.onclick = ()=>{
- wrapper.classList.add("hide");
- }
- setTimeout(()=>{
- wrapper.classList.add("hide");
- }, 3000);
- }else{
- offline();
-
- }
- }
- xhr.onerror = ()=>{
- offline();
-
- }
- xhr.send();
-
- }
-
- function offline(){
- wrapper.classList.remove("hide");
- toast.classList.add("offline");
- title.innerText = "You're offline ";
- subTitle.innerText = "No Internet access.";
- wifiIcon.innerHTML = '<i class="uil uil-wifi-slash"></i>';
- }
-
- setInterval(()=>{
-
- ajax();
- }, 100);
- }
-
If you face any difficulties while creating Internet Connection Detector With Toast Notification or your code is not working as expected, you can download the source code files by clicking download button.