Gfrktyl

I would like to ad an open hours which would change everyday on my site and also having just the word "closed" when the opening hours is ended.

I have used a code that I found on this website but I am not good enough in Javascript to change it to look like what I want : having just the "closed" when my shop is closed without all the opening hours.
I am actually not a developer and I am struggling ..

This is my html:

<div id="open-display">

    <div class="openclosed"/>

    <div class="timerange" data-days="1,2,3,4" data-open="08:00" data-close="1:00">Open today: <span class="days">Mon - Thu</span> 8am - 6pm</div>

    <div class="timerange" data-days="5" data-open="08:00" data-close="20:00">Open today: <span class="days">Fri</span> 8am - 8pm</div>

    <div class="timerange" data-days="6" data-open="09:00" data-close="18:00">Open today: <span class="days">Sat</span> 8am - 6pm</div>

    <div class="timerange" data-days="7" data-open="09:00" data-close="17:00">Open today: <span class="days">Sun</span> 8am - 5pm</div>

</div>

Javascript:

function isOpen(timeRangeEl, date) {

    var day = '' + date.getDay();

    var hhmm = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);



    var days = timeRangeEl.getAttribute('data-days');

    var openTime = timeRangeEl.getAttribute('data-open');

    var closeTime = timeRangeEl.getAttribute('data-close');

    return days.indexOf(day) >= 0 && openTime <= hhmm && hhmm < closeTime;

}



function openClose() {

    var date = new Date();

    var display = document.getElementById('open-display');

    var els = display.getElementsByClassName('timerange');

    var anyActive = false;

    for (var i = 0; i < els.length; i++) {

        if (isOpen(els[i], date)) {

            anyActive = true;

            els[i].className = els[i].className.replace(/ *inactiveb/g, '');

        } 

        else if (els[i].className.indexOf('inactive') < 0) {

            els[i].className += ' inactive';

        }

    }

    if (anyActive) {

        display.className = 'closed';

    } else {

        display.className = 'closed';

    }

}



setInterval(openClose, 5000);

openClose();

CSS:

#open-display.open > .timerange.inactive,

#open-display.open .days {

     display: none;

}

#open-display.open > .openclosed::before {

    content: "";

}

#open-display.closed > .openclosed::before {

    content: 'Closed';

}



#open-display {

    font-size: 14px;

    float: left;

    margin-left: 20px;

    margin-top: 7px;

}