In this section, we're going to be building out an HTML JavaScript countdown timer and we're going
to need a few HTML elements within the page.
First of all, we need an input area that the user can come and input the date that they want to enter
in.
So this is the end date that we're going to be using for the counter in order to calculate how much
time is left until that selected date.
So going in and refreshing it, we're using the H simple five dete input.
So just using type date, this gives us the ability to select to date and we can use that within our
JavaScript in order to calculate how much time is left.
We also need a visual that we're going to use in order to output the time for the user and we can call
this one clock.
So giving it a class of clock, this will be a div and within this div we're going to have some span's.
So the first span that we have is going to be a class of days.
So this is how many days are left until that particular element or this is how many days are left in
the countdown.
And we can wrap all of this inside of a span and duplicating this so that we have a visual for hours
as well, updating the class so that we have a way to select it and we can output the word hours for
the person using the application.
The other parameter that we need is minutes.
So just give it a class of minutes and we can output the value of minutes as well for the user to be
able to see the number of minutes.
I'll make this bigger since these statements are fairly long.
And one last one, and this is going to be how many seconds are left within the countdown.
So seconds.
And we're just writing that out for the user to be able to see that.
Let's shrink this down, refresh our content, and we can see that we've got days, hours, minutes,
seconds left until our countdown is completed.
So now we need to bring in the JavaScript.
And the JavaScript is where all of the magic happens, where we can do all of the calculations in order
to account for what those values are.
So now let's select our elements.
Our main element that we're going to be using is going to be the DETE.
So this is going to be our input and we only have one input.
So selecting that element, this is the end date.
We can call it end date using documents and query selector.
Let's select that input and if we had more than one input.
So right now we only have the one input, but if we had more than one inputs, we could identify it
using the name as well.
So this could be an end date potentially as the name.
So going up here are going to add that in this is just in case you want to add in any additional inputs
so that they don't overlap and that we're always selecting that particular one that we want to use and
console log out and date.
And this is just to double check to make sure that we're getting that right input area.
So we are.
Next, we want to select all of these elements, and the main one that we need to select is the clock.
And then from the clock we can go down and we can select the elements that have the span of hours,
minutes and seconds.
So let's select our main element that has the clock and we can give it a name of clock as well as so
document.
And selecting the element with the class of clock is the one that we're going to be selecting here.
So for classes we use, we prefix it with period the same way we do with access.
And we want to add in an event listener on the end date element, so whenever that gets changed, then
we want to trigger off an event.
So attending an event listener, the event listener that we're going to use is change.
So whenever the value here changes that we're going to recalculate how much time is left until the end
time and let's set up an anonymous function are going to add in the prevent default.
So what this does in JavaScript, this prevents the default action.
So in case you have something submitting it, there's a default action sometimes to two fields.
So this is the way to prevent it.
And in this case, it's just an input field.
So it's not doing anything when we're changing it.
But I'll leave that in there for reference in case you want to use it later on to prevent the default.
So coming up in the next lesson, we're going to continue to build out this application, the countdown
timer.
So for now, go into your editor, open it up, build out the HTML that you're going to need in order
to provide the user the interaction screen that they're going to need in order to create the countdown
timer.
So they're going to need an input and they're also going to need an output view of how many how much
time is left before their end date and then using JavaScript, select those elements into JavaScript
objects so that we can make use of them in the upcoming lessons and code.