How to create digital and analog clock in html

You can create both digital and analog clocks using HTML, CSS, and JavaScript. Let's start with the digital clock:

Digital Clock:

1. HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Digital Clock</title>
</head>
<body>
    <div class="digital-clock" id="digitalClock"></div>

    <script src="script.js"></script>
</body>
</html>

2. CSS (styles.css):

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f2f2f2;
}

.digital-clock {
    font-size: 2em;
    font-family: 'Arial', sans-serif;
}

3. JavaScript (script.js):

function updateDigitalClock() {
    const digitalClock = document.getElementById('digitalClock');
    const currentTime = new Date();
    const hours = currentTime.getHours();
    const minutes = currentTime.getMinutes();
    const seconds = currentTime.getSeconds();

    const formattedTime = `${hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;

    digitalClock.textContent = formattedTime;
}

// Update the clock every second
setInterval(updateDigitalClock, 1000);

// Initial update
updateDigitalClock();

This code sets up a simple digital clock that updates every second.

Analog Clock:

1. HTML structure (modify the existing HTML):

<!-- Add the following inside the body tag, after the digital clock div -->

<div class="analog-clock" id="analogClock">
    <div class="hour-hand" id="hourHand"></div>
    <div class="minute-hand" id="minuteHand"></div>
    <div class="second-hand" id="secondHand"></div>
</div>

2. CSS (update styles.css):

.analog-clock {
    width: 200px;
    height: 200px;
    border: 2px solid #333;
    border-radius: 50%;
    position: relative;
}

.analog-clock div {
    position: absolute;
    transform-origin: 50% 100%;
    background-color: #333;
}

.hour-hand {
    height: 40px;
    width: 6px;
    top: 30px;
    left: 97px;
}

.minute-hand {
    height: 60px;
    width: 4px;
    top: 20px;
    left: 98px;
}

.second-hand {
    height: 80px;
    width: 2px;
    top: 10px;
    left: 99px;
}

3. JavaScript (update script.js):

function updateAnalogClock() {
    const analogClock = document.getElementById('analogClock');
    const hourHand = document.getElementById('hourHand');
    const minuteHand = document.getElementById('minuteHand');
    const secondHand = document.getElementById('secondHand');
    const currentTime = new Date();
    const hours = currentTime.getHours() % 12; // Ensure hours are in 12-hour format
    const minutes = currentTime.getMinutes();
    const seconds = currentTime.getSeconds();

    const hourRotation = 360 * (hours / 12);
    const minuteRotation = 360 * (minutes / 60);
    const secondRotation = 360 * (seconds / 60);

    hourHand.style.transform = `rotate(${hourRotation}deg)`;
    minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
    secondHand.style.transform = `rotate(${secondRotation}deg)`;
}

// Update the clock every second
setInterval(updateAnalogClock, 1000);

// Initial update
updateAnalogClock();

This code sets up a simple analog clock with hour, minute, and second hands that update every second.

You can customize the styles further to suit your design preferences.

Combined Code:

Here's a combined HTML file that includes both the digital and analog clocks along with their respective CSS and JavaScript code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f2f2f2;
        }

        .digital-clock {
            font-size: 2em;
            font-family: 'Arial', sans-serif;
        }

        .analog-clock {
            width: 200px;
            height: 200px;
            border: 2px solid #333;
            border-radius: 50%;
            position: relative;
        }

        .analog-clock div {
            position: absolute;
            transform-origin: 50% 100%;
            background-color: #333;
        }

        .hour-hand {
            height: 40px;
            width: 6px;
            top: 30px;
            left: 97px;
        }

        .minute-hand {
            height: 60px;
            width: 4px;
            top: 20px;
            left: 98px;
        }

        .second-hand {
            height: 80px;
            width: 2px;
            top: 10px;
            left: 99px;
        }
    </style>
    <title>Digital and Analog Clock</title>
</head>
<body>
    <div class="digital-clock" id="digitalClock"></div>

    <div class="analog-clock" id="analogClock">
        <div class="hour-hand" id="hourHand"></div>
        <div class="minute-hand" id="minuteHand"></div>
        <div class="second-hand" id="secondHand"></div>
    </div>

    <script>
        function updateDigitalClock() {
            const digitalClock = document.getElementById('digitalClock');
            const currentTime = new Date();
            const hours = currentTime.getHours();
            const minutes = currentTime.getMinutes();
            const seconds = currentTime.getSeconds();

            const formattedTime = `${hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;

            digitalClock.textContent = formattedTime;
        }

        function updateAnalogClock() {
            const hourHand = document.getElementById('hourHand');
            const minuteHand = document.getElementById('minuteHand');
            const secondHand = document.getElementById('secondHand');
            const currentTime = new Date();
            const hours = currentTime.getHours() % 12; // Ensure hours are in 12-hour format
            const minutes = currentTime.getMinutes();
            const seconds = currentTime.getSeconds();

            const hourRotation = 360 * (hours / 12);
            const minuteRotation = 360 * (minutes / 60);
            const secondRotation = 360 * (seconds / 60);

            hourHand.style.transform = `rotate(${hourRotation}deg)`;
            minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
            secondHand.style.transform = `rotate(${secondRotation}deg)`;
        }

        // Update the clocks every second
        setInterval(updateDigitalClock, 1000);
        setInterval(updateAnalogClock, 1000);

        // Initial update
        updateDigitalClock();
        updateAnalogClock();
    </script>
</body>
</html>

This single HTML file contains both the digital and analog clocks with their respective styling and functionality. You can copy and paste this code into an HTML file and open it in a web browser to see the clocks in action.

Output:

Digital and Analog Clock