In this blog post, we’ll show you how to check internet connection and display relevant notifications using HTML, CSS, and JavaScript. Whether you’re new to web development or an experienced developer, you’re sure to learn something new about detecting network status with plain JavaScript.
In this project, when the user’s device goes offline, there will be a displayed offline notification with a 10-second timer to reconnect. There will also be a “Reconnect Now” button that allows users to try reconnecting to the internet immediately. Once the user’s device is back online, the notification will change to “Restored Connection.”
Steps to Check Internet Connection in JavaScript
We’ll check the Internet connection and display the relevant notification using HTML, CSS, and JavaScript in 3 simple steps.
1. Setting up the project
In the initial step, we will create a new directory for our project. You can name it whatever you want, and inside this directory, create three files: index.html, style.css, and script.js. These files will contain the necessary HTML, CSS, and JavaScript code for checking the internet connection status.
2. Creating the notification
In the second step, we will create the layout and style the notification using HTML and CSS. Then, we will use JavaScript to check the device’s internet connection status.
In your index.html file, add the following HTML code to create the basic structure of the notification: The title, description, and icon name for this notification will be inserted by the JavaScript code.
<html lang="en" dir="ltr">
<title>Check Internet Connection | Coding Guru</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome CDN link for icons -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
<script src="script.js" defer></script>
<div class="notification">
<div class="wifi-icon"><i class=""></i></div>
<button class="reconnect-btn">Reconnect Now</button>
In your style.css file, add the following CSS code to style the notification: If you want, you can change the font, size, color, and background of the notification by slightly modifying this code.
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
font-family: "Poppins", sans-serif;
border-top: 3px solid #EA4D67;
transform: translateX(-50%);
box-shadow: 0 10px 25px rgba(52,87,220,0.1);
transition: all 0.25s ease;
.popup.online .reconnect {
@media screen and (max-width: 550px) {
Keep in mind that the notification won’t show on the page because we’ve added some styles to hide it, which will be controlled by JavaScript.
3. Checking the internet connection
In the final step, we will add the functionality to check the internet connection and display the relevant notification accordingly. To do this, add the following JavaScript code to your script.js file:
const popup = document.querySelector(".popup"),
wifiIcon = document.querySelector(".icon i"),
popupTitle = document.querySelector(".popup .title"),
popupDesc = document.querySelector(".desc"),
reconnectBtn = document.querySelector(".reconnect");
let isOnline = true, intervalId, timer = 10;
const checkConnection = async () => {
// Try to fetch random data from the API. If the status code is between
// 200 and 300, the network connection is considered online
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
isOnline = response.status >= 200 && response.status < 300;
isOnline = false; // If there is an error, the connection is considered offline
clearInterval(intervalId);
const handlePopup = (status) => {
if(status) { // If the status is true (online), update icon, title, and description accordingly
wifiIcon.className = "uil uil-wifi";
popupTitle.innerText = "Restored Connection";
popupDesc.innerHTML = "Your device is now successfully connected to the internet.";
popup.classList.add("online");
return setTimeout(() => popup.classList.remove("show"), 2000);
// If the status is false (offline), update the icon, title, and description accordingly
wifiIcon.className = "uil uil-wifi-slash";
popupTitle.innerText = "Lost Connection";
popupDesc.innerHTML = "Your network is unavailable. We will attempt to reconnect you in <b>10</b> seconds.";
popup.className = "popup show";
intervalId = setInterval(() => { // Set an interval to decrease the timer by 1 every second
if(timer === 0) checkConnection(); // If the timer reaches 0, check the connection again
popup.querySelector(".desc b").innerText = timer;
// Only if isOnline is true, check the connection status every 3 seconds
setInterval(() => isOnline && checkConnection(), 3000);
reconnectBtn.addEventListener("click", checkConnection);
In the code, you can see that to check if the device has an internet connection or not, we send requests for data to an API every 3 seconds and check if they are successful. If the requests fail, it indicates that the device is offline, and we will display the notification with a 10-second timer to wait before rechecking the connection.
If you want to understand the specific functionality of a certain script code, you can read the comments on each line to gain more insight.
