ononline and onoffline Events tutorial in JavaScript

October 14, 2024

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ononline onoffline Events JavaScript</title>
    <link rel="stylesheet" href="css/ononline_onoffline_Events_JavaScript.css">
</head>

<body onoffline="offlineFunction()">
    <div id="box"></div>
    <script>
        var target = document.querySelector("#box");

        // window.addEventListener("offline", function () {
        //     target.innerHTML = "You are Offline.";
        //     target.style.backgroundColor = "#ffc0cb";
        // });

        function offlineFunction() {
            target.innerHTML = "You are Offline.";
            target.style.backgroundColor = "#ffc0cb";
        }

        window.addEventListener("online", function () {
            target.innerHTML = "You are Online.";
            target.style.backgroundColor = "#90ee90";
        });
        //Below "navigator" is Object and "onLine" is Method
        //"onLine" method returns true OR false
        //If we online then "onLine" method returns true and if we offline then "onLine" method returns false
        //Below line shows Online OR Offline Status
        //Below line automatically trigger after loading page
        console.log(navigator.onLine);

        if (navigator.onLine) {
            console.log("Online");
        }
        else {
            console.log("Offline");
        }
    </script>
</body>

</html>




Below File is css/ononline_onoffline_Events_JavaScript.css File
#box {
    background: #fafad2;
    width: 400px;
    height: 200px;
    padding: 15px;
    font-size: 40px;
    font-weight: bold;
    border: 5px solid #4e4e4e;
}