Day 13 - #100DaysofCode - #Javascript30 - Day 2 - CSS + JS Clock

Song of the Day

Today I completed Day 2 of #Javascript30

The final script looked like this:

<script>
  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();

</script>

Below are some notes from my experience:

How do you run the word 'hi" every second in Javascript? By using the set interval function like below:

function setDate() {

console.log('hi')

}
  setInterval(setDate, 1000);

Keep in mind that 1000 ms = 1 second.

In the lesson it ask us to get the hours, minutes , and seconds and set them to variables like so:

  const now = new Date();
  const hour = now.getHours();
  const mins = now.getMinutes();
  const seconds = now.getSeconds();

Next we use the query selector to select all the elements with the .second-hand, .min-hand, and .hour-hand class.

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

After getting the seconds of the current minute, and in order to get the degrees you should divide the seconds, minutes, and hours by 60, 60, 12, respectfully and multiple by each by 360.

const secondsDegrees = ((seconds / 60) * 360) + 90;
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;

Lastly, we had to have to take each class and apply a styles to it.

secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;

CSS

    .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);
    }

Transform

I learned a some new things about the CSS transform property during this lesson. According to w3schools, The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

The property has many values that can change transform an element but the ones that this lesson focused on was

Transform-origin

is something that allows us to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. The transform origin is known as the fixed point of an element and is usually the center of the element, but can be changed/customized with the use of transform origin. Transform rotate rotates an element around the transform origin.

Transition

CSS transitions allows you to change property values smoothly, over a given duration.

The transition-timing-function property specifies the speed curve of the transition effect

#100DaysofCode Github Repo