<!DOCTYPE html>
<html lang="en">
<head>
<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=Unbounded:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
pointer-events: none;
}
body {
font-family: "Unbounded", sans-serif;
display: flex;
justify-content: center;
align-items: center;
line-height: 100%;
vertical-align: middle;
font-weight: 300;
overflow: hidden;
}
.clock_box {
height: 164px;
width: 164px;
background-color: #c2a3d3;
border-radius: 50%;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.circle {
height: calc(100% + 8px);
width: calc(100% + 8px);
position: absolute;
background-color: #212121;
z-index: -1;
border-radius: 50%;
}
.circle span {
height: 50%;
width: 2px;
background-color: #c2a3d3;
display: block;
position: absolute;
top: 0;
left: calc(50% - 1px);
}
.main {
padding: 12px;
}
.day,
.date {
font-size: 12px;
display: block;
}
.time {
font-size: 24px;
display: block;
position: relative;
line-height: 150%;
}
.a {
font-size: 8px;
line-height: 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="clock_box">
<div class="circle">
<span></span>
</div>
<div class="box">
<p class="day"></p>
<p class="time"></p>
<p class="date"></p>
</div>
</div>
</div>
<script>
const daysOfWeek = {
1: "Monday",
2: "Tuesday",
3: "Wednesday",
4: "Thursday",
5: "Friday",
6: "Saturday",
7: "Sunday",
};
const monthsOfYear = {
0: "January",
1: "February",
2: "March",
3: "April",
4: "May",
5: "June",
6: "July",
7: "August",
8: "September",
9: "October",
10: "November",
11: "December",
};
const update = function () {
const now = new Date();
const hours = now.getHours();
let minutes = now.getMinutes();
const seconds = now.getSeconds();
if (minutes < 10) {
minutes = "0" + minutes;
}
document.querySelector(".day").innerText = daysOfWeek[now.getDay()];
document.querySelector(".time").innerHTML = `${hours}:${minutes}`;
document.querySelector(".date").innerText = `${monthsOfYear[now.getMonth()]
} ${now.getDate()}`;
let currentDegree = seconds * 6;
document.querySelector('.circle').style.transform = `rotate(${currentDegree}deg)`
};
setInterval(update, 1000);
</script>
</body>
</html>