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

hrhsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
hrhsAuthor Commented:
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.
0
Alexandre SimõesManager / Technology SpecialistCommented:
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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Michel PlungjanIT ExpertCommented:
You likely want to expand that to include day numbers since there are different times for weekend
0
hrhsAuthor Commented:
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;
0
hrhsAuthor Commented:
I do need to expand this to include day numbers.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Like this is will consider the current date:
display.innerHTML = getMessage();

Open in new window

0
Alexandre SimõesManager / Technology SpecialistCommented:
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

0
Alexandre SimõesManager / Technology SpecialistCommented:
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

0
hrhsAuthor Commented:
I can't use a popup.  I still don't understand where this

display.innerHTML = getMessage();

creates a usable HTML id element?
0
Alexandre SimõesManager / Technology SpecialistCommented:
The alert message on my examples is just so you can see the message.
Calling the getMessage() method gives you a string with the message, nothing else.

Only now I saw your html, sorry :)

Use like this: http://jsfiddle.net/AlexCode/k7zryqhb/5/

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

Open in new window

JavaSCript
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();
document.getElementById('display').innerHTML = msgs.getMessage();

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hrhsAuthor Commented:
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.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Thanks, glad it worked for you!

I can add some comments if you want.
Any specific part that you need more detail?
0
hrhsAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.