JavaScript Real Time Analog Clock
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>
 