Create a Website Connection Test in 3 Minutes Using Pure JavaScript (Free Code)

by
responsive website connection test interface using HTML CSS JavaScript

Introduction :

advanced website connection test with n8n workflow and Gemini API automation
Toast Catcher JavaScript Project

Website connection test tools are essential for building user-friendly web apps, especially when users experience unstable internet.

Imagine you’re developing a web app or a dashboard, and the user suddenly goes offline. No feedback, no warning — just frustration. That’s where a simple website connection test using HTML, CSS, and JavaScript comes in.

In this tutorial, you’ll learn how to build a real-time online/offline detection system using pure JavaScript. This beginner-friendly project is mobile-responsive, lightweight, and requires no backend. You’ll also get access to the full source code and clear explanations.

This is especially useful for creators building automation tools, dashboards, or SaaS products where downtime or disconnection affects experience. We’ll also cover how this integrates well with other tools like n8n or can enhance UX with animations and alerts.

Keywords like speed test my website and check internet connection JavaScript are often misunderstood—this guide fixes that with a practical, working solution.

In this beginner-friendly guide, we’ll walk through every step using HTML, CSS, and JavaScript to build a fully working. You’ll get:

📦 Full copy-paste-ready source code

💬 A interface with smart responses

📱 A fully responsive UI

📘 A complete Project Setup Guide

Whether you’re a student, or aspiring front-end or full stack developer, this is a new idea blog, Let’s get started!

Setup and Requirements For Website Connection Test Project :

Before we begin, ensure you have the following:

Requirements:

  • A code editor like Visual Studio Code
  • Basic knowledge of HTML, CSS, and JavaScript
  • A modern web browser (Chrome, Firefox, Edge)
  • No additional libraries or frameworks needed

⏱️ Time Required: Under 2 minutes to build!

Folder Structure:

Create a project folder and set up the following files:

 Website Connection Test/
│── index.html  (HTML structure)
│── index.css  (CSS for styling)
│── script.js   ( needed)

Now, let’s dive into building the Project to check internet connection javascript step by step!

JavaScript offline alert UI for website connection test showing red warning text
Modern UI of a Website Connection Test built with HTML and JavaScript.

Project Overview:

This project creates a website connection test tool that:

  • Monitors your internet connection in real time
  • Displays online/offline status in the browser
  • Works on any device with no plugins

What the user sees:
A simple UI that shows whether you’re online or offline using text and color feedback.

💼 Use cases:

  • Offline alert systems in frontend dashboards
  • Improve UX in web download speed test pages
  • Add connection checks in n8n automation triggers

It’s a real-world, Project that’s check web connection and check internet connection JavaScript are implemented with real-world logic.

HTML Structure for Website Connection Test

HTML Code

HTML
<!DOCTYPE html>
<!--code belongs to aspirepages -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Website Connection Test | Aspirepages  </title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./4.jpg" type="image/x-icon">
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="popup">
      <div class="icon"><i class=""></i></div>
      <div class="details">
        <h2 class="title"></h2>
        <p class="desc"></p>
        <button class="reconnect">Reconnect Now</button>
      </div>
    </div>

  </body>
</html>

HTML Explanation

  • Declares HTML5 document.
  • Sets language to English and text direction to left-to-right.
<head>
  <meta charset="utf-8">
  <title>Website Connection Test | Aspirepages</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./4.jpg" type="image/x-icon">
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
  <script src="script.js" defer></script>
</head>
  • Sets title, font, and responsiveness.
  • Loads external Unicons for icons.
  • Uses defer so JS runs after HTML loads.
<body>
  <div class="popup">
    <div class="icon"><i class=""></i></div>
    <div class="details">
      <h2 class="title"></h2>
      <p class="desc"></p>
      <button class="reconnect">Reconnect Now</button>
    </div>
  </div>
</body>
</html>
  • The .popup container holds the UI for showing connection status.
  • <i class=""> will dynamically show icon (WiFi or WiFi-slash).
  • Title and description are updated based on connection.
  • Button allows users to manually retry connection check.

Step 2 : Styling the Website Connection Test UI with CSS

CSS Code

CSS
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background: #E3F2FD;
}
.popup {
  position: absolute;
  left: 50%;
  top: -25%;
  visibility: hidden;
  width: 490px;
  border-radius: 5px;
  padding: 13px 17px 20px;
  background: #fff;
  display: flex;
  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.show {
  top: 0;
  visibility: visible;
}
.popup.online {
  border-color: #2ECC71;
}
.popup .icon i {
  width: 40px;
  height: 40px;
  display: flex;
  color: #fff;
  margin-right: 15px;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #EA4D67;
}
.popup.online .icon i {
  background: #2ECC71;
}
.popup .title {
  font-size: 1.2rem;
}
.popup .desc {
  color: #474747;
  margin: 3px 0 10px;
  font-size: 1.04rem;
}
.popup .reconnect {
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 13px;
  border-radius: 4px;
  background: #5372F0;
}
.popup.online .reconnect {
  background: #bfbfbf;
  pointer-events: none;
}

@media screen and (max-width: 550px) {
  .popup {
    width: 100%;
    padding: 10px 15px 17px;
  }
}

CSS Explanation

  • Imports Google Font “Poppins” for modern, clean text.
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
  • Resets spacing and ensures consistent sizing and font.
body {
  background: #E3F2FD;
}
  • Applies a light blue background to the entire page.
.popup {
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 490px;
  padding: 13px 17px 20px;
  background: #fff;
  border-top: 3px solid #EA4D67;
  border-radius: 5px;
  box-shadow: 0 10px 25px rgba(52, 87, 220, 0.1);
  display: flex;
  visibility: hidden;
  transition: all 0.25s ease;
}
  • .popup is centered and hidden by default.
  • Styled as a card with soft shadows.
  • Red top border indicates offline status.
.popup.show {
  top: 0;
  visibility: visible;
}
  • When .show class is added, popup slides into view.
.popup.online {
  border-color: #2ECC71;
}
  • Green border is used when online.
.popup .icon i {
  width: 40px;
  height: 40px;
  background: #EA4D67;
  color: #fff;
  font-size: 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}
  • Icon is styled as a colored circular badge (red by default).
.popup.online .icon i {
  background: #2ECC71;
}
  • Icon turns green when online.
.popup .title {
  font-size: 1.2rem;
}

.popup .desc {
  font-size: 1.04rem;
  color: #474747;
  margin: 3px 0 10px;
}
  • Title and description have clear, readable sizes.
.popup .reconnect {
  background: #5372F0;
  color: #fff;
  padding: 8px 13px;
  font-weight: 500;
  font-size: 0.95rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
  • Primary button style for “Reconnect Now”.
.popup.online .reconnect {
  background: #bfbfbf;
  pointer-events: none;
}
  • Disabled state for reconnect button when online.
@media screen and (max-width: 550px) {
  .popup {
    width: 100%;
    padding: 10px 15px 17px;
  }
}
  • Mobile responsiveness for smaller screen widths.

Step 3 : JavaScript Logic for Website Connection Test Detection

JavaScript Code

JavaScript
// code belongs to asirepages
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 {
        // 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;
    } catch (error) {
        isOnline = false; // If there is an error, the connection is considered offline
    }
    timer = 10;
    clearInterval(intervalId);
    handlePopup(isOnline);
}

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
        timer--;
        if(timer === 0) checkConnection(); // If the timer reaches 0, check the connection again
        popup.querySelector(".desc b").innerText = timer;
    }, 1000);
}

// Only if isOnline is true, check the connection status every 3 seconds
setInterval(() => isOnline && checkConnection(), 3000);
reconnectBtn.addEventListener("click", checkConnection);

JavaScript Explantion

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;
  • Selects necessary DOM elements for dynamic updates.
  • Tracks connection status and retry countdown.
const checkConnection = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    isOnline = response.status >= 200 && response.status < 300;
  } catch (error) {
    isOnline = false;
  }

  timer = 10;
  clearInterval(intervalId);
  handlePopup(isOnline);
}
  • Tries to fetch dummy data.
  • If request succeeds, user is online.
  • Clears retry timer and shows popup based on status.
const handlePopup = (status) => {
  if (status) {
    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);
  }

  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(() => {
    timer--;
    if (timer === 0) checkConnection();
    popup.querySelector(".desc b").innerText = timer;
  }, 1000);
}
  • Updates popup content, icon, and behavior based on connection.
  • If offline, starts a countdown and retries every second.
  • If online, shows success message briefly then hides popup.
javascriptCopyEditsetInterval(() => isOnline && checkConnection(), 3000);
  • Continuously checks connection every 3 seconds if currently online.
reconnectBtn.addEventListener("click", checkConnection);
  • Lets user manually retry connection check by clicking button.

It satisfies the use case for check internet connection JavaScript, and can be adapted for speed test my website logic if paired with external APIs.

How to Improve This Project Further

You can upgrade this website connection test with:

  • n8n Automation: Trigger workflows when the user goes offline (e.g., alert admin).
  • Gemini API: Auto-generate offline messages or troubleshooting tips using AI.
  • Dark Mode Toggle: Respect user OS theme or provide a manual switch.
  • Toast Alerts: Show connection alerts with animations or transitions.
  • Speed Check: Add integration with a web download speed test API.

Frequently Asked Questions

Q1. How to detect internet connection with JavaScript?

You can use navigator.onLine along with online and offline event listeners to monitor internet status in real-time.

Q2. Is this method supported in all browsers?

Yes, most modern browsers like Chrome, Firefox, Edge, and Safari support this method reliably.

Q3. Can I show alert when user is offline?

Yes. You can use alert() or create custom UI popups, modals, or toast messages using HTML, CSS, and JavaScript.

Q4. Is this useful for beginners?

Absolutely. It’s a great project to understand DOM manipulation, event listeners, conditional logic, and UI interaction.

Q5. Can I add animations on connection lost?

Yes. You can add CSS transitions, keyframe animations, or even JavaScript-triggered effects to make your offline alerts more engaging.

Live Preview The Demo Website:

website connection test UI using HTML and JavaScript for real-time online status detection
live preview

Download complete code :

Git Hub link :

check internet connection JavaScript code using navigator.onLine event listeners
Git Hub link

Conclusion :

A website connection test is a tiny yet powerful feature that boosts user experience, especially in progressive web apps and mobile-first designs.

With just HTML, CSS, and JavaScript, you now have a functional tool to alert users about their online/offline status. It’s beginner-friendly, responsive, and ideal for developers, automation engineers, and UI/UX designers.

🚀 Grab the full source code, modify it for your stack, and deploy it in your web apps, dashboards, or even your next automation project with n8n.

💬 Got stuck somewhere? Drop your questions in the comments.
📲 Want more free tutorials like this? Follow us on Telegram or Instagram.
🔗 Check out more JavaScript UI Projects or Frontend Tools

Read our previous blog post :

⚙️ Responsive mega menu built using HTML, CSS, and JS for navbar layout
🔥 Fully Responsive Mega Menu for Navbar – Built in Minutes!

Leave a Comment

You have been successfully Subscribed! Ops! Something went wrong, please try again.
Twitter Facebook X-twitter

Important Pages

About us

Contact us

Disclaimer

Privacy policy

Terms and conditions

Recent blogs

  • All Post
  • AI & Automation
  • Coding Projects
  • Developer Resources
  • Learning Roadmaps
  • Tech & AI Updates

© 2023 Aspirepages   •  Terms and Conditions • Privacy policy  •  Disclaimer