This lesson, we're going to make things a little bit more interesting, that we're going to add in
some color, some additional styling into that element.
So selecting that output.
Whatever element has a class of output, we're going to update the width to 200 pics, update the height.
And we also said that to 200 picks and we'll do a default color of white in it, so text will be white
and text a line and update that text to a line to center going into our JavaScript, what we're going
to do is we're going to update that element style property.
So when we refresh, we can see we've got message here and we don't get anything being output in that
message.
We see it's evening.
We don't see it because it's all going white.
I'm actually going to make the height a little bit smaller so it fits better on our page.
I do have it zoomed in.
So that's why we've got a really large.
Area there, so we've got the content still being output, but we're not able to see it, and that's
because we need to set the background color.
So let's do that with JavaScript, where we've got that element within an object called output.
We can apply the style property to it and then within style, we've got an option for background color.
So this can be a hex value.
It can also be a named color value.
So we'll set it as black.
We can click it and we can see that it's evening so it goes black.
We can also trip it up to be of different values.
So I'm going to add in and I'm going to update the current value to be 13 so that now when I click message,
it should say it's afternoon.
And that case we need to update and add in a color for the afternoon.
How about we make it blue for afternoon refresh and we see that afternoon is now blue.
So what I want you to do now, pause the video and add in some more colors.
So add in orange for the morning and if something goes wrong, then make it red and you can update your
current time value with this variable here because we're already setting it and all we're doing is overwriting
the current value of the new date.
And once you've finished debugging and testing your application, you can comment this out or you can
simply just remove it.
So go ahead and make it orange and make it red.
I'll show you the solution as well.
So the solution to make it orange, you can use the named colors so we can simply just use the same
format as we used earlier.
And then if something goes wrong here, then we can set it to red.
So let's try that out.
So if it's four a.m. in the morning and we click the message, we see it's morning.
If we get something like E, we can click it and we see something went wrong.
So go ahead and try this out for yourself.
Update the style property of the element and notice we've already made our selection within the object.
So that gives us a quick and easy way to update that content.
And coming up, because this is a JavaScript course, we're going to update all of these properties
within the element, all of these style properties, and we're going to get rid of the CSFs.
So that's still to come in the upcoming lesson.
So go ahead and try this out for yourself.