How to create an Internet status viewer using JavaScript?

#introduction

In this tutorial, we are sharing the source code a simple internet status viewer using HTML, CSS and JavaScript. This tool will looks like:

As you can see from the image above, the connection status will be visible. If
the network is off then the connection status will be “no connection” in red
colour ( look the second image).

I have used font-awesome to display the wifi icon. Also I am connected the
project with font-awesome using URL.

Files and folder

For this project you want to create a folder containing the files called
index.html and style.css. I am added the javascript with the html file.

Index.html

<!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">
    <title>connection test</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body ononline="myfunction()">
    <div class="network">
        <i class="fa fa-wifi"></i>
        <h3 id="message">No connection</h3>

    </div>
</body>
<script>
    let message = document.getElementById("message");
    let wifi = document.querySelector(".fa-wifi");
        let messageOnline = () => {
            message.textContent = "Connected";
            message.style.cssText = "color: #689f38";
            wifi.style.cssText = "color: white; background-color:#689f38;";
        };
        let messageOffline = () => {
            message.textContent = "No Connection";
            message.style.cssText = "color: #d32f2f";
            wifi.style.cssText = "color: red; background-color:white;";
        };
        if (window.navigator.onLine) {
            messageOnline();
        } else {
            messageOffline();
        }
        window.addEventListener("online", messageOnline);
        window.addEventListener("offline", messageOffline);
</script>
</html>

style.css


*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
.network{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
.network i{
    padding: 30px;
    font-size: 35px;
    background-color: rgb(245, 244, 244);
    border-radius: 50%;
    transition: 2s;
    border: 2px solid;
}
.network h3{
    padding-left: 15px;
    color: brown;
    font-size: 25px;
}

simple contact form using HTML CSS and JavaScript
Rich text editor using HTML CSS and JavaScript
Download the Youtube video thumbnail using JavaScript