DEV Community

Brittany
Brittany

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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)`;
Enter fullscreen mode Exit fullscreen mode

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);
    }
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)