Retired Techie
Getting older, not necessarily wiser!
Analog/Digital Clock – JavaScript – Part 7
Published on November 26, 2021 at 6:40 am by LEWIntroduction
In the last post of the series we created the CSS for the digital clock. Now we finish up our CSS by creating the analog clock part. This is where we get to try out some of the really cool things we can do with CSS.
Analog Clock Box
To the analogclock container we will add a few styles we have not used before. In this case we do define relative size for height and width, making sure the container is square. We then add a border radius of 50% (half the container width. This makes it a circle. We also add a border around the container making our basic clock face. And finally we set the background color to white.
.analogclock { /* Top analog clock div */
position: relative;
width: 20em;
height: 20em;
border: 1em solid #777;
border-radius: 50%;
background-color: #fff;
}
Analog Clock Numbers
This is where things get a little convoluted. If you recall from our HTML post, each clock number has two classes, and two divs. Our first class, which I labeled “dig” is the same for every number. It sets the start position using absolute, with a width and height matching the parent div (100%), and our start position of top and left. We then center align at the top of the div. Once we enter all twelve numbers in this fashion they will all appear at the center top of the clock face. I also slightly increase the number size.
.dig { /* top level analog face digits */
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
font-size: 1.5rem;
}
Next we add a second class for each div (dig1 to dig12). We use this class to rotate each number to its correct position. For example, dig1 rotates to 30 degrees, dig2 rotates to 60 degrees, all the way around to 330 degrees. The dig12 is not needed, as it is already at 0 degrees.
Now we add a div within each number div, and use it to rotate the numbers in the opposite direction to make sure all the numbers are vertical. Below is the CSS for digit 1.
.dig1 {transform: rotate(30deg);}
.dig1 div {transform: rotate(-30deg)}
Center Nut
The center nut is used to cover the center junction of the hands, therefore we need to raise it in the Z axis so it is above the hands. We will use the border radius trick to make it round, and make the width and height 1em. Since the analogclock face is 20em with a 1em border, we need to position it from top and left at 9em.
.centernut { /* Analog center nut div */
position: absolute;
width: 1em;
height: 1em;
top: 9em;
left: 9em;
border-radius: 50%;
background-color: #fff;
border: 0.5em solid #000;
z-index: 9;
}
Clock Hands Container
To make the hands work we must first create a div that matches our clock face to contain the hands. This just keeps everything organized. We want the to div to be invisible, so no colors. Note the ID instead of class.
#clockhands { /* Analog clock hands div */
position: absolute;
height: 20em;
width: 20em;
top: 0em;
left: 0em;
}
Actual Clock Hands
Because we want to use JS to move the hands they require an ID instead of a class. Since the hands are going to have several properties that are the same, we define them first before defining the individual hands. The new code here uses transfer-origin. We are making the bottom center the origin of the hands. This will be their rotation point.
#hour, #minute, #second { /* Analog clock hands defined */
position: absolute;
border-radius: 30%;
transform-origin: bottom center;
}
Now we need to define the individual properties that are different for each hand. These include width, height, top, left, color, and z index.
The math for calculating the position is not hard. I will use the hour hand for an example. With a width of 0.8em, the center is at 0.4em. Half the face width is 10em. So 10em – 0.4 em gives us a left position of 9.6em to place it centered left to right. With a height of 6em we need an offset of 4em to center the transformation origin.
#hour {
width: 0.8em;
height: 6em;
top: 4em;
left: 9.6em;
background-color: #000;
z-index: 6;
}
#minute {
width: 0.5em;
height: 8em;
top: 2em;
left: 9.75em;
background-color: #558;
z-index: 7;
}
#second {
width: 0.2em;
height: 9em;
top: 1em;
left: 9.9em;
background-color: #e33;
z-index: 8;
}
Conclusion
This brings to a close our CSS styling of the Analog/Digital Clock web page. Below is my sample CSS page that I created for this project.
Next post, we will tackle the java Script program that actually makes this clock run.
Analog/Digital Clock – JavaScript – Part 1
Analog/Digital Clock – JavaScript – Part 2
Analog/Digital Clock – JavaScript – Part 3
Analog/Digital Clock – JavaScript – Part 4
Analog/Digital Clock – JavaScript – Part 5
Analog/Digital Clock – JavaScript – Part 6
Analog/Digital Clock – JavaScript – Part 7
Add New Comment