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

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!

--

--

--

https://www.linkedin.com/in/itskushagra

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Express developement & production on Plesk

If you think GatsbyJS is only a static site generator, you are missing the point

Add dynamic data to Chart in LWC

Day01 of #100DaysOfCode

Seven instances where ES6 makes your programming life easier

Essential JavaScript string method you should know

Leetcode problem 198: House Robber

ASP.NET Web API c# => Delete Stack Trace from thrown exception

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kushagra Kesav

Kushagra Kesav

https://www.linkedin.com/in/itskushagra

More from Medium

Day05 of #100DaysOfCode

HTML Basics #1: Elements and Attributes

Getting started with VS Code

How to be a Git master from scratch — Step by step instructions

How to be a Git master from scratch — Step by step instructions