Amazing Working Analog And Digital Clock Design Using Html Css & Javascript

8 min read Jul 03, 2024

Amazing Working Analog And Digital Clock Design Using Html Css & Javascript

Amazing Working Analog and Digital Clock Design Using HTML, CSS, and JavaScript

This article will guide you through building an amazing analog and digital clock using HTML, CSS, and JavaScript. You'll learn how to create a visually appealing clock with dynamic elements that display accurate time.

Setting up the HTML Structure

First, let's create the basic HTML structure for our clock:




    
    
    Analog & Digital Clock
    


    
        
            
            
            
            
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12

We've created a clock-container to hold both the analog and digital clocks. Inside, the analog-clock div contains the hands (hour, minute, second), a center dot, and the clock numbers. We'll use CSS to style these elements.

Styling the Clock with CSS

Let's create style.css to style our clock:

.clock-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.analog-clock {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.hour-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
    width: 8px;
    height: 80px;
    background-color: #333;
    transform: translate(-50%, -100%) rotate(90deg);
}

.minute-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
    width: 6px;
    height: 110px;
    background-color: #333;
    transform: translate(-50%, -100%) rotate(90deg);
}

.second-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
    width: 4px;
    height: 130px;
    background-color: #dc3545;
    transform: translate(-50%, -100%) rotate(90deg);
}

.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 50%;
}

.number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%) rotate(calc(var(--i) * 30deg));
    font-size: 20px;
    font-weight: bold;
    transform-origin: center;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-left: -15px;
}

.digital-clock {
    font-size: 40px;
    margin-left: 20px;
    font-weight: bold;
    color: #333;
}

Here we've styled the clock container, clock face, hands, and numbers. We've also used CSS variables to position the numbers around the clock face.

Bringing the Clock to Life with JavaScript

Now, let's create script.js to handle the clock's functionality:

const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');
const digitalClock = document.querySelector('.digital-clock');

function updateClock() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    const hourRotation = (hours * 30) + (minutes / 2);
    const minuteRotation = minutes * 6;
    const secondRotation = seconds * 6;

    hourHand.style.transform = `translate(-50%, -100%) rotate(${hourRotation}deg)`;
    minuteHand.style.transform = `translate(-50%, -100%) rotate(${minuteRotation}deg)`;
    secondHand.style.transform = `translate(-50%, -100%) rotate(${secondRotation}deg)`;

    digitalClock.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

setInterval(updateClock, 1000);

updateClock(); // Initial update for immediate display

In this script, we:

Get references to the HTML elements for the hands and digital clock.
Define the updateClock function:
- Gets the current time using new Date().
- Calculates the rotation angles for each hand based on the time.
- Applies the rotation to the hands' transform style.
- Updates the digitalClock text content with the formatted time.
Use setInterval to call updateClock every 1000 milliseconds (1 second).
Call updateClock initially to show the current time immediately.

Conclusion

Now you have a working analog and digital clock. You can further customize this by:

Adding more styling: Use CSS to create different color schemes, fonts, shadows, or gradients.
Adding features: Implement an alarm, a stopwatch, or a timer.
Using libraries: Explore CSS frameworks (like Bootstrap) for simpler styling.

By following these steps, you can build a visually appealing and functional analog and digital clock to display on your website.