Commit11 //#JavaScript30 - Day 2 [JS Clock]

Photo of our cats Dandy & Rolf lounging in my office

I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!

Today's challenge comes from JavaScript30.

OK. Jumping into this a bit late in the day. Nicely enough I was able to meet with one of my TAs and they helped me with a project that I couldn't get to work. It's up and running now. You can check it out here: Commit7 // Breakout Project! [The Pong Game]

They also gave me a few resources to help with my coding journey.
You can find those here:
iTerm2 - This is a replacement for Terminal
tldr - This is a community effort to simplify the beloved man pages with practical examples.
Homebrew - This is a free and open-source software package management system that simplifies the installation of software on Apple's operating system.

JavaScript30 - Day 2

The instructor in today's lesson combined the style and script all into the HTML document. First we review some style elements.

    .hand {
      width: 50%;
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
      transform-origin: 100%;
      transform: rotate(90deg);
      transition: all 0.05s;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }

The transform and transition are all set up to make the clock hands in a functional way so it appears like a clock. The timing-function is to give the clock hand a bit of a "snappy" appearance, so you really see the hand ticking.

  <script>
    function setDate() {
      // console.log(`hi`);
      // we ran console log for this, so we knew if the function was counting off properly
    }

    setInterval(setDate, 1000);
  </script>

We started off with this minimal function to make sure the time was ticking off. Running the console log for "hi" so you would see hi appear about every ~1second.

function setDate() {
      const now = new Date();
      const seconds = now.getSeconds();
      console.log(seconds);
    }

The console log for seconds here is now counting off the seconds.

Now we need to associate it to the seconds clock hand.

const secondsDegrees = ((seconds / 60) * 360)

Before that we need to make the seconds match the degree of the rotation of the clock hand. So we use the math above.

const secondHand = document.querySelector('.second-hand');

    function setDate() {
      // console.log(`hi`);
      // we ran console log for this, so we knew if the function was counting off properly
      const now = new Date();
      const seconds = now.getSeconds();
      const secondsDegrees = ((seconds / 60) * 360)
      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
      console.log(seconds);
    }

Then we write a new variable to pull in the .second-hand to tie it into our function. Next we pull in our new secondHand variable and style it to rotate accordingly, pulling in the math of secondsDegrees written above.

This doesn't get us all the way around the clock because of the 90deg offset written into the style, so we need to offset it in the script.

const secondsDegrees = ((seconds / 60) * 360) + 90;

Now it's time to move on to doing the minute and hour hands.

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

connect the style to the script.

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

Replicate the work we did for the seconds, to the minutes.

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

Replicate again for hours. Update the hourDegrees math accordingly.

The thing that I'm unsure was explained during the lessons is that getSeconds, getMinutes, and getHours are all innately pulling in from my operating system? At least that's how it seems to be.

I just always want to make sure I understand where my data is coming from in the case that it could go wrong or be manipulated somehow.

That's it!

GitHub Repo for Clock

Check out the Clock here
I try to use my own photography when I can. This picture is from my Twixmixy Design days where I ran a boutique in house web development and marketing firm.

Thoughts? Questions? Sound off below!