Analog Clock – Learning Project

📌 Overview

This project is a real-time analog clock built using HTML, CSS, and JavaScript.
- JavaScript is used to track real-time updates.
- CSS is used for styling and animations.
- The clock hands move smoothly based on the system time.

🛠️ Key Components

Clock Structure

    <div class="time-con">
        <!-- 12 time markers (t0-t11) -->
        <div style="--i:0" class="time t0"></div>
        ...
    </div>
    <div class="hand">
        <div class="hh"></div> <!-- Hour hand -->
        <div class="mh"></div> <!-- Minute hand -->
        <div class="sh"></div> <!-- Second hand -->
    </div>
            

🎭 Easter Egg: Hidden Message

An interactive hidden message is revealed when the user clicks on the clock. This feature adds a fun surprise for users!

🔹 JavaScript for the Easter Egg

When the clock is clicked, a hidden message appears.

    document.querySelector('.body').addEventListener('click', function() {
        let message = document.getElementById('hiddenMessage');
        message.style.display = (message.style.display === 'none') ? 'block' : 'none';
    });
            

🔹 HTML for the Hidden Message

A hidden message is initially set to display: none; and is revealed when clicked.

    <div id="hiddenMessage" style="display: none;">
        🎉 Surprise! You found the hidden message! 🎉
    </div>
            

🔹 CSS for Styling the Hidden Message

The message appears smoothly when revealed.

    #hiddenMessage {
        font-size: 18px;
        color: red;
        text-align: center;
        margin-top: 20px;
        display: none;
    }
            

📖 What I Learned

✅ How to fetch real-time system time using JavaScript.
✅ How to rotate elements dynamically with transform.
✅ How to use CSS transform-origin for precise movements.
✅ The importance of setInterval() for continuous updates.
✅ How to add interactive features (Easter egg) using event listeners.

🚀 Future Improvements

🔹 Add a dark mode switch.
🔹 Make the clock responsive for mobile screens.
🔹 Add a digital time display below the analog clock.
🔹 Improve animations for a smoother effect.
🔹 Add more hidden surprises!

This documentation helps solidify my learning and serves as a great reference for future projects. 🚀 Keep experimenting and have fun coding! 😃