Set Your CSS Clock

PR0 Challenge 7.3 [100pts]


The basic clock you made in the last challenge is awesome, but it’s got two major flaws: first, the time is wrong; second, the hands don’t move. We’ll take care of the animation part in the next challenge.

However, the time problem is more complex than you might first think: can you identify what’s wrong with the time on this clock that has nothing to do with the actual time? Let’s learn to set the clock.

STEP 1: Find Your Clock Thimble

Start by finding your Thimble Project from the previous challenge. If you did not complete the "Assemble a CSS Clock" challenge, make sure to do that firs. To find your project:

Log in to Webmaker (top-right corner)
Click on your username (top-right) to reveal a drop-down menu, select:     Your Projects  
Find the project you named "Your Name's CSS Clock" from the list;

Your clock should look like this:

You should also have these basic files in your Thimble project:

  1. index.html
  2. style.css
  3. ios_clock.svg

We'll be spending most of our time in this challenge hacking style.css.

STEP 2: Experiment with Angles

It's really quite simple to move the hands of this clock around the face to point at different numbers. You've probably already discovered how to do that the previous challenge.

You can just find and change the ###deg value in the transform: rotateZ(45deg); line for each of the .hours, .minutes and .seconds classes in the style.css file.

But how does the transform: rotate property work?

The letter Z in rotateZ provides a clue.

In space, we occupy 3 spatial dimensions. Two of them are sometimes called cardinal directions on a map or a compass and labeled E/W and N/S. In geometry, we imagine these directions to be just like number lines, called "axes". We label the three axes of 3D space X, Y, and Z. You can imagine X to be like E/W on a map and Y to be like N/S.

Coord system CA 0.svg
By Jorge Stolfi Own work, Public Domain

A web browser can simulate and visualize a 3D space as a virtual world. So just like in real space there are three different directions that we can rotate objects in and three corresponding rotate functions we could use to transform elements in our web page:

  • rotateX(###deg)
  • rotateY(###deg)
  • rotateZ(###deg)

The virtual browser space has a very specific orientation as well: the Z-axis points in/out of the screen, the Y-axis points up/down and the X-axis points right/left. So when we use transform: rotateZ(45deg);, it rotates an element 45 degrees around an imaginary line pointing out of page. If that element is an hour hand, it spins it around the clock face.

Try to change the transform: rotateZ() degree values in the style.css file.
Try replacing rotateZ() with rotateX() or rotateY(), or add all three to see how you can manipulate the elements in 3D space. Can you see it?

Two more points that are helpful to know:

  • The Z-axis rotation is "clockwise", meaning that every additional degree of rotation moves in the same direction as a traditional clock hand, which is convenient here;
  • The transform-origin property is also very important because it sets the spot on an element where it will rotate around. You can imagine this as a virtual pin you can stick into the screen to pin down an element before spinning it around.

STEP 3: Calculate the Angles

So now that we know how to move the hands around the clock, we need to determine their precise positions for any given time.

For example, if I told you it was 4:27:51 (4 hours, 27 minutes and 51 seconds, or 4h27m51s) can you tell me what the hour hand, minute hand and second hand angle values should be for rotateZ() function?

The problem above is basically a conversion problem: convert from time to angle.

Clock Conversion Factors

We need to know the conversion factors to do the calculation: degrees per hour (deg/h), degrees per minute (deg/m) and degrees per second (deg/s). Finding them is easier than it seems.

First, you need to know the number of degrees in a circular clock face. How many degrees are there in a circle?

Second, you need to know the number of hours, minutes and seconds on that same clock face. So, how many hours, minutes and seconds are there on a clock?

Once you have all of these numbers you will be able to calculate the conversion factors:

  • deg/h = degrees in a circle / hours on a clock
  • deg/m = degrees in a circle / minutes on a clock
  • deg/s = degrees in a circle / seconds on a clock

An Important Complication

Figuring out the angular position of the hour hand at 4:00:00 is as simple as converting 4 hours into degrees. The math is simple:

hour hand angle = 4h x ( deg/h )

The answer is 60º for the position of the hour hand at 4:00:00. However, this is not so simple for more complicated times like 4:27:51. This is because the position of the hour hand also depends on the minute and second values.

It may be hard to notice on a clock, but the hour hand moves continuously every second. It doesn't just jump from the 4 to the 5 position. When the hour changes the hour hand moves a little bit at a time. At 4:30:00, you'll find the hour hand halfway between 4 and 5 position on the clock.

Having some trouble picturing it? Well take a look at the two examples below. Which one looks "right" for 4:27:51 to you? Notice the minute and second hands are in the same places for both, but the hour hands are not.

Converting to Decimals First

The clock on the left looks wrong because the hour hand should be somewhere between 4 and 5 at 4:27:51. So how far should the hour hand be when the minute hand is at 27 minutes? It's a little tricky. What we actually have to do is convert 4:27:51 into a decimal time value.

To convert the time into a decimal is actually pretty simple and the equation is:

decimal hour = hour + (minute / minutes in an hour) + (second / seconds in an hour)

For 4:27:51 this becomes:

decimal hour = 4h + 27m * ( 1h / 60m ) + 51s * ( 1h / 360s ) = 4.46h

Now we can go back to the conversion to figure out the angle for 4:27:51

h-angle = 4.46h * ( deg/h )

The answer is 69.6º for the position of the hour hand at 4:27:51.

The Complete Solution

So following the logic of the previous sections, the hour hand position depends on the hour, minute and second. Likewise, the minute hand position depends on the minute and second. Only the second hand position is completely independent. Therefore, the following equations can be used to calculate the positions:

h-angle = [deg/h] * [ h + m * ( 1h / 60m ) + s * ( 1h / 360s ) ]
m-angle = [deg/m] * [ m + s * ( 1m / 60s ) ]
s-angle = [deg/s] * s

STEP 4: Set the Time

Now that we know how to calculate the angular position of the hour, minute and second hands for any given time, lets test out our understanding by setting our clocks for a couple of fun times.

Calculate the h-angle, m-angle, and s-angle for the times below:

  1. STEM start = 9:00:00
  2. STEM end = 12:00:00
  3. Sunset = 5:28:00
  4. Sunrise = 6:41:00
  5. π O'clock = 3:14:15
  6. Marathon Winner = 2:08:37
  7. Why is 6 Afraid? = 7:08:09
  8. 70mph Drive to NJ = 11:16:17

STEP 5: Share Your Work

Once you've got the hang of setting the time, pick your favorite time to set. Edit your thimble to show the time and add a heading/title to your clock page. Take a screenshot and submit to Edmodo