Internet Connectivity Status Checker using JavaScript

Hello Guys! In this blog, I’m going to explain to you how to make an internet connectivity checker using javascript. You can use this project to any realtime web application to check if the user is online or not. This will be a step-by-step guide including HTML and CSS. Let’s get started 🚀.

Before we start, here are some more JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Internet Connectivity Detector using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <div> class="status" id="status">
            Click button to check status
        </div>
        <button> onclick="checkConnectivityStatus()">Check Status</button>
    </div>

</body>

</html>

CSS Code

Create a file style.css and paste the code below.

* {
        font-family: 'Poppins', sans-serif;
    }
    
    body {
        background-color: #111827;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 15rem;
    }
    
    .container {
        background: white;
        border-radius: 10px;
        padding: 3rem 6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .status {
        padding: 10px 40px;
        background: lawngreen;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    button {
        margin-top: 15px;
    }

Output Till Now

JavaScript Code

Create a file script.js and paste the code below.

function checkConnectivityStatus() {
        // Getting status div
        const status = document.getElementById("status");
    
        if (navigator.onLine) {
            status.style.background = 'lawngreen';
            status.innerText = 'Online!';
        } else {
            status.style.background = 'red';
            status.innerText = 'Offline';
        }
    }

Written by: Piyush Patil

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖