Use JavaScript to tell time - JavaScript Tutorial

- [Instructor] In this next project we're going to be working with date and time in JavaScript. This will let us create things like calendars, clocks and do other functions on our pages that need to account for the date and time. We're looking here at the website for the Landon Hotel. A fictitious hotel with a website we've created for other courses. And they have an event calendar. So let's scroll down a little bit by clicking this button. That takes us down to this area and if I click Events that will jump me down to this Upcoming Events area with some upcoming events. Over here we have this NOW region which has nothing in it at the moment. But they'd like to have a clock so we can always see what time it is. Right click this and inspect it. So we can see how this is put together. So we have a div with an id of clock. We have our label inside. And then we have this region which is empty right now with an id of current-time. There's a JavaScript file attached to this page that we can work with as well. Let's take a look at that. So far there's nothing in here other than our boiler plate immediately invoked function expression and the switching on of strict mode. When the page first loads, we're going to want to set the time in that little region. Let's write a little code that will do that for us. So we know that when we want to do something when the page first loads we're going to add an event listener for DOMContentLoad just as we did before, DOMContentLoad. We need to handle that event somehow. So what we'll do, is we'll retrieve a reference to that region where the time is going to go. Just name is something very short, c for current time, and we'll use document.getElementById and we'll pass in the id for this region, which I'll copy here out of the developer tools. Paste it in. So now we have the region, we just need to put something in there. So we're going to set the innerHTML. I'm not totally sure if I'm going to need HTML for this or not but I usually like to start with that and then change it to plain text if it turns out I'm not going to need HTML. So let's just hard code something in here just to be sure that it's going to work. We'll say it's 3 o'clock. I'll save that. Give a little bit of automatic reformatting for prettier. And we'll switch back to Firefox and refresh. Okay, great, we're getting a time in here. It's not actually updating and it's not current. So we can fix that as well. Instead of setting this to a hard coded time, we're going to need the real one. And to get the real time, we need to use a built-in JavaScript object called Date. And the way we'll do that is by creating a variable I'll call it d for date. Now I'm going to invoke the Date object's constructor. The built-in object is called Date, with a capital D like this. And I'm going to call new and invoke this object as a constructor which is to say a function that's the same name as the built-in object. In this case I'm going to call it with no arguments. When I call it this way, it gives me the time right now and it gets that time from the machine where it's running. Specifically in this case from my web browser on my machine. So whatever time it is right now, on my computer, is what's going to be shown there. But having created this variable by itself doesn't actually do anything. I haven't change the innerHTML yet. So far in that variable d, I just have some kind of internal representation of what the date is in JavaScript terms. What I need to do is convert that into a readable time that I can use on the page. The simplest way to do that and a good place for us to start, is by using a method on the Date object called toTimeString. So I'm going to use my date object that I created, letter d, I'm going to call toTimeString, like this. So we've replaced that hard coded time with this toTimeString. So I'll save this and we'll switch back to browser reload and see what it looks like. Holy moly, that's really long isn't it? Not exactly nicely formatted, but it is the real time. Now I could do some formatting on this. Lop off the time zone here, this offset, but I'd still have this in military time, with seconds and all that. I don't know if we really need that right now. So coming up we're going to explore some of the other methods that the Date object offers. That can give us something that will be a little more readable. This is a good starting point though. And it's an easy way to make your page self-updating without any server-side interaction.