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?

125 thoughts on “Javascript clock + css”

  1. Pingback: is keto diet safe
  2. you’re really a just right webmaster. The website loading pace
    is amazing. It kind of feels that you’re doing any distinctive trick.
    Also, The contents are masterpiece. you’ve performed a great job in this subject!

    Reply
  3. That is very fascinating, You are a very professional blogger.
    I’ve joined your feed and look ahead to in the hunt for extra of your magnificent post.

    Additionally, I have shared your web site in my social networks

    Reply
  4. Greetings, I do believe your website could be having web browser
    compatibility issues. When I look at your site in Safari, it
    looks fine however when opening in IE, it’s got some overlapping issues.
    I just wanted to give you a quick heads up!
    Besides that, fantastic site!

    Reply
  5. Great post. I was checking constantly this blog and I’m impressed!
    Very helpful info particularly the last part :
    ) I care for such info a lot. I was seeking this certain information for a very long time.
    Thank you and good luck.

    Reply
  6. Have you ever considered publishing an ebook or guest authoring on other websites?
    I have a blog centered on the same topics you discuss and would really like to have you share some stories/information. I know my viewers would
    appreciate your work. If you are even remotely interested, feel
    free to send me an email.

    Reply

Leave a Comment