Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 2 and project 2. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.
As mentioned in my previous article. This is the Day 2 challenge of Wes Bos Javascript30 course.
Here is the final result:
As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.
PART 1:HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="hand hour-hand" id="hour"></div>
<div class="hand min-hand" id="min" ></div>
<div class="hand sec-hand" id="sec"></div></div>
<script src="script.js"></script>
</body>
</html>
PART 2:CSS
Now we are going to style our project.
*{
margin:0;
padding:0;
}
body{
background-color: rgb(33, 33, 36);
display: flex;
justify-content: center;
}
.container{
border:20px solid white;
border-radius: 50%;
position: absolute;
margin-top: 8rem;
height:25vw;
width: 25vw;
transition: ease-in-out;
}
.hand{
position: relative;
top: 50%;
width:47%;
left:3%;
height: 0.6rem;
background-color: white;
transform: rotate(90deg);
transform-origin: 100%;
}
.hour-hand,.sec-hand,.min-hand {
position: absolute;
}
Let's look at the styling part for hand class
.hand{
position: relative;
top: 50%;
width:47%;
left:3%;
height: 0.6rem;
background-color: white;
transform: rotate(90deg);
transform-origin: 100%;
}
Position has been set to relative so that hands can be positioned with respect to container that is the clock boundary. Then we can easily set top and width accordingly to center the hands.
Hand class will be a common class to all hour,min and sec hand. We have used transform(90deg) to start all the hands from 12o'clock (as div content is horizontal by default).
Here transform:origin has been used as on applying transform, rotate hands will be rotated from center(by default) , hence we set origin to 100% to rotate it from the end.
One issue that we will face is that our 3 hands will appear in block format as div is a block property by default.To solve this we will use position:absolute at individual hand classes.
.hour-hand,.sec-hand,.min-hand {
position: absolute;
}
Refer to this for more details on stacking divs part.
PART 3:JAVASCRIPT
Now we will make our project interactive.
Here the idea is to change transform:rotate property for each hand class as per change in hours,min and sec and calling each function again and again every sec using setInterval() function.
Let's look at the function for hour hand.
function changeHour(){
let hour=document.getElementById('hour');
let hangle;
if(date.getHours()<12)
{
hangle=(date.getHours()*30);
}
else hangle=(date.getHours()-12)*30+90;
hour.style.transform=`rotate(${hangle}deg)`;
}
Here we will take two cases. If our hour is less than 12 then we will simply multiply it by 30 deg as hour hand moves 30deg after every hour and we will add it to 90deg as initially our hand is at 90deg. If our hour is>=12 then we will subtract them by 12.
Here's an example- If hour returned by getHours() is 1 (1am) then our hour-hand will be at 1*(360/12) degrees.
If 13 is returned( 1pm) then (13-12)*(360/12) will give 30 degrees.
Same logic goes for min and sec -
function changeMin(){
date=new Date();
let min=document.getElementById('min');
let mangle=date.getMinutes()*6+90;
min.style.transform=`rotate(${mangle}deg)`;
}
function changeSec(){
date=new Date();
let sec=document.getElementById('sec');
let sangle=date.getSeconds()*6;
sangle+=90;
sec.style.transform=`rotate(${sangle}deg)`;
}
Now we have to call these function every second-
Here we will use setInterval(function,time interval in milisecond),which will keep on calling function passed as parameter after time interval passed as second parameter until closeInterval() is closed,which we won't call since we want our function to keep on running.
setInterval(changeSec,1000);
setInterval(changeMin,1000);
setInterval(changeHour,1000);
Previous article from this series:
Things learnt:
1.Stacking divs
2.transform-origin
Source Code
Conclusion
That's it for today's project.Next project will be on CSS variables.
If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.
If you like this series and want to be a part of it, do consider following me at @prachigarg19
Thanks for reading. :)
Top comments (0)