The previous lessons we saw how we can produce this countdown timer, and it will count the number of
days, hours, minutes, seconds until we hit the selected date and that date change.
So that gives us an accurate representation of those values.
Now, let's make this a little bit better, because if we were sitting here, we don't see the seconds
changing.
And right now, if I was to select that time again, the seconds would have gone down because there's
not as much time.
So this really isn't quite a countdown timer yet.
So let's update it.
And we're going to use intervals in JavaScript in order to accomplish this.
And the way that intervals work is they allow us to set certain time outs within JavaScript.
So I'm going to set a global value and we can call it the time interval.
And right now, we're not going to attach any values to it, so using that time interval, whenever
we start the clock, this is where we want to start all of that interval content.
And have that reoccurring value constantly launching, so we've got our intervale and we also want to
clear the interval whenever we set a new time.
So we'll do that as well.
So right now, within the start clock, I'm going to add in another function.
This is a function within a function and I'm going to call it update counter.
So this will serve as a way to update our counter constantly.
And then just outside of that, outside of the update counter function, I'm going to run a launch update
counter so that we launch the update counter and I'm going to use that interval, that time interval
to set an interval.
So using JavaScript set interval.
And as you saw, what that does is it executes quite a snippet of code repeatedly within a fixed time
delay.
So this is a little bit different than when we're setting that interval as this will continuously run
until we stop it from running.
And what we want it to run is constantly update counter and let's update that every second.
So I show you what happens now.
And when we refresh, we select a time and now we are updating that counter every second.
Now we'll show you how to clear out that interval.
And the way that we're going to clear out this interval is that we want to clear that out if this date
changes.
So if the user changes the date, we want to clear the interval where we've got our clear interval.
So let's do that first, where we clear an interval and then we just need to identify the interval object.
So we had a value called time interval, and that was how we were connecting that interval object.
So if we clear that out, that interval should stop.
So our clock starts when we change it.
And then if we change it again, then it's going to start again.
But it's going to be clearing out that interval that's running in the background.
So it's not going to have to interval is running in the background.
And we can also clear out that interval if the time is set to stop.
So let's set one more global variable.
So a set time stop and we'll set it to true.
And once we launch it and once we start it, we're going to set this to false.
And if time stop, so check to see if time stop is true, then what we're going to do is we're not going
to we're going to only have the interval if time stop is true or else we're going to clear that interval.
So the same thing that we're doing over here where we're taking that interval and we're going to clear
that out.
So now all we have to do is check to see if the value of time left is less, the total time left is
less than zero.
And if it is, then we just set time stop to false.
So check to see.
And this is coming back from that T.L. object, and that was the total for T is less than.
And remember, we had the total that we're setting there.
So actually that should be total.
So if this value is less than zero, then we want to stop the execution of the interval.
So take time, stop and set that value to equal force.
So that should stop our time.
Let's try that at.
So going into evalu we see that the interval is clearing and now if we have a negative value, we're
not going to have that countdown because we cleared the interval and it's not going to be happening
anymore.
So it's only happening on those positive values.
So now the countdown works, but only if it's in the positive.
And that means that this countdown will actually stop once it hits the right value.
So go ahead and try this out, add this into your own application and update that interval.
And coming up next, I'm going to show you how you can store this in local storage so that every time
you refresh the page, we're going to store that value of the current time of the countdown.
It's coming up.