Javascript clock + css

I am doing the Javascript30.com course, and we have to do a JS clock with seconds, minutes and hours. This is the code:

<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>

And the JS:

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

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

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

   const mins = now.getMinutes();
   const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
   minsHand.style.transform = `rotate(${minsDegrees}deg)`;

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

setInterval(setDate, 1000);

setDate();

The + 90 part in the setDate function is the offset – because we are making a JS clock, we transformed the arrows to be at 90 degree angle using CSS, so this is just fixing the offset.

I understand everything except the statements assigned to hourDegrees and minsDegrees.

Why is the educator adding + ((seconds/60)*6) and + ((mins/60)*30) to hourDegrees and minsDegrees?

19 thoughts on “Javascript clock + css”

  1. Each 60 second prepares minute hand for its next position, and each 60 minutes tick does same for the hour hand.

    Assume that time is 17:17:41

    Calculate how much degrees minute hand make right now

    minsDegrees = (17/60) * 360 = 102

    Plus;

    Calculate how much degrees the elapsed seconds made our minute hand made;

    theDegreeFromSeconds = (41/60) *6= 4.1

    minDegree = 102 + 4.1 = 106.1

    We multiply by 6 beacuse each elapsed second made 6° on clock btw. It is same for the hour degree calculation.

    Reply
  2. TL;DR
    without ((seconds/60) * 6) and ((mins/60)*30), a change in minute(ie 15min to 16min after 60s completion) and a change in hour(ie 3:00 to 4:00 – after a 60 minutes completion) will rotate their respective hand straight from one point to another and yes transition will make it smooth so that rotation movement won’t be noticeable.

    Adding ((seconds/60) * 6) ensures a marginal increase in the minute hand after each second count. the maximum degree the minute hand can change is 6deg calculated from 360deg/60mins. Each second count will now cause a 6/60s = 0.1deg rotation movement in the minute hand which will be equivalent to 0.1 * 60s = 6deg after 60s count. When you take a careful look at the minute hand, you will notice a subtle and marginal rotation movement in the minute hand after EACH SECOND COUNT. each small marginal movement is 0.1deg. without that, the minute hand moves straight from one point to another.

    Adding ((mins/60)*30) also ensures marginal increase in the HOUR hand after each MINUTE count. the maximum degree the minute hand can rotate is 30deg calculated from 360deg/12hours.Each MINUTE COUNT not second count will now cause a 30/60mins = 0.5deg rotation movement in the hour hand which is equivalent to 0.5 * 60 mins = 30 deg. 30 deg will be the maximum rotation movement from one hour to another. ie 3:00 to 4:00. a marginal movement can be seen from the hour hand after each minute count. Each small marginal movement of the hour hand is 0.5deg. *without ((mins/60)30) which cause these small marginal movement, the minute hand will move straight away from one point to another.

    Reply

Leave a Comment