Building A Simple Analog Clock Using HTML, CSS, and JavaScript
Analog clocks are timeless pieces of art and functionality that continue to intrigue and captivate us. In this blog post, we will walk through the process of creating a simple analog clock using HTML, CSS, and JavaScript. This project will not only give you a better understanding of web development but also provide you with a functional and visually appealing clock.
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Clock</title>
</head>
<body>
<div class="clock">
<div class="hands">
<div class="hand second"></div>
<div class="hand min"></div>
<div class="hand hour"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
display:flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.clock{
width: 30vw;
height: 30vw;
border: 3.5vw dotted black;
border-radius: 50%;
}
.hands{
position: relative;
top:50%;
}
.hand{
width: 11vw;
position: absolute;
top: 49.6%;
left: 1%;
transform-origin: right;
height: 0.2vw;
background-color: black;
}
.min{
width: 8vw;
left: 14.1%;
}
.hour{
width: 6vw;
left: 23%;
}
JavaScript
setInterval(function(){
let date= new Date();
let hour= date.getHours();
let minutes=date.getMinutes();
let seconds=date.getSeconds();
document.querySelector('.second').style.transform=`rotate(${(seconds/60)*360+90}deg)`;
document.querySelector('.min').style.transform=`rotate(${(minutes/60)*360+90}deg)`;
document.querySelector('.hour').style.transform=`rotate(${(hour/12)*360+90+((minutes/60)*30)}deg)`;
},1000);
1. `setInterval` Function`: This function is used to repeatedly execute a given function (in this case, an anonymous function) at a specified time interval. In your example, the function is set to run every 1000 milliseconds (1 second).
2. `new Date()`: This creates a new JavaScript `Date` object, which holds the current date and time.
3. `getHours()`, `getMinutes()`, `getSeconds()`: These are methods of the `Date` object that extract the current hour, minute, and second, respectively.
4. DOM Manipulation: The code uses `document.querySelector()` to select elements with specific class names (`.second`, `.min`, `.hour`) in the HTML document. It then modifies the `style.transform` property of these elements to rotate them, simulating the movement of clock hands.
5. Rotation Calculation: The `rotate` property in the `style.transform` is set using CSS's `rotate` transformation. The degrees for rotation are calculated based on the current time.
- For the seconds hand, it rotates `(seconds/60) * 360` degrees to represent the seconds, plus 90 degrees to initially position it.
- For the minutes hand, it rotates `(minutes/60) * 360` degrees, again adding 90 degrees for initial positioning.
- For the hour hand, it rotates `(hour/12) * 360` degrees plus an additional `(minutes/60) * 30` degrees (since each hour is divided into 60 minutes).
This code, when executed in a web browser, continuously updates the clock hands' positions to reflect the current time, creating the appearance of a functioning analog clock. Get the source code from GitHub.
