In this tutorial, you’ll learn how to create analog clock using HTML, CSS, and JavaScript. The clock will feature a dynamic design that displays the current time with rotating hour, minute, and second hands. By the end of this post, you’ll have a fully functional analog clock that you can customize to your liking.
Prerequisites
Before starting this tutorial, you should have a basic understanding of:
- HTML (for structuring the content)
- CSS (for styling the elements)
- JavaScript (for adding interactivity)
Step 1: Setting Up the HTML Structure
Let’s start by creating a basic HTML structure for the clock. Open your code editor and create a new HTML file (e.g., analog-clock.html). Add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Clock with HTML, CSS, and JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clock">
<div class="hand hour" id="hour"></div>
<div class="hand minute" id="minute"></div>
<div class="hand second" id="second"></div>
<div class="center-circle"></div>
</div>
<script src="script.js"></script>
</body>
</html>
In this code:
- The
<div>elements with the classhandrepresent the hour, minute, and second hands of the clock. - The
center-circleclass will be used to style the central part of the clock where the hands pivot.
Step 2: Styling the Clock with CSS
Now, create a styles.css file to style the clock. Add the following code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000000;
color: #fff;
font-family: 'Arial', sans-serif;
}
.clock {
position: relative;
width: 200px;
height: 200px;
border: 10px solid #61dafb;
border-radius: 50%;
background: #e0e0e0;
}
.hand {
position: absolute;
background-color: #61dafb;
transform-origin: bottom;
bottom: 50%;
left: 50%;
transform: translateX(-50%);
}
.hour {
height: 50px;
width: 6px;
border-radius: 6px;
}
.minute {
height: 70px;
width: 4px;
border-radius: 4px;
}
.second {
height: 90px;
width: 2px;
border-radius: 2px;
background-color: #ff4757;
}
.center-circle {
position: absolute;
width: 12px;
height: 12px;
background-color: #61dafb;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.number {
position: absolute;
font-size: 18px;
color: #61dafb;
font-weight: bold;
transform: translate(-50%, -50%);
}This CSS code:
- Styles the clock container with a circular shape and a gradient background.
- Creates styles for the hour, minute, and second hands, giving them different sizes and colors.
- Adds a center circle for a polished look.
Step 3: Adding JavaScript to Make the Clock Functional
Now, let’s add JavaScript to make the clock hands rotate according to the current time. Create a script.js file and add the following code:
function updateClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
const secondHand = document.getElementById('second');
const minuteHand = document.getElementById('minute');
const hourHand = document.getElementById('hour');
const secondDeg = ((seconds / 60) * 360) + 90; // Adjust for initial position
const minuteDeg = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
const hourDeg = ((hours % 12) / 12) * 360 + ((minutes / 60) * 30) + 90;
secondHand.style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
minuteHand.style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
hourHand.style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
}
// Update the clock every second
setInterval(updateClock, 1000);
updateClock();
This script:
- Gets the current time using the
Dateobject. - Calculates the degrees for each hand’s rotation based on the time.
- Rotates the hands using the
transformproperty. - Updates every second using
setInterval.
Step 4: Positioning the Numbers Around the Clock
To add numbers (1-12) around the clock face dynamically, you can use JavaScript to calculate their positions:
Update your script.js file with the following code:
// Add numbers dynamically to the clock
const clock = document.querySelector('.clock');
const radius = 90;
for (let i = 1; i <= 12; i++) {
const angle = (i * 30) * (Math.PI / 180);
const x = radius * Math.sin(angle);
const y = -radius * Math.cos(angle);
const numberElement = document.createElement('div');
numberElement.className = 'number';
numberElement.style.left = `calc(50% + ${x}px)`;
numberElement.style.top = `calc(50% + ${y}px)`;
numberElement.textContent = i;
clock.appendChild(numberElement);
}This code dynamically places numbers around the clock face using trigonometric functions, ensuring they are evenly spaced.
Final Output
After implementing these steps, you should have a fully functional analog clock that displays the current time. Here’s what you should see:
- A circular clock with hour, minute, and second hands.
- Numbers evenly placed around the clock face.
- The hands move in real-time, showing the current time.
Customizing the Clock
Feel free to customize the clock further by adjusting the following:
- Colors: Change the background, hand colors, or text color to match your theme.
- Size: Modify the
width,height, andradiusvalues in the CSS to create larger or smaller clocks. - Fonts: Use different fonts for a unique look.
Conclusion
Creating an analog clock using HTML, CSS, and JavaScript is a fun and interactive project that enhances your understanding of DOM manipulation and CSS styling. It also gives you hands-on experience with time-based calculations using JavaScript.
I hope you found this tutorial helpful! If you have any questions or run into issues, feel free to ask in the comments below. Happy coding!