3 JavaScript Projects for Beginners

2.2 Coding the Countdown Timer

Hello, and welcome back. Now that we have a pretty good idea of how our HTML and CSS is set up, we're gonna get started in this lesson making this countdown timer work. So the first thing I wanna do is very simple, is I want to create a target date variable here. And we're gonna set this targetDate equal to January 1st in the year 2020. But again we're gonna be using Moment.js to do this. And the way we create a new date in Moment.js, is we simply say moment, and then in parentheses, we can type out our date. And it needs to be a string first of all, and we could do it with dashes. So we could say, 1-1-2020, and that would work just fine. We could also do 1/1/2020, that would work as well. So we've created our target date, and what we're gonna do is, we're gonna create a loop that's gonna run over and over again. And we're constantly going to check the current date and time, and compare that time, that current time, to this target date to see how much time is left. And so in order to get this done, let's go ahead and create kind of a skeleton of what we are doing here. So I'm gonna create an interval in Javascript, that again, it's going to run over and over again. Now since we're counting down seconds, we want it to run at least once a second. However, I've noticed that if we set it to one second, it's kind of iffy on if it's gonna work right. And I've even tried it at half a second, and even at that interval, sometimes it's a little choppy. And so what I wanna do is, I wanna run it every ten milliseconds. That way, it's running often enough that we don't get any weird jumps. So let's create our interval. In JavaScript we do that using the setInterval method. And the way we do that is we have a function comma space and then we have the interval which in this case is gonna be 10. It's gonna run every 10 milliseconds, and this number here is in milliseconds. All right, so our function here, let's go ahead and create that function, we'll have our opening and closing curly brackets for that function. And then inside this function, we're going to calculate the time remaining. So I'm just kind of creating the skeleton of what we're doing here, and we'll kind of flesh it out as we move forward. So we also want a function here that's going to update our clock for us. And one thing we can do is we create a few more variables up here to store the pointer to each of these elements here. And we have an ID, if we go back to our HTML, we're looking at these divs with a class of value on them. So the first one has an ID of days, the second one has an ID of hours, and then we have minutes and seconds. So let's point to those. So let's create a variable called days, and we're gonna set it equal to, and we're using jQuery to point to this. So if you've never used jQuery before, the way you do this is you put $ sign and then in parentheses and quotation marks we're gonna put in the CSS selector for the item we're pointing to. We're pointing to the div with an ID of days, so we're gonna type #days. So then we'll do the same thing for hours, minutes and seconds. So now we can access those easily just by using these variable names that we've created up here. So let's create another function here, and let's call this function updateClock. And what we need to do is we need to pass into this updateClock method, the amount of time that's left. We don't really need to know the start date and end date for this updateClock method, we just need to know the duration between now and then. So let's create a variable to pass into this function called remainingTime. So any time we call this function, we pass into it the time remaining between then and now, and then we'll use the updateClock method to display the difference. So now that we've got the skeleton of our code there, in the next lesson, we'll go through and flesh this out and make our clock work. So thank you for watching and I'll see you in the next lesson.