RGB 12 HOUR FORMAT CLOCK - Posts

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Box Shadow with Digital Clock and Date</title> <style> /* Basic reset for margin and padding */ body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: black; font-family: Arial, sans-serif; }

    /* Create a box with initial styles */
    .box {
        width: 90%;
        height: 90%;
        background-color: black;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 20px 10px rgb(255, 0, 0); /* Initial box shadow color */
        animation: shadow-animation 6s infinite ease-in-out; /* Apply the animation */
        border-radius: 20px; /* Rounds the corners of the box */
        text-align: center;
    }

    /* Styling the clock */
    .clock {
        font-size: 700%;
        font-family: Baskervville SC;
        font-weight: 700;
        color: rgb(255, 0, 0); /* Initial text color */
        animation: text-color-animation 6s infinite ease-in-out; /* Apply the color animation */
    }

    /* Styling the date */
    .date {
        font-size: 300%;
        font-weight: 600;
        color: rgb(255, 0, 0); /* Initial text color */
        animation: text-color-animation 6s infinite ease-in-out; /* Apply the color animation */
        margin-bottom: 7px;
    }
    

    /* Define the keyframes for the shadow animation */
    @keyframes shadow-animation {
        0% {
            box-shadow: 0 0 20px 10px rgb(255, 0, 0); /* Red */
        }
        33% {
            box-shadow: 0 0 20px 10px rgb(0, 255, 0); /* Green */
        }
        66% {
            box-shadow: 0 0 20px 10px rgb(0, 0, 255); /* Blue */
        }
        100% {
            box-shadow: 0 0 20px 10px rgb(255, 0, 0); /* Back to Red */
        }
    }

    /* Define the keyframes for the text color animation */
    @keyframes text-color-animation {
        0% {
            color: rgb(255, 0, 0); /* Red */
        }
        33% {
            color: rgb(0, 255, 0); /* Green */
        }
        66% {
            color: rgb(0, 0, 255); /* Blue */
        }
        100% {
            color: rgb(255, 0, 0); /* Back to Red */
        }
    }
</style>

</head> <body> <div class="box"> <div class="date" id="date"></div> <div class="clock" id="clock">12:00:00 AM</div> </div>

<script>
    function updateClockAndDate() {
        const clockElement = document.getElementById('clock');
        const dateElement = document.getElementById('date');
        const now = new Date();

        // Update the time
        let hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();
        const ampm = hours >= 12 ? 'PM' : 'AM';
        
        hours = hours % 12;
        hours = hours ? hours : 12; // The hour '0' should be '12'
        
        const formattedTime = 
            ('0' + hours).slice(-2) + ':' + 
            ('0' + minutes).slice(-2) + ':' + 
            ('0' + seconds).slice(-2) + ' ' + ampm;
        
        clockElement.textContent = formattedTime;

        // Update the date
        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        const formattedDate = now.toLocaleDateString('en-US', options);
        
        dateElement.textContent = formattedDate;
    }

    setInterval(updateClockAndDate, 1000); // Update the clock and date every second
    updateClockAndDate(); // Initial call to set the time and date immediately
</script>

</body> </html>