Overview of the challenge

Wes Bos gives out a bunch of code and I'm supposed to make everything work by the end of the month?

Today's December 2nd, and this time it's an analog clock:

Again I had to take the start HTML and CSS files as a base, though this time I was supposed to change the CSS a bit to get the clock's hands to transition just right. I chose not to do that and instead got rid of the transition and transition-timing properties altogether, so I could get on with JavaScript right away.

Train of thought...

JS and CSS Clock

Build a clock that shows the user's current time. Its hands should show the exact hour, minute and second.

1. Ignore the CSS part of this exercise, you're doing this challenge to practice JavaScript.

2. Create 3 variables that reference the clock's hands and add an event listener to each one of them.

3. Build a function that gets the current time from the window object when the page has finished loading. Then see if you can pick the hour, minute, and seconds separately as variables or something like that.

4. Each time one of those variables change, tell your function to move (transform) the clock's hands by a certain amout of degrees clock wise (so positive degrees beyond 450DEG.) (Look for time change instead of variable change.)

5. Maybe make a function that re-starts the hands' position to 90deg everytime an hour has passed? (Nope.)

6. Oof, first create functions that work, then figure out how to put them inside event listeners.

7. And just remove the transition property.

8. Add a div to store the current hour, minute, and seconds, so it's easier to read the clock.

What I learned

The setInterval function, and how you can use it to iterate a function based on time.

And it's done!

You can find my solution to this challenge in its repository. You can also try it out live on CodePen!