How to Create an Analog with HTML, CSS and JavaScript
In this Javascript Tutorial, we will see how to create an Analog clock with an integrated digital time display.
Project Source 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</title>
<style>
/* Import the Poppins font from Google Fonts */
@import url(
'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap'
);
body
{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Poppins', sans-serif;
background: linear-gradient(45deg, #16213e, #1a1a2e);
}
.clock-container{ position: relative; }
canvas
{
background: linear-gradient(45deg, #16213e, #1a1a2e);
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(255,255,255,0.1),
0 0 20px rgba(0,0,0,0.3),
inset 0 0 50px rgba(0, 0, 0, 0.3);
}
.digital-time
{
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
font-size: 1.5em;
color: #e94560;
text-transform: 0 0 10px rgba(233,69,96,0.5);
}
</style>
</head>
<body>
<div class="clock-container">
<canvas id="clock" width="400" height="400"></canvas>
<div class="digital-time" id="digital-time">00:00:00</div>
</div>
<script>
// Get the canvas element and its drawing context
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');
// Calculate the radius of the clock
const radius = canvas.height / 2;
// Move the origin of the canvas to the center
ctx.translate(radius, radius);
function drawClock(){
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
updateDigitalTime();
}
// Function to draw the clock face
function drawFace(ctx, radius){
// Create a radial gradient for the clock face
const grad = ctx.createRadialGradient(0,0,radius * 0.95, 0, 0, radius*1.05);
grad.addColorStop(0, '#16213e'); // Inner color
grad.addColorStop(0.5, '#1a1a2e'); // Middle color
grad.addColorStop(1, '#16213e'); // Outer color
// Draw the clock face circle
ctx.beginPath();
ctx.arc(0,0,radius, 0, 2 * Math.PI);
ctx.fillStyle = grad;
ctx.fill();
// Draw the center circle
ctx.beginPath();
ctx.arc(0,0,radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#e94560';
ctx.fill();
}
// Function to draw the numbers and ticks on the clock
function drawNumbers(ctx, radius){
// Set font size and alignment
ctx.font = radius * 0.15 + "px Poppins";
ctx.textBaseLine = "middle";
ctx.textAlign = "center";
ctx.fillStyle = "#fff"; // White color for numbers
// Draw numbers 1 through 12
for(let num = 1; num <= 12; num++){
let ang = num * Math.PI / 6; // Calculate angle for each number
ctx.rotate(ang); // Rotate canvas
ctx.translate(0, -radius * 0.82); // Move canvas to position
ctx.rotate(-ang); // Rotate canvas back
ctx.fillText(num.toString(), 0, 0); // Draw number
ctx.rotate(ang); // Rotate canvas back
ctx.translate(0, radius * 0.82); // Move canvas back
ctx.rotate(-ang); // Rotate canvas back
}
// Draw ticks for each minute
for(let i = 0; i < 60; i++){
let ang = i * Math.PI / 30; // Calculate angle for each tick
ctx.beginPath();
ctx.rotate(ang);
if(i % 5 === 0){
// Draw long ticks for hours
ctx.moveTo(radius * 0.9, 0);
ctx.lineTo(radius * 0.95, 0);
ctx.strokeStyle = "#e94560";
ctx.lineWidth = radius * 0.02;
}
else
{
// Draw short ticks for minutes
ctx.moveTo(radius * 0.95, 0);
ctx.lineTo(radius * 0.97, 0);
ctx.strokeStyle = "#0f3460";
ctx.lineWidth = radius * 0.01;
}
ctx.stroke(); // Render the tick
ctx.rotate(-ang); // Rotate canvas back
}
}
// Function to draw the clock hands
function drawTime(ctx, radius){
const now = new Date(); // Get current time
let hour = now.getHours(); // Get hours
let minute = now.getMinutes(); // Get minutes
let second = now.getSeconds(); // Get seconds
hour = hour % 12; // Convert hour to 12-hour format
hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60))
+ (second * Math.PI / (360 * 60));
// Draw hour hand
drawHand(ctx, hour, radius * 0.5, radius * 0.07, '#fff');
minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
// Draw hour minute
drawHand(ctx, minute, radius * 0.75, radius * 0.05, 'yellow');
second = (second * Math.PI / 30);
// Draw hour second
drawHand(ctx, second, radius * 0.9, radius * 0.02, '#e94560');
}
// Function to draw a clock hand
function drawHand(ctx, pos, length, width, color){
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.shadowColor = color; // Shadow color
ctx.shadowBlur = 10; // Shadow blur
ctx.strokeStyle = color; // Hand color
ctx.moveTo(0,0); // Start from center
ctx.rotate(pos); // Rotate canvas
ctx.lineTo(0, -length); // Draw line
ctx.stroke(); // Render the hand
ctx.rotate(-pos); // Rotate canvas back
ctx.shadowBlur = 0; // Remove shadow
}
// Function to update the digital time display
function updateDigitalTime(){
const now = new Date();
const timeString = now.toLocaleTimeString('en-us',
{hour12:true, hour:'2-digit', minute:'2-digit'});
document.getElementById('digital-time').textContent = timeString;
}
// Call drawClock every second to update the clock
setInterval(drawClock, 1000);
</script>
</body>
</html>
OUTPUT:
