Welcome back, this is a lesson where we do a quick overview and a code review of what we're doing and
what we've been working on in the earlier lessons.
So when I refresh the page, I see that I've got already an existing value sitting within my input field.
And we've added that in so that we can leave the page, go back to it.
And we always have our countdown timer counting that down to whatever value is sitting within the input
field.
And when we change this, this is actually resetting the countdown value to the new date.
And even when we refresh it, we still have that same date and time.
So that's exactly what we wanted.
And this is exactly what we wanted for our countdown timer.
And once we reach our date, we want the countdown timer to stop running and we're still putting them
down the calculations here.
And we can also update this to date reached or something like that if we wanted to as well.
So now going into our code, we set up our main input area for the user to input a date as well as where
we can output the clock values.
And we strategically added in classes of days, hours, minutes and seconds.
And these actually are going to correspond to the object names that we're going to use later on when
we're calculating the amount of time left.
And the reason we did that is saves a little bit of time with the coding and also outputs it more directly
into the HTML.
So first we started out by selecting our elements that we needed to use from our HTML and putting them
in as JavaScript objects.
So we had our main input area and we went specific with the name of it.
We only have one, so we could have stuck with input as well.
But we did want to show you how you can do more specific selections of inputs in case you have more
than one on the page.
Also, you selected the whole clock element with all of the content that's contained within insight
into the object.
Then we set up a few global variables that we needed to make use of.
So that was the interval time and the stopping of the counter also set up a variable to check to see
if we have any content in the local storage.
And if we do have an item called Countdown, then we know that we've already been through this before
and we've already set account countdown time so we can utilize that within our code where we're outputting
that.
I'm going to get the console message there because we don't need that.
So we know that if there is a save value, we can start the clock with whatever that save value is.
And we also want it to update the input with whatever that save value is.
And notice the one thing that we was different here with the input type that is date.
We need to specify that not only has value, but value as date in order for it to output properly.
We added an event listener for that particular field as well.
So if anyone changes those values, then that's where we set the new countdown time we added in to prevent
default.
And quite honestly, it's not actually needed because we don't have any default actions on that change.
But in case we did, or if we had a button that we were selecting, we'll keep that in there.
Also, we want to clear out any existing intervals.
So the countdown timer is on an interval and this will run blocks of code.
So if you have multiple intervals running, that's not a good thing, and especially if you're not displaying
them.
So we want to have that one interval running so we clear out whatever interval is there and we reset
all the all of the calculations.
We get a new date value.
We return that date value and we set it in the local storage.
So if the pages are refreshed right at that moment, we're still going to have that within our local
storage.
We send it over to start the clock and we set the stop time to true.
So that means that we're not stopping the time in our start clock function.
We have a function within there and that's to update the counter.
And we also launch a function in there that updates the counter.
We can remove this one and then it can run off the interval one.
So there might be a little bit of a delay on the change.
So that's why we've kept that one in.
We have enough stop time.
So we're checking to see if that stop time is still true.
And if it is, then we can set that interval.
And if it's not, then we want to clear that interval and the interval is running that update counter.
So it's running this function, the content here and within here.
What we're doing is we're calculating how much time is left between the current time and our selecta
time in the input using our time left function.
We're getting the current time of our system.
So a new date and then we're calculating the difference.
So bring it down to the Unix timestamp for January 1st.
Nineteen seventy, calculating out the minutes, hours, days, seconds, and then returning it within
an object format so that we can pick that information up and loop through that object.
And as we loop through that object, we're selecting out all of the properties which were the values
here that we set.
Within that object, and we're checking to see if we can use query selector and they actually exist
within our HTML as classes, so are indicating it by the DOT.
So we're looping through and if the classes match our object names, then we know that we have a match
and we want to output that value and update the inner turmoil of that element.
So we've got that condition there and we're updating that inner HTML.
So we're looping through that full object and outputting and updating the appropriate elements that
are needed.
And that's it, so that's built out our application, and coming up next, I'll do a quick bonus lesson,
will update some of the styling and update this and make this look a little bit better.
But as for the JavaScript, this concludes the JavaScript part of this section.
So hope you enjoyed it.
And thanks again for taking the section about the countdown timer.
Try it out for yourself.
Have some fun with it.
Update the code and try out all the different functionality that we looked at in the earlier lessons.