Show content based on Time of Day (Timing changes on different days of the week)

Question

Showing a certain information at a specific time or day.

I pretty new to jquery and have my code currently working such that it assumes that the shop is open every day of the week from 9-8pm. Any help is appreciated, thanks

However, how can I tweak my code such that the opening hours are:

• Sunday: Close
• Monday: 6pm to 10pm
• Tuesday: 6pm to 10pm
• Wednesday: 6pm to 10pm
• Thursday: 11am to 10pm
• Friday: 11am to 10pm

SCRIPT:

    var data = [
        [0, 9, "Sorry we are closed."],
        [10, 20, "We are open."],
        [21, 24, "Sorry, we are closed."]
    ],
        hr = new Date().getHours();

    for(var i=0; i<data.length;i++){
        if(hr >= data[i][0] && hr <= data[i][1]){
            $("#open_close").html(data[i][2]);
            break;
        }
    }; 

HTML:

<div class="time"><a href="#contact">
    <img id="clock" src="assets/clock.png">
    <div id="open_close"></div></a>
</div>

Answer 1

I'd be tempted to structure your data a little differently to simplify the logic you use...

var data = [ 
    {}, //Sunday - closed
    { open: 18, close: 22 }, //Monday
    { open: 18, close: 22 }, //Tuesday
    { open: 18, close: 22 }, //Wednesday
    { open: 11, close: 22 }, //Thursday
    { open: 11, close: 22 }, //Friday
    {} //Saturday - closed
];

Then you could make your logic a little simpler...

var date = new Date();
var dayOfWeek = date.getDay(); // 0 is Sunday, 1 is Monday, etc...
var openingTimes = data[dayOfWeek];
var openClosed = false; // closed by default

// check that there are opening times for today
if (openingTimes.hasOwnProperty('open') && openingTimes.hasOwnProperty('close')){
    var hour = date.getHours()
    openClosed = openingTimes.open <= hour && hour < openingTimes.close;
}

$("#open_close").html(openClosed ? 'We are open': 'Sorry, we are closed.');