3 JavaScript Projects for Beginners

2.1 Creating a Countdown Timer

Hello and welcome back. In this lesson we're going to start with our first project. We're gonna create a countdown timer. And now in this particular lesson, we're gonna create a countdown to January 1st in the year 2020. So if you're watching this tutorial after that date, then probably you want to pick a different date to countdown to. So let's take a quick look at our HTML in CSS just to see, kind of, what our starting point is. If we jump into our Settings, first of all, you'll notice under the CSS tab that we're using Bootstrap 4 here. And then under JavaScript, we're using jQuery. Now I want to add one more library here, and that library is called moment.js. So I'm gonna search under the JavaScript tab again for moment, and here's moment.js. Now before we do this, let me go ahead and say that all of the starting code, you can find the link for the starting pin in the course notes for this lesson. Once you've opened up that starting pin, let's go ahead and click on fork to create a new copy of it. And in this new copy, then we'll jump into our setting, I'll jump into JavaScript. And again, I'm gonna search for moment and here's moment.js. I'm gonna click on that and it will add it to our project, we'll Save and Close. Now, I usually try to avoid external JavaScript libraries unless I really need it, but one of the aspects of working with JavaScript that I almost always use a plugin for is when I'm dealing with dates. Especially when have to do something complex with dates, because dates are really painful to work with in JavaScript. And so almost anytime I'm dealing with dates and JavaScript, I will use the moment.js framework, because moment makes it really, really easy to work with dates and JavaScript as we will find out shortly. So again, let's take a quick look at our HTML. We are using some Bootstrap markup. And we have this div with the class of container that everything is contained inside of, and that container basically will limit the width of what's inside it. And inside that container, we have a row, and inside that row, we have a single column. So all of this is Bootstrap markup here. Inside that column we have our clock. And our clock is contained inside a card, and and this is another Bootstrap class here. And the card simply defines what this area here with a white background looks like. That gives it a white background, we have some rounded corners. And then inside any card that you create in Bootstrap you want a div with a class of card body, because that will add some padding to the edges of your cards, so that the content is right up against the edge. So inside the card body we have our card title. So the clock is really the meat of what we need to understand when we start putting this together in JavaScript. So we have we have the clock ID up here, which contains everything including the title and each of these sections. But then we have these divs, let's stretch this out a little bit. We have these divs with a class of clock section. Each of these sections contains a square with a number in it, and then the label below it. So the square with a number in it is this div with a class of value. And we see there is a div with class of value in each of these sections. And then below that we have our clock-label class, which again, is the label text that goes below each of those sections. So we're going to be accessing or point to each of those items, especially the value items, as we go through a code. So you'll notice that each of these items of a class value also has an ID on it. These are the ID's we're gonna be pointing to whenever we update the text in each of those boxes, so we are gonna be using the ID of days, hours, minutes and seconds. So then you can go into CSS and see some of the styles that I use to to build this out, nothing really fancy here, pretty straightforward. So you should have a good understanding of what's going on there. And so now, in our next lesson, we'll jump into our JavaScript tab here and we'll get started and making this work. So thank you for watching, and I'll see you then.