JavaScript Practice: Building an Analog Clock

It’s my second practice and I will be building an analog clock with moving hands. This is still part of Wes Bos's JavaScript 30 Playlist. Loved this because I was quite lazy today but didn't want to end the day without coding.

The Project:

The project involves creating an analog clock that displays the current time using three moving hands; the hour hand, the minute hand, and the second hand. The hour hand moves slower than the minute hand, and the minute hand moves slower than the second hand. The clock should update in real time, meaning it should change every second.

The Breakdown:

To create the analog clock, we need to break it down into three parts; HTML, CSS, and JavaScript. HTML is responsible for the basic structure of the clock, while CSS is used to style it. JavaScript is where the real magic happens, as it is responsible for updating the clock hands in real time.

Step-by-Step Process:

Step 1: Create the HTML Structure

The first step is to create the basic structure of the clock using HTML. We will create a div element and then create three child div elements inside it, one for each hand of the clock. We will give each child div a unique class so that we can access it later using JavaScript.

<div class="clock">
    <div class="clock-face">
       <div class="hand hour-hand"></div>
       <div class="hand min-hand"></div>
       <div class="hand second-hand"></div>
    </div>
 </div>

Step 2: Style the Clock with CSS

The next step is to style the clock using CSS. We will use CSS to position the clock's hands and give them their unique appearance. We can achieve this by using the transform property, which allows us to rotate the clock hands.

  .clock-face {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(-3px); /* account for the height of the clock hands */
  }

  .hand {
    width: 50%;
    height: 6px;
    background: black;
    position: absolute;
    top: 50%;
    /* code below allows hand rotate along the x-axis */
    transform-origin: 100%;
    /* pushes hand direction to the 12-hour mark */
    transform: rotate(90deg);
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0, 1.24, 1, 1);
  }

Initially, the hand element is placed horizontally. We use the transform-origin and transform (rotate) properties to keep all hands at the 12-hour mark. The transition and transition-timing-function allow us to animate the moving hands when it rotates to a degree.

Step 3: Create the JavaScript Logic

The final step is to create the JavaScript logic that will update the clock hands in real-time. We will use the Date object to get the current time and calculate the angle at which each hand should be rotated. We will then use the transform property to rotate each hand to the calculated angle.

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

function setDate() {
  const now = new Date();

// code to get the seconds of the time 

  const seconds = now.getSeconds();

//   Initially the rotation of the secondHand does not match the actual seconds and that's because we gave it an initial rotation of 90deg in the CSS codes. So we need to add that (90deg) to the secondsDegrees to make it align

  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

// code to get the minutes of time
  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

//   code to get hours
  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

// code to run the function every second
setInterval(setDate, 1000);

First, we use querySelector to get the div elements for the secondHand, minHand, and hourHand. We then create a function that gets time and rotates each hand based on the current seconds, minutes, and hours as shown below. I also highlighted some issues and their solutions in the code comments. The setInterval function is used to make sure my setDate function is running every second.

---

This is my second JavaScript practice and I am excited about the next few weeks. I learned more about querySelectors and how the simplest of codes can solve what looked like an uphill task. I can only look ahead with confidence and purpose.