text copied
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>TimeZ</title>
</head>
<body>
<div class="container">
<div class="outermost-clock-wrapper">
<div class="outer-clock">
<div class="center"></div>
<div id="hourhand" class="timehand">
<div id="point"></div>
</div>
<div id="minutehand" class="timehand">
<div id="smallStick">
<p id="minuteValue">00</p>
</div>
</div>
<div id="secondhand" class="timehand">
<div id="stick"></div>
</div>
<div class="clock">
<div class="hour" id="hour-1">
<div class="hour-digit" id="hour-digit-1">1</div>
</div>
<div class="hour" id="hour-2">
<div class="hour-digit" id="hour-digit-2">2</div>
</div>
<div class="hour" id="hour-3">
<div class="hour-digit" id="hour-digit-3">3</div>
</div>
<div class="hour" id="hour-4">
<div class="hour-digit" id="hour-digit-4">4</div>
</div>
<div class="hour" id="hour-5">
<div class="hour-digit" id="hour-digit-5">5</div>
</div>
<div class="hour" id="hour-6">
<div class="hour-digit" id="hour-digit-6">6</div>
</div>
<div class="hour" id="hour-7">
<div class="hour-digit" id="hour-digit-7">7</div>
</div>
<div class="hour" id="hour-8">
<div class="hour-digit" id="hour-digit-8">8</div>
</div>
<div class="hour" id="hour-9">
<div class="hour-digit" id="hour-digit-9">9</div>
</div>
<div class="hour" id="hour-10">
<div class="hour-digit" id="hour-digit-10">10</div>
</div>
<div class="hour" id="hour-11">
<div class="hour-digit" id="hour-digit-11">11</div>
</div>
<div class="hour" id="hour-12">
<div class="hour-digit" id="hour-digit-12">12</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
text copied
CSS
/* CSS RESET */
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: 'inter';
}
.container{
background-color: #efe7f5;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.outermost-clock-wrapper{
background-color: white;
border-radius: 50%;
box-shadow: 2px 2px 31px 2px #d5cedd;
padding: 13px;
}
.outer-clock{
padding: 12px;
background-color: white;
border-radius: 50%;
position: relative;
z-index: 0;
}
/* CLOCK */
.clock{
background-color: rgba(255, 255, 255, 0);
height: 300px;
width: 300px;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.hour{
position: absolute;
top: 0%;
height: 50%;
width: 5px;
transform-origin: 50% 100%;
display: flex;
justify-content: center;
z-index: 566;
}
.center{
height: 15px;
width: 15px;
background-color: #9767cc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 35;
border-radius: 50%;
}
/* CLOCK HOUR HAND */
#hour-1{
transform: rotate(30deg);
}
#hour-2{
transform: rotate(60deg);
}
#hour-3{
transform: rotate(90deg);
}
#hour-4{
transform: rotate(120deg);
}
#hour-5{
transform: rotate(150deg);
}
#hour-6{
transform: rotate(180deg);
}
#hour-7{
transform: rotate(210deg);
}
#hour-8{
transform: rotate(240deg);
}
#hour-9{
transform: rotate(270deg);
}
#hour-10{
transform: rotate(300deg);
}
#hour-11{
transform: rotate(330deg);
}
/* CLOCK HOUR DIGIT */
.hour-digit{
text-align: center;
position: absolute;
font-size: 21px;
z-index: 566;
color: black;
}
#hour-digit-1{
transform: rotate(-30deg);
}
#hour-digit-2{
transform: rotate(-60deg)
}
#hour-digit-3{
transform: rotate(-90deg)
}
#hour-digit-4{
transform: rotate(-1200deg)
}
#hour-digit-5{
transform: rotate(-150deg)
}
#hour-digit-6{
transform: rotate(-180deg)
}
#hour-digit-7{
transform: rotate(-210deg)
}
#hour-digit-8{
transform: rotate(-240deg)
}
#hour-digit-9{
transform: rotate(-270deg)
}
#hour-digit-10{
transform: rotate(-300deg)
}
#hour-digit-11{
transform: rotate(-330deg)
}
/* TIME HAND */
.timehand{
position: absolute;
top: 0px;
left: 50%;
height: 50%;
z-index: 1;
transform: translateX(-50%);
transform-origin: 50% 100%;
}
/* SECOND HAND */
#stick{
position: absolute;
top: 0px;
left: 50%;
height: 100%;
width: 5px;
background-color: #9767cc;
transform: translateX(-50%);
z-index: 3;
}
/* HOUR POINT */
#point{
position: absolute;
top: 0px;
left: 50%;
height: 50px;
width: 50px;
transform: translateX(-50%);
border-radius: 50%;
background-color: #ceabf6;
z-index: 1;
}
/* MINUTE HAND */
#smallStick{
position: absolute;
top: 0px;
left: 50%;
height: 40px;
width: 40px;
background-color: #4e2c8e;
transform: translateX(-50%);
border-radius: 50%;
z-index: 1;
margin-top: 58px;
color:white;
display: flex;
align-items: center;
justify-content: center;
}
text copied
JS
let secondHand = document.getElementById('secondhand');
let minuteHand = document.getElementById('minutehand');
let hourHand = document.getElementById('hourhand');
let minute = document.querySelector('#minuteValue');
function updateClock(){
let currentTime = new Date();
let currentHour = currentTime.getHours();
let currentMinute = currentTime.getMinutes();
let currentSecond = currentTime.getSeconds();
let hrPosition = (currentHour*30)+(currentMinute*1/2)+(currentSecond*1/120);
let minPosition = (currentMinute*6)+ (currentSecond*1/10);
let secPosition = (currentSecond*6);
// rotating hour, minute and second hand position
hourHand.style.transform = `rotate(${hrPosition}deg)`;
minuteHand.style.transform = `rotate(${minPosition}deg)`;
secondHand.style.transform = `rotate(${secPosition}deg)`;
// Display Current Minute in Minute Hand
if(currentMinute < 10){
console.log(currentMinute)
minute.innerHTML = `0${currentMinute}`;
}
else{
minute.innerHTML = `${currentMinute}`;
}
minute.style.transform = `rotate(-${minPosition}deg)`;
}
setInterval(updateClock, 1000);