Attractive Analog Clock
In the world of web development, creating visually appealing and interactive elements can enhance the user experience. One such element is an analog clock, which not only serves a functional purpose but also adds a touch of style to a website. In this article, we’ll walk through the process of building an attractive analog clock using HTML, CSS, and JavaScript.
Author
- TechieBundle
- December 12, 2023
Live Demo
Code
You can check the code used in the demo below which you can also use in your projects.
Setting Up the HTML Structure
Let’s start by creating the basic structure of our HTML document. We’ll create a container for the clock and include div elements for the hour, minute, and second hands. Additionally, we’ll add indicators for the 12, 3, 6, and 9 positions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
<!-- Your CSS Styles Go Here -->
</style>
</head>
<body>
<div id="clock">
<div id="hour" class="hand"></div>
<div id="minute" class="hand"></div>
<div id="second" class="hand"></div>
<div id="center-dot"></div>
<div class="hour-indicator hour-12">12</div>
<div class="hour-indicator hour-3">3</div>
<div class="hour-indicator hour-6">6</div>
<div class="hour-indicator hour-9">9</div>
</div>
<script>
// Your JavaScript Code Goes Here
</script>
</body>
</html>
Styling the Clock with CSS
Now, let’s add some style to our clock. We’ll use gradients, box shadows, and various colors to make the clock visually appealing. Additionally, we’ll style the clock hands, center dot, and hour indicators.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(to bottom right, #3494e6, #ec6ead);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#clock {
width: 200px;
height: 200px;
border: 6px solid #fff;
border-radius: 50%;
position: relative;
background: linear-gradient(to bottom, #a18cd1, #fbc2eb);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.hand {
position: absolute;
transform-origin: 50% 100%;
transition: transform 0.5s cubic-bezier(0.4, 2.5, 0.36, 0.84);
}
#hour {
height: 50px;
width: 6px;
top: 50px;
left: 97px;
background: #fff;
border-radius: 4px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
#minute {
height: 80px;
width: 4px;
top: 20px;
left: 98px;
background: #fff;
border-radius: 4px;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
#second {
height: 90px;
width: 2px;
top: 10px;
left: 99px;
background: #ff3d67;
border-radius: 2px;
box-shadow: 0 0 6px rgba(255, 61, 103, 0.8);
}
#center-dot {
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
top: 94px;
left: 94px;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
.hour-indicator {
position: absolute;
font-size: 14px;
font-weight: bold;
color: #333;
}
.hour-12 { top: 5px; left: 86px; }
.hour-3 { top: 92px; left: 184px; }
.hour-6 { bottom: 5px; left: 86px; }
.hour-9 { top: 90px; left: 8px; }
#digital-time {
font-size: 24px;
font-weight: bold;
color: #fff;
margin-top: 20px;
}
Animating the Clock with JavaScript
Finally, let’s add the JavaScript code to make our clock functional. We’ll use the setInterval function to update the clock every second and smoothly rotate the hour, minute, and second hands.
<script>
function updateClock() {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const hourDegree = (hours + minutes / 60) * 30;
const minuteDegree = (minutes + seconds / 60) * 6;
const secondDegree = seconds * 6;
document.getElementById('hour').style.transform = `rotate(${hourDegree}deg)`;
document.getElementById('minute').style.transform = `rotate(${minuteDegree}deg)`;
if (seconds === 0) {
// If seconds is zero, set the rotation directly to zero
document.getElementById('second').style.transition = 'none';
document.getElementById('second').style.transform = 'rotate(0deg)';
setTimeout(() => {
document.getElementById('second').style.transition = 'transform 0.5s cubic-bezier(0.4, 2.5, 0.36, 0.84)';
}, 50);
} else {
document.getElementById('second').style.transform = `rotate(${secondDegree}deg)`;
}
}
setInterval(updateClock, 1000);
updateClock(); // Initial call to set the initial clock state
</script>
Technologies Used
- HTML / CSS / JavaScript
About the code
Compatible browsers:- Chrome, Edge, Firefox, Opera, Safari
Responsive:- Yes
Dependencies: – N/A
Conclusion
This JavaScript code calculates the rotation angles for the hour, minute, and second hands based on the current time and updates their positions every second in this analog clock.
Now, you have a fully functional and visually appealing analog clock for your website, similar to how you might build a Simple Quiz App with HTML, CSS, and JavaScript. Feel free to customize the styles further or integrate additional features to suit your design preferences and requirements.
