JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

HTML

<!doctype html>

<!--[if IE 6]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if (gt IE 6)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->

<head>

    <meta charset="utf-8">

    <title>HTML5+JS offline/online notification demo</title>
    <meta name="description" content="HTML5+JS">
    <meta name="hemanth.hm" content="">
    

</head>

<body>
    <div>
    
        <b> Turn off and on your network (or workoffline and back) to see the notifications!</b>
        </div>    
</body>
</html>

JavaScript

function notify(text)  { span = document.body.appendChild(document.createElement('span')); span.innerHTML = text;
    span.style.cssText = "z-index:99;font-size:18px;background:#FFF1A8;top:0";
    span.style.position = 'fixed';
    span.style.left = ((document.body.clientWidth  -  span.clientWidth)  /  2)  +  
    "px"; window.setTimeout(function () {
        document.body.removeChild(span)
    },  3000)
}

window.addEventListener('online', function (evt)  { notify("And....we are back!"); 
});

window.addEventListener('offline', function (evt)  { notify("OOPS....you are offline!"); 
});