Here in this lesson, we are going to create some elements on the page that click a button as well as
an output and then use the date object and get some date information to display the hour that it's being
clicked whenever the button gets clicked.
So we're going to display that on the page.
So let's get to it.
So, first of all, let's create our button and we're using the document to create elements and element
that we're creating is going to be the button tag element.
And also, let's take the button and add some text content to the button.
And how about we click me?
So that's going to be the button label.
And then we also want to add the button to the body so that or actually we need a mean container area.
So let's create another element so we don't want to just have the button on itself within the body.
We want the container.
So document create elements and we'll create a div for that.
So the div is going to be the main container element.
And then for the output itself, we're just going to leave it blank right now, but we will be adding
it to the document.
So just select the document and then the body object is already an object within the document and we
can use the append method to upend the output to there and then select output and append the button
to be within the output div and then const.
And we should also create a message area.
So document create elements and this can also be another div and we'll have that message area appended
to the output.
So just underneath or we're going to put it above the button.
So that means that we.
Need to add it before we add the button with an output so it appears above and let's add in some content
into message.
And this will just say hello, world.
Now, we've constructed our basic HTML that we can use, so it's refresh and do a quick inspect on it.
So open up the dev tools.
We've got the hello world and the click me, so that's all there and we're already to add in some.
Click event, some functionality to it.
So let's move all of the stuff up and select the button object that we've already identified.
We're going to add an event listener.
The event that we're adding in is going to be a click.
So this is going to run whenever it gets clicked.
So we're going to use the Arrow format for the function.
And so what we want to happen whenever it gets run, we want to get the current date value and to the
new date, so it's going to return back to the new date value and from the date, we want to get the
hours.
So let's take a message and text content and we'll update the text content to show the date.
And actually, we shouldn't use state, we'll just use DEET, we'll just do today, actually.
So instead of using DEET will use today and today and we've got a number of methods so we can get the
day Sauternes, the day of the week, returns the year and returns the hours.
And this is specific for the local hours.
So it's going to return back whatever the local hours are.
We can also add and add in the local minutes as well.
So how about we do that and we can use the template literals.
So that's where we use the curly brackets and the dollar sign and the tactics to open and close it.
So that way we can add in the spacing and we'll do one more.
So we've got today and still to get ours, let's do get minutes.
And this is a method.
So we do need to have the rounded brackets and let's see what this looks like.
So refresh and click me.
So it's getting the hours.
So right now it's 5:00 p.m. 553, actually.
And whenever we click it, we're getting the hours in the minutes so we can also get the seconds if
we want as well.
So there's some other options there, so get seconds, it's going to return the second round of brackets
again because to indicate that this is going to be a method that gets invoked.
So now we're getting the seconds, we're getting the hours, minutes and the second.
So whenever the button gets clicked, then we invoke the function which updates the content and outputs
the new content to the page.
So go ahead and try that out as well.
And have some fun with it, creating elements on the page and then updating it dynamically with event
listener.