How To Detect Internet Connection Using JavaScript

To detect internet connection using JavaScript, you can use the window.addEventListener method to register a listener for the online and offline events. These events are fired when the browser’s internet connection status changes.

Here is an example of how to use these events:

window.addEventListener('online', function() { 
   // The browser has regained internet connection 
});
window.addEventListener('offline', function() { 
   // The browser has lost internet connection 
});

Video Tutorial of How To Detect Internet Connection Using JavaScript

To create this program (Detect internet connection). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. In the first place, make a HTML document with the name of index.html and paste the given codes in your HTML record. Keep in mind, you’ve to make a document with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Detect Internet connection</title>
    <!-- Created by S-Tech04 | www.youtube.com/c/STech04 -->
</head>
<body>
    <div class="connections">
        <div class="connection offline">
            <i class="material-icons wifi-off">wifi_off</i>
            <p>you are currently offline</p>
            <a href="#" class="refreshBtn">Refresh</a>
            <i class="material-icons close">close</i>
        </div>
        <div class="connection online">
            <i class="material-icons wifi">wifi</i>
            <p>your Internet connection was restored</p>
            <i class="material-icons close">close</i>
        </div>
    </div>

    <script>
        const offlineConnection = document.querySelector('.offline')
        const onlineConnection = document.querySelector('.online')
        const closeBtn = document.querySelectorAll('.close')
        const refreshBtn = document.querySelector('.refreshBtn')

        function online() {
            offlineConnection.classList.remove('active')
            onlineConnection.classList.add('active')
        }
        function offline() {
            offlineConnection.classList.add('active')
            onlineConnection.classList.remove('active')
        }

        window.addEventListener('online',()=>{
            online();
            setTimeout(() => {
                onlineConnection.classList.remove('active')
            }, 5000);
        })
        window.addEventListener('offline',()=>{
            offline();
        })

        for (let i = 0; i < closeBtn.length; i++) {
            closeBtn[i].addEventListener('click',()=>{
                closeBtn[i].parentNode.classList.remove('active');
                if (closeBtn[i].parentNode.classList.contains('offline')) {
                    setTimeout(() => {
                        closeBtn[i].parentNode.classList.add('active');
                    }, 500);
                }
            })
        }

        refreshBtn.addEventListener("click",()=>{
            window.location.reload();
        })
    </script>
</body>
</html>

Second, make a CSS record with the name of style.css and paste the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body
{
    width: 100%;
    min-height: 100vh;
    background: #e6e6e6;
}
.connection
{
    position: fixed;
    bottom: 50px;
    left: 50px;
    width: 360px;
    height: 70px;
    background: #242526;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
}
.connection p
{
    font-size: 14px;
    color: #fff;
    font-weight: 300;
}
.connection .refreshBtn
{
    font-size: 16px;
    margin-left: 10px;
    text-decoration: none;
    color: #469aff;
}
.connection .wifi-off
{
    margin-right: 20px;
    font-size: 26px;
    color: #7c7c7c;
}
.connection .close
{
    margin-left: 20px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    background: #474747;
    text-align: center;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}
.connection .wifi
{
    color: #029702;
    font-size: 26px;
    margin-right: 20px;
}
.online.active
{
    width: 420px;
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
}
.offline.active
{
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
}

Now you have successfully created a program to detect internet connection using JavaScript. If you encounter any errors or issues, you can download the source code files by clicking on the provided download button. The files are free and come in a .zip file which you will need to extract. Click the download button to access all the source code files.

Download Now

Please Wait...

Direct Link Click Here