digital-clock.php

<style type="text/css">@import url("https://fonts.googleapis.com/css?family=Orbitron");
    

    .alarm-clock {
        position: relative;
        padding: 10px;
        border-radius: 10px;
        background-color: tan;
    }
    .alarm-clock .date {
        position: absolute;
        bottom: 15px;
        left: 50%;
        color: white;
        font-size: 12px;
        text-transform: uppercase;
        transform: translateX(-50%);
        z-index: 9;
    }
    .alarm-clock .time {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 40px 15px;
        background-color: #333;
        border-radius: 10px;
        font-family: 'Orbitron', sans-serif;
        font-size: 52px;
    }
    .alarm-clock .time span {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: #e74c3c;
        text-shadow: 0 0 15px rgba(231, 76, 60, 0.4);
        line-height: 1.75;
    }
    .alarm-clock .time span:nth-of-type(5) {
        width: 90px;
    }
    .alarm-clock .time span.colon {
        width: 12px;
        text-align: center;
        animation: blink 2s infinite;
    }

    @keyframes blink {
        0% {
            opacity: 0;
        }
        30% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        70% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
</style>
<div class="alarm-clock">
    <div class="date">
        <span class="month"></span>
        <span class="day"></span>,
        <span class="year"></span>
    </div>

    <div class="time">
        <span class="hours"></span>
        <span class="colon">:</span>
        <span class="minutes"></span>
        <span class="colon">:</span>
        <span class="seconds"></span>
    </div>
</div>
<script type="text/javascript">
    const hours = document.querySelector('.hours');
    const minutes = document.querySelector('.minutes');
    const seconds = document.querySelector('.seconds');

    const month = document.querySelector('.month');
    const day = document.querySelector('.day');
    const year = document.querySelector('.year');

    function setDate() {
        const now = new Date();
        const mm = now.getMonth();
        const dd = now.getDate();
        const yyyy = now.getFullYear();
        const secs = now.getSeconds();
        const mins = now.getMinutes();
        const hrs = now.getHours();
        const monthName = [
            'January', 'February', 'March', 'April',
            'May', 'June', 'July', 'August', 'September',
            'October', 'November', 'December'];


        if (hrs > 12) {
            hours.innerHTML = hrs - 12;
        } else {
            hours.innerHTML = hrs;
        }

        if (secs < 10) {
            seconds.innerHTML = '0' + secs;
        } else {
            seconds.innerHTML = secs;
        }

        if (mins < 10) {
            minutes.innerHTML = '0' + mins;
        } else {
            minutes.innerHTML = mins;
        }

        month.innerHTML = monthName[mm];
        day.innerHTML = dd;
        year.innerHTML = yyyy;
    }

    setInterval(setDate, 1000);

</script>