The clock lesson in JavaScript30 guides you through building a digital representation of an analog clock using HTML, CSS, and JavaScript. The clock that’s created displays the current time via hour, minute and second hands and updates in real-time.

The project is already set up with the following:

• The HTML structure for the clock, including a container element to hold the clock and a couple of elements to display the hours, minutes, and seconds
• CSS to style the clock face and hands, along with a background image

I wrote JavaScript code to animate the clock hands and synchronize them to move in real time. It sounds straightforward conceptually, but it was tricky to implement. I had to make use of the `Date` object to get the seconds, minutes and hours needed to animate the clock hands. The hands had to be styled using a transform/rotate to change from rendering horizontally (from 9:00 to 3:00 position) to vertically (12:00 to 6:00 position) and to rotate from their endpoint instead of centerpoint. Wes’ guidance was critical in understanding all of this and solutions to the issues.

Time was updated every second via the `setInterval` function in tandem with a function that used the `Date` object to get the hours, minutes and seconds needed to render the clock hands at the correct positions. CSS transitions were also used to control the animation of the clock hands.

After completing the project, I customized it further by changing the size and color of the clock hands (hours is shortest, minutes is medium and seconds retain their original length). This called for the transform-origins to be changed so the clock hands rendered from their left sides and for removal of the transform rotations from css and placement in the JavaScript file to be calculated there using JavaScript and a new value.

[edit 2023.01.08] I added the date at the bottom, below the digital clock. It shows the weekday, month, date and year, so today, for example, would render “Sun: Jan.08.2023”.

With that done, I changed the colors of clock hands and added a new background, to tie in the new look. I then added a digital clock at the bottom, which updates in real time with the analog clock above it and shows hours, minutes and seconds in the same colors as the matching clock hands.

The main JavaScript features that were used in this project were:

• functions
• Date()
  • getSeconds()
  • getMinutes()
  • getHours()
• element.style.transform()
  • rotate()
• setInterval()

CSS styles that were used included:

• transform-origin
• transform: rotate()
• transition
• transition-timing-function: cubic-bezier()
• transform: translateY()

The formula used to convert the seconds into degrees so that the seconds hand could be properly animated was interesting. It’s (seconds / 60) * 360. Basically, the current number of seconds is divided by 60, which gives a value from 6 degrees ((1 / 60) * 360) to 360 degrees ((60 / 60) * 360). This tells us where to point the seconds hand. The minutes hand used the same formula, and the hours hand divided by 12 instead. Oh, the minimum value was actually 0 degrees (0 / 60), not 6 degrees. The value was further altered to change the starting axis, but the principle is the same.

Here’s a link to my deployed version: https://vish213-clock.netlify.app/