asked on

Custom website text according to date and time

I've been asked to write some Javascript that results in a custom text message. This is the logic.

Messages:
A We’re open and can see you today.
B We’re closed but will reopen tomorrow at 8 AM.
C We’re closed but will reopen today at 8 AM.
D We’re closed but will reopen tomorrow at 11 AM.
E We’re closed but will reopen today at 11 AM.
F We’re closing soon. Hurry in, to be seen today.

Monday – Friday Message
12 AM – 7:59 AM: C
8 AM – 7:29 PM: A
7:30 PM – 8 PM: F
8:01 PM – 11:59 PM: B

Saturday Message
12 AM – 7:59 AM: C
8 AM – 6:29 PM: A
6:30 PM – 7 PM: F
7:01 PM – 11:59 PM: D

Sunday Message
12 AM – 11:59 AM: E
11 AM – 5:29 PM: A
5:31 PM – 5:59 PM: F
6 PM – 11:59 PM: B

I started with response Sunday response A because that is what day and time it is now for me but I can't seem to get this first response correct.

Here is my code.

var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes();


var response_a = ("We’re open and can see you today.");
var response_b = ("We’re closed but will reopen tomorrow at 8 AM.");
var response_c = ("We’re closed but will reopen today at 8 AM.");
var response_d = ("We’re closed but will reopen tomorrow at 11 AM.");
var response_e = ("We’re closed but will reopen today at 11 AM.");
var response_f = ("We’re closing soon. Hurry in, to be seen today.");

if (today == 0 && hours == 11 && hours < 18 && minutes < 30) {
    display.innerHTML = response_a;
}

Open in new window

and my HTML

<div><span id="display"></span></div>

Open in new window

Alexandre Simões

Before all, I see a problem there... you're relying on the client's clock.
What if the user is in a different time-zone?

Now for the solution (not considering what I said above), I would use MomentJS for that. On top of what it does with dates, there's a specific plugin to work with data ranges.
In this plugin, the contains method is what you're looking for. The documentation is very good, have a look!

As for how to structure your data, I would do something different:

var getTime = function(h, m){
    return new Date((new Date()).setHours(h,m,0,0));
};

var responses = [
    { from: getTime(8,0), to: getTime(7,29), message: "We’re open and can see you today." },
    { from: getTime(0,0), to: getTime(7,59), message: "We’re closed but will reopen tomorrow at 8 AM." },
];

Open in new window

With this data structure it's easy to create your range and compare with the current user date using MomentJS.

hrhs

ASKER

We have a very small service area and it's all in one timezone. The clients will always be in our timezone.

I appreciate that there are libraries that make things easier such as MomentJS but our CMS doesn't make it easy to include additional libraries. Also, I have about a dozen sites running this same CMS and I don't want to keep track of customized installs, not to mention that upgrades will likely overwrite my customizations.

I think I should figure out how to do this with plain vanilla Javascript.

Alexandre Simões

Fair enough! :)
Here's the fiddle for you to test: http://jsfiddle.net/AlexCode/k7zryqhb/

And here's the same code:

var getTime = function(h, m){
    return new Date((new Date()).setHours(h,m,0,0));
};

var responses = [
    { from: getTime(8,0), to: getTime(19,29), message: "We’re open and can see you today." },
    { from: getTime(0,0), to: getTime(7,59), message: "We’re closed but will reopen tomorrow at 8 AM." },
    /* FILL IN THE REST */
];

var isInRange = function(from,to,date){
    date = date || new Date();
    
    console.log(from, to, date);
    return date >= from && date <= to;
};
    
var getMessage = function(){
    for(var i=0;i<responses.length; i++){
        var response = responses[i];
        if(isInRange(response.from, response.to)){
            return response.message;
        }    
    }
    
    return 'Message not found'; // you can even use this as the default closed message
};


alert(getMessage());

Open in new window

Michel Plungjan

You likely want to expand that to include day numbers since there are different times for weekend

hrhs

ASKER

Okay, now how do I translate this into an HTML id element rather than a pop-up message?

I need something along these lines.

display.innerHTML = message;

hrhs

ASKER

I do need to expand this to include day numbers.

Alexandre Simões

Like this is will consider the current date:

display.innerHTML = getMessage();

Open in new window

Alexandre Simões

I've also update the code to include the day of the week.
http://jsfiddle.net/AlexCode/k7zryqhb/2/

var getTime = function(h, m){
    return new Date((new Date()).setHours(h,m,0,0));
};

var responses = [
    /* days represent the day of the week. 0=Sunday, 1=Monday, ... */
    { days: [1,2,3,4,5], from: getTime(8,0), to: getTime(19,29), message: "We’re open and can see you today." },
    { days: [1,2,3,4,5], from: getTime(0,0), to: getTime(7,59), message: "We’re closed but will reopen tomorrow at 8 AM." },
    /* FILL IN THE REST */
];

var isInRange = function(response,date){
    date = date || new Date();

    return response.days.indexOf(date.getDay())>-1 && date >= response.from && date <= response.to;
};
    
var getMessage = function(){
    for(var i=0;i<responses.length; i++){
        var response = responses[i];
        if(isInRange(response)){
            return response.message;
        }    
    }
    
    return 'Message not found'; // you can even use this as the default closed message
};


alert(getMessage());

Open in new window

Alexandre Simões

Just to make it cleaner and avoid polluting the global namespace, I've wrapped everything in a "class" and exposed only the required method: http://jsfiddle.net/AlexCode/k7zryqhb/4/

function MessagesManager() {
    var getTime = function (h, m) {
        return new Date((new Date()).setHours(h, m, 0, 0));
    };

    var responses = [
        /* days represent the day of the week. 0=Sunday, 1=Monday, ... */ 
        { days: [1, 2, 3, 4, 5], from: getTime(8, 0), to: getTime(19, 29), message: "We’re open and can see you today." }, 
        { days: [1, 2, 3, 4, 5], from: getTime(0, 0), to: getTime(7, 59), message: "We’re closed but will reopen tomorrow at 8 AM." },
        /* FILL IN THE REST */
    ];

    var isInRange = function (response, date) {
        date = date || new Date();

        return response.days.indexOf(date.getDay()) > -1 && date >= response.from && date <= response.to;
    };

    this.getMessage = function () {
        for (var i = 0; i < responses.length; i++) {
            var response = responses[i];
            if (isInRange(response)) {
                return response.message;
            }
        }

        return 'Message not found'; // you can even use this as the default closed message
    };
}

var msgs = new MessagesManager();
alert(msgs.getMessage());

Open in new window

hrhs

ASKER

I can't use a popup. I still don't understand where this

display.innerHTML = getMessage();

creates a usable HTML id element?

ASKER CERTIFIED SOLUTION

Alexandre Simões

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hrhs

ASKER

Much more professional (engineering) technique than I had started with. Fantastic solution... Elegant!

I feel like I need to ask for comments for most every line of the code to try to wrap my head around the solution.

Alexandre Simões

Thanks, glad it worked for you!

I can add some comments if you want.
Any specific part that you need more detail?

hrhs

ASKER

Well, I'm a very new coder, only because I don't get enough of these opportunities for "real-world" uses. 99% of what I'm asked for can be covered via our CMS and simple HTML/CSS.

The idea of looping and creating an array was just not something I thought about with this request and something I need to learn more about. So the looping portion and a description of the array would be handy/useful knowledge.

Thanks so much for the solution BTW. Great stuff... Beyond my expectations.