Created
November 4, 2021 11:04
-
-
Save HazzazBinFaiz/8a09986b586a2fefaf77641366d948df to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Online Status Detector</title> | |
| <style type="text/css"> | |
| #indicator { | |
| min-height: 100vh; | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| font-size: 5rem; | |
| align-items: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="indicator"></div> | |
| <script type="text/javascript"> | |
| let flusher = null; | |
| let body = document.getElementsByTagName('body')[0]; | |
| let indicator = document.getElementById('indicator'); | |
| function startFlush() { | |
| if (flusher == null) { | |
| flusher = setInterval(function(){ | |
| if (body.style.backgroundColor == 'green') { | |
| body.style.backgroundColor = 'white' | |
| document.title = 'Online' | |
| } else { | |
| body.style.backgroundColor = 'green' | |
| document.title = '~~~~' | |
| } | |
| }, 100); | |
| } | |
| } | |
| function stopFlush() { | |
| if (flusher != null) { | |
| clearInterval(flusher); | |
| flusher = null | |
| } | |
| body.style.backgroundColor = 'white' | |
| document.title = 'Offline' | |
| } | |
| function onlineChecker() { | |
| setInterval(function(){ | |
| fetch('https://jsonplaceholder.typicode.com/todos/1').then(function(){ | |
| startFlush(); | |
| indicator.innerHTML = 'Online' | |
| }).catch(function(ex){ | |
| stopFlush(); | |
| indicator.innerHTML = 'Offline' | |
| }) | |
| }, 1000); | |
| } | |
| onlineChecker(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment