DEV Community

Flurabula
Flurabula

Posted on

How to create an Internet status viewer using JavaScript?

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

Image description
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.

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Read more:

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

Top comments (0)