Create a Analog Clock with HTML, CSS and JavaScript
In today’s tutorial, Creating a real-time analog clock using HTML, CSS, and JavaScript! This guide will show you how to structure, design, and bring to life a fully functional clock for your website. Don’t worry if you’re a beginner—by the end of this, you’ll have a sleek analog clock that works seamlessly across all browsers. Let’s break it down step by step!
What You’ll Learn:
- How to structure the clock with HTML
- How to style the clock using CSS
- How to make the clock functional with JavaScript
Step 1: Setting up the HTML Structure
The first step is setting up the foundation for your clock using HTML. HTML is like the skeleton of your project—it gives your clock its basic structure. You’ll need a few simple elements to get started: a container for the clock, and places for the clock’s face and hands (hour, minute, and second).
Don’t worry about the appearance yet—HTML is all about creating a solid base that we’ll later enhance with design. Think of it as building a house before painting it.
Start by creating a new file called (index.html). Then, copy and paste the HTML code provided into this file. Remember to save it with the (.html) extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="clock">
<div class="hour-hand" id="hour-hand"></div>
<div class="minute-hand" id="minute-hand"></div>
<div class="second-hand" id="second-hand"></div>
<div class="center-circle"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Styling the Clock with CSS
Now that you have the clock’s basic structure, it’s time to give it some style with CSS. This is where you’ll transform your basic clock into something visually appealing.
Understanding the Clock’s Design:
In CSS, you’ll use properties like width, height, and border-radius to make your clock round and give it the look of a real analog clock. You’ll also style the clock hands by changing their size, color, and rotation.
Create a new file called (style.css) and copy the provided code into this file. Don’t forget to save it with the (.css) extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #585fc4;
}
.clock {
position: relative;
width: 300px;
height: 300px;
border: 10px solid #333;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.clock .hour-hand, .clock .minute-hand, .clock .second-hand {
position: absolute;
width: 50%;
bottom: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s linear;
}
.hour-hand {
height: 6px;
background-color: #333;
}
.minute-hand {
height: 4px;
background-color: #666;
}
.second-hand {
height: 2px;
background-color: red;
}
.clock .center-circle {
position: absolute;
width: 16px;
height: 16px;
background-color: #333;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Step 3: Adding JavaScript Functionality
Now comes the fun part—making your clock work! JavaScript is responsible for bringing life to your clock, making the hands move according to the current time.
The Magic of JavaScript:
JavaScript will allow you to:
- Get the current time.
- Calculate the angles for the clock hands based on the time (hour, minute, second).
- Continuously update the clock so that it keeps ticking in real-time.
Create a new file named (script.js), then copy and paste the JavaScript code into this file. Be sure to save it with the (.js) extension.
function setClock() {
const hourHand = document.getElementById("hour-hand");
const minuteHand = document.getElementById("minute-hand");
const secondHand = document.getElementById("second-hand");
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
// Calculate angles for the hands
const secondAngle = (seconds / 60) * 360;
const minuteAngle = (minutes / 60) * 360 + (seconds / 60) * 6; // add extra rotation from seconds
const hourAngle = (hours % 12) / 12 * 360 + (minutes / 60) * 30; // add extra rotation from minutes
// Set rotation of the hands
secondHand.style.transform = `rotate(${90 + secondAngle}deg)`;
minuteHand.style.transform = `rotate(${90 + minuteAngle}deg)`;
hourHand.style.transform = `rotate(${90 + hourAngle}deg)`;
}
// Update the clock every second
setInterval(setClock, 1000);
// Initialize clock immediately
setClock();
Final Result: A Fully Functional Analog Clock
Once you combine the HTML structure, CSS styling, and JavaScript functionality, you’ll have a beautifully styled analog clock that works perfectly in real-time. The hands will move smoothly, and the clock will keep ticking, just like a real-world analog clock.
Conclusion
Create a simple yet effective way to create a stylish analog clock using HTML, CSS, and JavaScript. Not only have you learned how to build the clock, but you’ve also gained experience working with three core web technologies that are fundamental to web development. The best part is, you can always expand on this basic clock, customizing it as much as you want.
Happy Coding!