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.
<html>
<head>
<title></title>
<style>
</style> The basic HTML structure.
</head>
<body>
</body>
</html>
<html>
<head>
<title></title>
<style>
#clock{
background-color: skyblue;
height: 300px;
width: 300px;
3. border-radius: 50%; Clock style
overflow: hidden;
position: relative;
}
</style>
</head>
<body>
<div id="clock">
2. Opening and closing divs for the Clock layout
</div>
</body>
</html>
The output becomes;
Other divs are created further created for the numbers inside the Clock div.
<div id="clock">
<div class="n num1">1</div>
<div class="n num2">2</div>
<div class="n num3">3</div>
<div class="n num4">4</div>
<div class="n num5">5</div>
<div class="n num6">9</div>
<div class="n num7">7</div>
<div class="n num8">8</div>
<div class="n num9">9</div>
<div class="n num10">10</div>
<div class="n num11">11</div>
<div class="n num12">12</div>
</div>
We are expected to get this;
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.
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;}
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.
<div class="hour hand"></div>
<div class="min hand"></div> Divs for all the hands. <div class="sec hand"></div>
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;
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.
<script>
setInterval(setClock, 1000)
</script>
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.
<script>
setInterval(setClock, 1000)
const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-min-hand]')
const secondHand = document.querySelector('[data-sec-hand]')
</script>
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.
<script>
setInterval(setClock, 1000)
const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-min-hand]')
const secondHand = document.querySelector('[data-sec-hand]')
function setClock(){
const currentDate = new Date()
const secondsRatio = currentDate.getSeconds() / 60
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
setRotation(secondHand, secondsRatio)
setRotation(minuteHand, minutesRatio)
setRotation(hourHand, hoursRatio)
}
function setRotation(element, rotationRatio) {
element.style.setProperty('--rotation', rotationRatio * 360)
}
setClock()
</script>
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;
<div class="hour hand" data-hour-hand></div>
<div class="min hand" data-min-hand></div>
<div class="sec hand" data-sec-hand></div>
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