In this lesson, we are going to use conditional statements to check the current time and customize
a dynamic message that's going to be output to the user, we need to set up an element container for
that output using a variable called output using document query selector.
We're going to select the element with the class of output and this is where we're going to output the
contents of our message.
So whenever the button gets clicked, we're going to run and invoke the function called show output
and that we have over here.
And we're going to take that value of the date.
We need to set up another variable in order to contain that value.
We can call it Curre for current taking the date object.
We can get the hours that are available within that date object.
And as we saw, that's going to return back value of seventeen or whatever.
The current time is also setting up a blank message that we can use in order to contain any message
is that we want.
So next thing we want to do is we want to set up and try that out.
So if Curre is greater than 17, then it's going to be evening.
So that means it's after 6:00 p.m. and our message will now say a message and we can say it's we also
need to apply some additional conditions.
We're going to check to see if the current value is greater than 12.
And we know that if it's already greater than 17, then it will run and message will be equal to its
evening and then it will finish off that condition.
But this is if the current value is greater than 12.
So that means it's going to be between 12 and 17 or 18, actually, because that is where the cutoff
is.
And we're going to check to see if it's the afternoon.
And if it is, then the message will say it's after noon.
And then lastly, we'll do one more check to see if the value of Curre is greater than zero.
And if it is, then we know it's morning.
So adding in message and we can say it's morning.
And if we don't pick up any of those values, then what we're doing is we know that something went wrong
and hopefully this doesn't happen.
So we can say something is wrong.
Then lastly, let's take that message and we'll update the interim HTML and we're using HTML because
we're going to use the H1 tags, adding in message variable and then closing off the H1 tags.
So let's try it out, so the current time we saw it's 17, so it currently is evening and you can also
within the console output, whatever the current time is, so that we can double check and make sure
that we are getting the current time.
So we see that it is 18.
So before we finish off, just do a quick overview of the logic here.
So what we're doing is we're getting the date object.
We're getting the hours associated with that date object so we know it's going to be anywhere from zero
to 23.
And then we come into the condition checking to see if it's greater than 17.
So that means that if it's 18, 19, 20, 21, 22, 23, then it's evening.
And if it isn't evening, so if it's not greater than 17, we know that it's less than 17, 17 or less,
and it could potentially be afternoon.
So we check to see if it's greater than 12.
So that means that anything one 1:00 p.m., so such as 13, 14, 15 hundred hours, 16 and 17 hundred
hours is going to be afternoon.
And then also, if it's not afternoon, we know that it's morning.
So we check to see if it's greater than zero.
And if it is, then we know that we've got a time and it's sometime in the morning.
If our criteria isn't met anywhere along the way here we know something's gone wrong and we're going
to put the message of something is wrong.
Try it out for yourself and the next lesson we're going to extend on what we've learned in this lesson
and build out some more functionality.
With the date object.