A JS Clock

3-17-2020 JS Clock

Programming during the Covid-19 Panic

Rightfully titled I have completed another follow along guide on youtube. This time, its the Javascript clock, coded by Web Dev simplified.

The video and code was simple and easy to follow along. So props to the creator. As this is not my code, the next best thing I can do is

write on what was learned.

As we progress along, CSS flexbox and Grid are starting to make more sence, mainly what I want to say is that it made sence before as I was

using Webflow to visually understand both concepts. However, now because I am seeing how someone else, whom I deem more knowledgeable in this

subject, use these styling; I am gaining more confidence to go out on my own.

Specifically lets talk about one little thing here:

In the guide, creates an object, really the center dot of the clock with this code

.clock::after{

 content:'';

 position:absolute;

 background-color:black;

 z-index:11;

 width:15px;

 height:15px;

 top:50%;

 left:50%;

 transform: translate(-50%, -50%);

 border-radius:50%;

}

That is something new to note, as something that was learned. Lets dissect this code a little. we selected the class called clock, and using

::after to me means that once the dom is loaded we created an empty object with content:''; Our position is absolute to the .clock class which has a

position of relative. Now our transform:translate(-50%, -50%); is in charge of placing our object straight in the middle of the .clock class.

Another snippet of code to discuss, code is below, the variable var(--rotation) was used in CSS. And later used in JS to control the movement of the

hands of the clock. As we see in css, we simply pass our variable to the rotate method under the transform property. As I learned from the video,

transform was used to set the angle of an element, in degrees. Then our function below in JS, updated the --rotation variable for our minute-hand,

hour-hand, and second-hand with a specific ratio. Notice the code to modify it, element.style.setProperty. As we know the function allows a parameter,

element, being a class in css. Then we use the method, style.setProperty('variable', [modification]) to affect the --rotation variable in CSS.

CSS

clock .number{

 --rotation:0;

 position:absolute;

 font-size: 1.5rem;

 height:100%;

 width:100%;

 text-align:center;

 transform: rotate(var(--rotation));

JS

function setRotation(element, rotationRatio){

 element.style.setProperty('--rotation', rotationRatio * 360);

}

An amazing experience that motivates me to keep going further, some fixes I could suggest it to graphically display the time. That way we spend less

time trying to figure out whrere the hands are :)

‍