DEV Community

Flurabula
Flurabula

Posted on

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.

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)