<html>
<head>
<style>
body {
background: #222222;
}
.datetime {
font-size: 16px;
padding: 24px;
color: #ffffff;
background: #444444;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
border-radius: 4px;
border-right: 10px #009578 solid;
width: 400px;
font-weight: 500;
font-family: "Inter", sans-serif;
}
.time {
font-size: 3em;
color: #00ffcc;
}
.date {
margin-top: 12px;
font-size: 1.75em;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div class="datetime">
<div class="time"></div>
<div class="date"></div>
</div>
</body>
<script>
const timeElement = document.querySelector(".time");
const dateElement = document.querySelector(".date");
/**
* @param {Date} date
*/
function formatTime(date) {
const hours12 = date.getHours() % 12 || 12;
const minutes = date.getMinutes();
const isAm = date.getHours() < 12;
return `${hours12.toString().padStart(2, "0")}:${minutes
.toString()
.padStart(2, "0")} ${isAm ? "AM" : "PM"}`;
}
/**
* @param {Date} date
*/
function formatDate(date) {
const DAYS = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
const MONTHS = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
return `${DAYS[date.getDay()]}, ${
MONTHS[date.getMonth()]
} ${date.getDate()} ${date.getFullYear()}`;
}
setInterval(() => {
const now = new Date();
timeElement.textContent = formatTime(now);
dateElement.textContent = formatDate(now);
}, 200);
</script>
</html>