JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<div id="alertBox">It's outside core hours!!</div>

CSS

#alertBox {
    background-color: red;
}

JavaScript

$(document).ready(function () {

    function checkMyTime() {
        var ud = new Date();
        var utcHour = ud.getUTCHours();
        var utcMin = ud.getUTCMinutes();
        var utcTotalMin = (utcHour * 60) + utcMin;
        var SOD = (15 * 60);
        var EOD = (24 * 60);

        if (utcTotalMin < SOD) {
            $("#alertBox").delay(1000).fadeIn('slow');
        } else if (utcTotalMin >= EOD) {
            $("#alertBox").delay(1000).fadeIn('slow');
        } else if (utcTotalMin >= SOD && utcTotalMin < EOD) {
            $("#alertBox").delay(1000).fadeOut('slow');
        }
    }

    window.setInterval(function () {
        checkMyTime();
    }, 60000);

    checkMyTime();

});