in ,

How To Use Common Sense, HTML, CSS, and JS. To Make An Analogue Clock

image

Scofield Idehen HackerNoon profile picture

Scofield Idehen

Decentralized Dreamer, l love Web3, Cloud Computing and how to secure it all, anything else, please do not wake me up.

HTML is the building block language, CSS is the styling language, and JS is the functioning language. We take this step by step.

First a storyline, I started writing codes without structure as I just wanted to see the result, it did not matter how the code end up, I just wanted to see something working on my screen.

Guess what, nothing ends up working the way I plan.

First, we write out a basic HTML structure, create a div for the clock and add necessary styling to it.


    
        
                            The basic HTML structure.
    
         





    
        
        
    
        
            
2. Opening and closing divs for the Clock layout

The output becomes;

image

Other divs are created further created for the numbers inside the Clock div.

1
2
3
4
5
9
7
8
9
10
11
12

We are expected to get this;

image

Notice that the numbers are hidden inside the curve and appear straight but we have to spread the numbers to occupy their various positions as in the real clock. We apply this styling first to the general number style.

I learned soon enough that the battle is not all about high spirit but a clear identification of what the scope of the project looks like.

Taking into account that code writing is building legos, one mistake and everything comes crashing down.

#clock .n{
        --rotation:0;
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 1.7rem;
        transform: rotate(var(--rotation));
    }

Notice that we included a variable “rotation” so that we can style individual id/class names and apply the specific degree of rotation we wish to apply. For instance, (--rotation:30deg-330deg;), this means we set the rotation to 30 degrees.

image

The numbers are clogged and we want to space them to their position. Therefore, we apply our various degrees to each of the ids and classes we created for the numbers.

when I come across very difficult logic and everything seems to be falling apart, I take into account the revert and review strategy in #debugging.

I break the parts and compile them while #monitoring for the errors, sometimes this can be back-breaking and tiring but I soon learn patients and dedication.

#clock .num1 {--rotation:30deg;}
    #clock .num2 {--rotation:60deg;}
    #clock .num3 {--rotation:90deg;}
    #clock .num4 {--rotation:120deg;}
    #clock .num5 {--rotation:150deg;}
    #clock .num6 {--rotation:180deg;}
    #clock .num7 {--rotation:210deg;}
    #clock .num8 {--rotation:240deg;}
    #clock .num9 {--rotation:270deg;}
    #clock .num10 {--rotation:300deg;}
    #clock .num11 {--rotation:330deg;}
    #clock .num12 {--rotation:360deg;}
image

We can see that each number is positioned in their various degrees but the clock appears empty as the hour, minute, and second hands are not there. We create those hands by creating different divs for each hand and styling them to our taste.

                    
Divs for all the hands.

We style the general clock hand and each hand;

The general clock hand holds the second, minute, and hour hand at the bottom while they rotate round the clock, so we include the transform-origin:bottom;

In order to rotate by one second which is equivalent to one degree, we set the rotation by 1deg by default we will set the all hands (general clock hands) to 12.

 #clock .hand{
        --rotation:0;
        position: absolute;
        bottom: 50%;
        left: 50%;
        background-color: black;
        border: 1px solid white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        z-index: 10;
        transform-origin: bottom;
        transform: translate(-50%) rotate(calc(var(--rotation) * 1deg));
    }
    #clock::after{
        content: '';
        position: absolute;
        background-color: hotpink;
        z-index: 11;
        width:15px;
        height: 15px;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }
    #clock .hand.hour{
        width: 8.5px;
        height: 35%;
        background-color:black;
    }
    #clock .hand.min{
        width: 5.5px;
        height: 40%;                        Styling for each hand.
        background-color:black;
    }
   
    #clock .hand.sec{
        width: 2.5px;
        height: 45%;
        background-color: red;

After the code above, we are expected to get this;

image

We notice that the hands are just fixed to one point. We haven’t added the functioning language (JS), so the clock remains static.

Now that we are done with the styling, we apply Javascript to make our hands move according to our current time. One needs to pay careful attention to this section.

First, we set the clock’s interval and call the function name we are to use and the timing you want inside the interval function.


Then, Create three constants or variables second hand, minute hand & hour hand to link them to

the HTML divs for the hand of the clock using document.querySelector.


Inside the set clock function, create a constant and attach the NEW DATE function to it.l The new date function helps to get the recent date of the system.

Also, create another constant called secondsRatio and get seconds from the new date
Do the same for the minutes ratio, then add secondsRatio to it and divide by 60.


After applying that script, the hands still remain in position because my query selector which is a constant is not added to my html so it doesn’t select anything.

const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-min-hand]')
const secondHand = document.querySelector('[data-sec-hand]')

This is supposed to be inserted into our HTML where we have divs for each hand;

 

Once this done, our clock automatically works.

Finally, you get it right, feeling relieved but not yet, document your process, write them the process and review it when you are done.

This keeps the knowledge tied within you and helps you build better programs or projects in the future.

Thank you.

Written by @learnHub Africa team


HTML is the building block language, CSS is the styling language, and JS is the functioning language. We take this step by step.

First a storyline, I started writing codes without structure as I just wanted to see the result, it did not matter how the code end up, I just wanted to see something working on my screen.

Guess what, nothing ends up working the way I plan.

First, we write out a basic HTML structure, create a div for the clock and add necessary styling to it.


    
        
                            The basic HTML structure.
    
        
        




    
        
        
    
        
            
2. Opening and closing divs for the Clock layout

The output becomes;

image

Other divs are created further created for the numbers inside the Clock div.

1
2
3
4
5
9
7
8
9
10
11
12

We are expected to get this;

image

Notice that the numbers are hidden inside the curve and appear straight but we have to spread the numbers to occupy their various positions as in the real clock. We apply this styling first to the general number style.

I learned soon enough that the battle is not all about high spirit but a clear identification of what the scope of the project looks like.

Taking into account that code writing is building legos, one mistake and everything comes crashing down.

#clock .n{
        --rotation:0;
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 1.7rem;
        transform: rotate(var(--rotation));
    }

Notice that we included a variable “rotation” so that we can style individual id/class names and apply the specific degree of rotation we wish to apply. For instance, (--rotation:30deg-330deg;), this means we set the rotation to 30 degrees.

image

The numbers are clogged and we want to space them to their position. Therefore, we apply our various degrees to each of the ids and classes we created for the numbers.

when I come across very difficult logic and everything seems to be falling apart, I take into account the revert and review strategy in #debugging.

I break the parts and compile them while #monitoring for the errors, sometimes this can be back-breaking and tiring but I soon learn patients and dedication.

#clock .num1 {--rotation:30deg;}
    #clock .num2 {--rotation:60deg;}
    #clock .num3 {--rotation:90deg;}
    #clock .num4 {--rotation:120deg;}
    #clock .num5 {--rotation:150deg;}
    #clock .num6 {--rotation:180deg;}
    #clock .num7 {--rotation:210deg;}
    #clock .num8 {--rotation:240deg;}
    #clock .num9 {--rotation:270deg;}
    #clock .num10 {--rotation:300deg;}
    #clock .num11 {--rotation:330deg;}
    #clock .num12 {--rotation:360deg;}
image

We can see that each number is positioned in their various degrees but the clock appears empty as the hour, minute, and second hands are not there. We create those hands by creating different divs for each hand and styling them to our taste.

                    
Divs for all the hands.

We style the general clock hand and each hand;

The general clock hand holds the second, minute, and hour hand at the bottom while they rotate round the clock, so we include the transform-origin:bottom;

In order to rotate by one second which is equivalent to one degree, we set the rotation by 1deg by default we will set the all hands (general clock hands) to 12.

 #clock .hand{
        --rotation:0;
        position: absolute;
        bottom: 50%;
        left: 50%;
        background-color: black;
        border: 1px solid white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        z-index: 10;
        transform-origin: bottom;
        transform: translate(-50%) rotate(calc(var(--rotation) * 1deg));
    }
    #clock::after{
        content: '';
        position: absolute;
        background-color: hotpink;
        z-index: 11;
        width:15px;
        height: 15px;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }
    #clock .hand.hour{
        width: 8.5px;
        height: 35%;
        background-color:black;
    }
    #clock .hand.min{
        width: 5.5px;
        height: 40%;                        Styling for each hand.
        background-color:black;
    }
   
    #clock .hand.sec{
        width: 2.5px;
        height: 45%;
        background-color: red;

After the code above, we are expected to get this;

image

We notice that the hands are just fixed to one point. We haven’t added the functioning language (JS), so the clock remains static.

Now that we are done with the styling, we apply Javascript to make our hands move according to our current time. One needs to pay careful attention to this section.

First, we set the clock’s interval and call the function name we are to use and the timing you want inside the interval function.


Then, Create three constants or variables second hand, minute hand & hour hand to link them to

the HTML divs for the hand of the clock using document.querySelector.


Inside the set clock function, create a constant and attach the NEW DATE function to it.l The new date function helps to get the recent date of the system.

Also, create another constant called secondsRatio and get seconds from the new date
Do the same for the minutes ratio, then add secondsRatio to it and divide by 60.


After applying that script, the hands still remain in position because my query selector which is a constant is not added to my html so it doesn’t select anything.

const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-min-hand]')
const secondHand = document.querySelector('[data-sec-hand]')

This is supposed to be inserted into our HTML where we have divs for each hand;

 

Once this done, our clock automatically works.

Finally, you get it right, feeling relieved but not yet, document your process, write them the process and review it when you are done.

This keeps the knowledge tied within you and helps you build better programs or projects in the future.

Thank you.

Written by @learnHub Africa team

Scofield Idehen HackerNoon profile picture

by Scofield Idehen @scofield.Decentralized Dreamer, l love Web3, Cloud Computing and how to secure it all, anything else, please do not wake me up.

Read my stories

Tags

Related Stories

What do you think?

Silver 1

Written by yulica

Leave a Reply

Your email address will not be published.

      What Have We Learned About eCommerce Platforms?

      Decentralized Storage Networks — An Explainer