Day02 of #100DaysOfCode

Hii folks 🙌

Today I have learned a few interesting things related to development as well as DevOps!

Project 02: CSS JavaScript Clock

Source: https://javascript30.com

Learnings:

• Today, I am tasked with building: a CSS JS Clock
• So, I was given the HTML, CSS to work with, so at least that was settled — the real problem was to move each hand of the clock around it and show the real-time, so I followed through with the exercises.

CSS JS Clock

Let’s start with the second hand. We need that to move every second. Obviously, we’ll put everything we need inside a function, but we then need to run that function every second. The most common way to do that is with a setInterval with which we call a function every 1000ms.

function moveHands() {}setInterval(moveHands, 1000)

Now we need to check for the current time. Luckily there are a few methods we can use to make it easier to use. To get the seconds, minutes and hours here are what I did:

const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours   = now.getHours();

Then, we need to set the transform-origin because by default the origin from which we transform an element is from the center (or 50%). All of our hands are positioned in such a way that we want to transform them from the right, so we set transform-origin: 100% and transform: rotate(90deg) to make sure the hands are facing upwards at 12 o’clock.

Now to calculate the degrees the hands need to be set at we do the following:

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

To turn the hands we add an inline style using Javascript with the following code:

secondHand.style.transform = `rotate(${secondsDegrees}deg)`

Wait, here is some visible glitch that is whenever the second-hand hits zero, the hands have this little reset they do. This is because going from 450 degrees (60 seconds) to 90 degrees (0 seconds) causes the hand to go backward. Because of the transition: all 0.05s the property transitions it and causes the visible glitch, which gets solved by this piece of code wrapping in the foreach loop

if(secondsDegrees === 90) {
    allHands.forEach(hand => hand.style.transition = 'none')
} else {
    allHands.forEach(hand => hand.style.transition = '')
}

TIL (Today I Learned)

• You can easily set inline styles using Element.style
• Transforming an element is, by default, at the center
• Setting Element.style.Property = '' resets the styling

So, this JS project is complete.

Other than above I have also learned some basic principles of DevOps

• Containerization vs. Virtualization: What’s the Difference?
• Difference between Docker Image and Container
• Kubernetes in Simple Words!

In addition to all these, I invested some time in debugging my own youtube named Pocket-Tube 🙌

That is all for Day02 ✅

Thanks for reading, See you tomorrow!