Clock Solution: Displaying Time

[00:00:00]
>> JavaScript time again, and forever. [LAUGH] So if you check out instead of clock/index.html, clock/finished.html, you'll find my finished solution. But there's a lot of different ways and different results y'all could have got from this. The output of yours might even look totally different, but here's what mine looks like.

[00:00:27]
All right, so let's see how we could do this, one way we could do this. But I'm also, again, very curious to hear what other people did that might be super different from mine. Okay, we've got this very exciting webpage. And we've got our little script tag for our clock script.

[00:00:44]
How did y'all go about grabbing the clock and the time element?
>> getElementById.
>> getElementById.
>> It's like const clock = document.getElementById('clock').
>> Clock, all right, great. Yeah, and IDs are our best friend, cuz we can just grab anything. So for example, maybe we also grab this, I'm gonna call it the text, even though it's a paragraph.

[00:01:16]
We could do like document.getElementById. But there's also other ways we could have done this, we could use a query selector or whatever. Okay, so I got some stuff to work with. And now we said, let's go back to those slides, maybe. Okay, we said we want to know what the current time is.

[00:01:37]
I don't wanna know about yesterday, I wanna know about now. So, how did we do that? There's a few ways, but essentially, they're gonna start with, I'm gonna call this currentTime, cuz why not? We can create a date object that represents time sort of with new Date(), date with an e, [LAUGH].

[00:02:09]
Okay, cool. So now if I console.log the current time just to gut check myself, and I inspect. Maybe, okay. [LAUGH] So I have some kinda time happening and it is at least the correct day, so we'll consider that good enough. All right, so now we don't wanna necessarily be telling them all of that.

[00:02:40]
Nobody needs all of that on their screensaver. So maybe I just want to get the time as a string, which I can do by calling the method toDateString(). Sorry, toTimeString(). All right, so now it's at least something a little bit more readable, but it's still a lot of info.

[00:03:07]
So maybe I just want this to look more like what you would expect a clock to look like wherever you are on the planet, which conveniently, there is another method called toLocaleTimeString(), which now just gives me a usable, reasonably short value. Okay, great. So I now have the value I need.

[00:03:33]
I'm gonna save this as a timeString, so I remember what it is And now I can, let's say, set the text of my text [LAUGH]. It's a bit confusing terminology here, but the .textContent property of an HTML element can allow me to assign some new value to the text content of this.

[00:03:58]
So I could do timeString, and let's see if anything happens. Good. I have a time, but it's just staying there. If I refresh the page, okay, it is changing based on when it was called. But it's always in the top left corner, boring. And it's always stagnant if I just leave the page open.

[00:04:24]
So, now we got to get our timing friends involved. So, what could I use to, let's say, update this time every three seconds?
>> Intervals.
>> Intervals, exactly. Okay, great. So now if I were to, let's say, take all of this stuff and put a function on it, put a bird on it, So this is It's gonna be, I'm just gonna give it a name for my reference.

[00:05:01]
So I'll call this updateTime(), for example. Thank you auto format. Talk about that a little bit later. This now is something that I could pass into a call to setInterval(). I want an interval cuz I want this to run continuously, not a timer which is just gonna wait and then run it once.

[00:05:24]
Sorry, not a timeout which is just gonna wait and run it once. So I'm gonna set the interval, I pass in my callback function which is updateTime, and then I need to pass in the number of seconds, and I gave you the arbitrary value of three seconds. But here is where I could mess with that and choose something else if I wanted to.

[00:05:45]
And so now, what did I forget to do? Now, I'm, there it goes. Yes, okay. Now let's refresh. I have to wait a little while to get the clock because setInterval() doesn't run at the beginning. So if I want the user to not get confused like I just did on my own page [LAUGH] and see at least some kinda time at first, I could call updateTime() once, so that I make sure to, now let's refresh.

[00:06:28]
Make sure to update it and then three seconds laterish, it'll update again.