About

-->

// update date function updateDate() { const now = new Date(); const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const dateString = now.toLocaleDateString(undefined, options); document.querySelector('.date').textContent = dateString; } // update time function updateTime() { const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); const timeString = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}`; document.querySelector('.time').textContent = timeString; } function formatTime(time) { return time < 10 ? `0${time}` : time; } // callback functions updateDate(); setInterval(updateTime, 1000); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); :root{ --clr-primary: rgba(0,213,255,1); --clr-container-bg: #fff; } *{ box-sizing: border-box; margin: 0; padding: 0; } body { font-family: sans-serif; min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--clr-primary); font-family: 'poppins'; position: relative; } .container{ height: 200px; width: 350px; background-color: #092646; border: none; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; } .clock{ color: var(--clr-primary); font-family: "Arial", sans-serif; font-size: 48px; letter-spacing: 2px; } .date{ color: #fff; font-family: "Arial", sans-serif; font-size: 24px; letter-spacing: 2px; } .attribute{ position: absolute; bottom: 10px; } @media (max-width:768px) { .container{ width: 300px; } }