Building an Analog and Digital Clock using HTML, CSS, and JavaScript
Krishna pariyar
Backend developmentIntroduction
Timekeeping is an essential part of our daily lives. In this blog, we will build a functional analog and digital clock using HTML, CSS, and JavaScript. The clock will display both time and date in real-time with a sleek and modern design.
Features
-
Analog Clock: Uses a canvas element to display hour, minute, and second hands.
-
Digital Clock: Displays time in hours, minutes, and seconds along with an AM/PM indicator.
-
Date Display: Shows the current day, month, and year.
-
Live Updates: The clock updates every second without refreshing the page.
Technologies Used
-
HTML: Structure of the clock.
-
CSS: Styling and layout.
-
JavaScript: Logic to update time and date dynamically.
Project Setup
Step 1: HTML Structure
We start by creating the basic structure in an index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog and Digital Clock with Date</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
<div id="digitalClock">
<div class="time">
<span class="hour">00</span>:
<span class="minute">00</span>:
<span class="second">00</span>
<span class="period">AM</span>
</div>
<div class="date">Date</div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Styling with CSS
We use CSS to style both the analog and digital clocks.
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
color: #ffffff;
background: #2C3E50;
}
#clock {
background: #34495E;
border-radius: 50%;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
border: 8px solid #1C2833;
margin-bottom: 20px;
}
#digitalClock {
background: #212F3C;
border-radius: 20px;
padding: 10px 20px;
font-size: 24px;
text-align: center;
}
Step 3: JavaScript Functionality
We write JavaScript to handle real-time updates.
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');
const radius = canvas.height / 2;
ctx.translate(radius, radius);
const clockRadius = radius * 0.9;
function drawClock() {
drawFace(ctx, clockRadius);
drawNumbers(ctx, clockRadius);
drawTime(ctx, clockRadius);
}
function drawFace(ctx, radius) {
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = '#34495E';
ctx.fill();
}
function drawNumbers(ctx, radius) {
ctx.font = radius * 0.15 + "px Arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillStyle = '#ffffff';
for (let num = 1; num <= 12; num++) {
const angle = num * Math.PI / 6;
ctx.rotate(angle);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-angle);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(angle);
ctx.translate(0, radius * 0.85);
ctx.rotate(-angle);
}
}
function drawTime(ctx, radius) {
const now = new Date();
const hour = now.getHours() % 12 || 12;
const minute = now.getMinutes();
const second = now.getSeconds();
const period = now.getHours() >= 12 ? 'PM' : 'AM';
const hourPos = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60));
drawHand(ctx, hourPos, radius * 0.5, radius * 0.07, 'red');
const minutePos = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
drawHand(ctx, minutePos, radius * 0.8, radius * 0.07, 'yellow');
const secondPos = (second * Math.PI / 30);
drawHand(ctx, secondPos, radius * 0.9, radius * 0.02, 'limegreen');
document.querySelector('.hour').textContent = hour.toString().padStart(2, '0');
document.querySelector('.minute').textContent = minute.toString().padStart(2, '0');
document.querySelector('.second').textContent = second.toString().padStart(2, '0');
document.querySelector('.period').textContent = period;
}
function drawHand(ctx, pos, length, width, color) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = 'round';
ctx.strokeStyle = color;
ctx.moveTo(0, 0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
setInterval(drawClock, 1000);
drawClock();
Conclusion
We have successfully built a real-time analog and digital clock using HTML, CSS, and JavaScript. This project is an excellent way to practice JavaScript and canvas-based drawing while also making a useful tool. Try customizing the colors, adding animations, or integrating alarm functionalities to enhance the project!
Let me know in the comments if you have any questions or suggestions! 🚀
Comments (0)