Make the clock move forward second by second

- [Lecturer] So, this clock we created is great at showing the time the browser window was recently updated, not so great at showing the current time because it doesn't move. That's because the script we've created is static, it runs once, when the browser is loaded, and then does nothing. So, if we want the current time, we have to keep reloading the browser. Of course, you could sit here and do that every second, and the clock would move, but that's not practical by any means. We need to somehow rerun this script every second to update the position of the second, minute, and hour hands.

To do that, we'll first wrap all our script in a function. I'll call it: runTheClock. And just indent all the contents, we see the inheritance here. Then, we need to run this function every second. That's done using the setInterval method. setInterval repeatedly calls a function, or executes a code snippet, with a fixed time delay between each call. That's exactly what we want.

The time delay out of the box is in milliseconds, so we need to reduce that down to seconds 'cause we don't have to do this on a millisecond basis, that's just a waste of resources. Back in my code, I'll make some space at the bottom, then I set up a new variable, I'll call it: interval. This is just so we can refer to the setInterval later if we want a bigger script. Then, I set an interval and this interval we'll call: runTheClock every thousand milliseconds, which is one second.

So, every second, we run the full function, we get the date, we the find the hour, minute, and second, then we do the math to figure out what that equates to on the clock face, and we rotate the items to position correctly. Save that. Load it in the browser. And the clock works. Awesome. You'll also notice, we have this really nice animation thing going on with the arm here. That's powered by the transition: transform point five second ease-in-out section down here in the CSS.

This looks great, as far as I'm concerned at least, and it works. However, there's a bit of a problem, and we have to wait until the second hand goes all the way to the top to see it and when you see it, you'll see it's a real problem. Here we go, pay very close attention to the second arm right now. Oh, what happened? Instead of going from the 59th second to the top of the clock, it went from the 59th second and then spun back around to the top on the other side.

That looks pretty weird. What's happening here? Well, we're getting the second position and then we're converting it to a number of degrees on a circle that is 360 degrees. So that means, when the second goes back to zero, the position of the arm goes back to zero and we get that weird motion. Now, it's easy enough to solve, we can take the transition away, so I'll just comment it out, now the second arm will move on a tick, tick basis. This still looks great and we don't get that skipping action, but, we're lacking the finesse of that nice animation.

So, in the next movie, I'll show you how to get around this problem.