<div class="date">3</div>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
.date {font-size: 3rem; font-family: 'Noto Sans KR', sans-serif;}
function getDate() {
    const week = new Array('SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY');
    const today = new Date();
    const dayName = week[today.getDay()];
    const hours = today.getHours() % 12 ? today.getHours() % 12 : 12;
    const minutes = today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes();
    const ampm = today.getHours() >= 12 ? 'PM' : 'AM';
    const date = `${dayName} ${hours}:${minutes} ${ampm}`;

    return date;
}

const update = () => {
    document.querySelector('.date').innerHTML = getDate();
    requestAnimationFrame(update);
};

update();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.