Hey 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 [Toast Notification to 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 animation that means when your internet status changed then 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.
You can copy the codes from the given boxes or download the code files from the given link but I recommend you download the source code files instead of copying codes. Click here to download code files.
You might like this:
Todo List App with Local Storage
Realtime Chat Web Application in PHP
Responsive Image Lightbox in JavaScript
Drag & Drop or Browse File Upload Button
HTML CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Detect Internet Connection | CodingNepal</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>
CSS CODE
@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;
}
For JavaScript codes please go to this link - https://www.codingnepalweb.com/2021/03/toast-notification-to-detect-internet.html
Top comments (1)
Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. I am a student of Best International Schools in Hyderabad. Would love to see more examples like this for other types of elements. Keep up the good work!