I create a analog clock away from the traditional method.
It have 30 hours
12 seconds = 1 minute
12 minutes = 1 hour
‘Second-hand’ need to complete one circle by 12 steps.
when ‘Second-hand’ complete one circle then, ‘minute-hand’ need to move one step.
like that ‘minute-hand’ need to complete a circle by 12 steps too.
When ‘minute-hand’ complete one circle then, hour circle need to move one step.
In this way ‘hour-hand’ need to complete entire circle’by 30 steps.
But in this program its unable to move ‘minute-hand’ properly.
html code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
<title>Clock</title>
</head>
<body>
<div class="clock">
<div class="hand hour" data-hour-hand></div>
<div class="hand minute" data-minute-hand></div>
<div class="hand second" data-second-hand></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
<div class="number number13">13</div>
<div class="number number14">14</div>
<div class="number number15">15</div>
<div class="number number16">16</div>
<div class="number number17">17</div>
<div class="number number18">18</div>
<div class="number number19">19</div>
<div class="number number20">20</div>
<div class="number number21">21</div>
<div class="number number22">22</div>
<div class="number number23">23</div>
<div class="number number24">24</div>
<div class="number number25">25</div>
<div class="number number26">26</div>
<div class="number number27">27</div>
<div class="number number28">28</div>
<div class="number number29">29</div>
<div class="number number30">30</div>
</div>
</body>
</html>
css code:
*, *::after, *::before {
box-sizing: border-box;
font-family: Gotham Rounded, sans-serif;
}
body {
background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(175, 100%, 50%));
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.clock {
width: 700px;
height: 700px;
background-color: rgba(255, 255, 255, .8);
border-radius: 50%;
border: 2px solid black;
position: relative;
}
.clock .number {
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
font-size: 1.5rem;
}
.clock .number1 { --rotation: 12deg; }
.clock .number2 { --rotation: 24deg; }
.clock .number3 { --rotation: 36deg; }
.clock .number4 { --rotation: 48deg; }
.clock .number5 { --rotation: 60deg; }
.clock .number6 { --rotation: 72deg; }
.clock .number7 { --rotation: 84deg; }
.clock .number8 { --rotation: 96deg; }
.clock .number9 { --rotation: 108deg; }
.clock .number10 { --rotation: 120deg; }
.clock .number11 { --rotation: 132deg; }
.clock .number12 { --rotation: 144deg; }
.clock .number13 { --rotation: 156deg; }
.clock .number14 { --rotation: 168deg; }
.clock .number15 { --rotation: 180deg; }
.clock .number16 { --rotation: 192deg; }
.clock .number17 { --rotation: 204deg; }
.clock .number18 { --rotation: 216deg; }
.clock .number19 { --rotation: 228deg; }
.clock .number20 { --rotation: 240deg; }
.clock .number21 { --rotation: 252deg; }
.clock .number22 { --rotation: 264deg; }
.clock .number23 { --rotation: 276deg; }
.clock .number24 { --rotation: 288deg; }
.clock .number25 { --rotation: 300deg; }
.clock .number26 { --rotation: 312deg; }
.clock .number27 { --rotation: 324deg; }
.clock .number28 { --rotation: 336deg; }
.clock .number29 { --rotation: 348deg; }
.clock .number30 { --rotation: 360deg; }
.clock .hand {
--rotation: 0;
position: absolute;
bottom: 50%;
left: 50%;
border: 1px solid white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transform-origin: bottom;
z-index: 10;
transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}
.clock::after {
content: '';
position: absolute;
background-color: black;
z-index: 11;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.clock .hand.second {
width: 3px;
height: 45%;
background-color: red;
}
.clock .hand.minute {
width: 7px;
height: 40%;
background-color: #443f3f;
}
.clock .hand.hour {
width: 10px;
height: 35%;
background-color: black;
}
javascript code :
document.addEventListener("DOMContentLoaded", function () {
const hourHand = document.querySelector("[data-hour-hand]");
const minuteHand = document.querySelector("[data-minute-hand]");
const secondHand = document.querySelector("[data-second-hand]");
let totalMilliseconds = 0;
let previousSecond = 0;
let secondsCounter = 0;
function updateClock() {
// Calculate Sinhala time with 12 minutes per hour
const sinhalaHours = Math.floor(totalMilliseconds / (30 * 60 * 12 * 1000));
const remainingMilliseconds = totalMilliseconds % (30 * 60 * 12 * 1000);
const sinhalaMinutes = Math.floor(remainingMilliseconds / (60 * 12 * 1000));
const sinhalaSeconds = Math.floor((remainingMilliseconds % (60 * 12 * 1000)) / 1000);
// Check if a new second circle has started
if (sinhalaSeconds < previousSecond) {
// Increment minute only when a new second circle starts
sinhalaMinutes++;
// Reset the seconds counter
secondsCounter = 0;
}
// Calculate degrees for each hand
const hourDeg = (sinhalaHours + sinhalaMinutes / 60) * 360 / 30;
const minuteDeg = (sinhalaMinutes + sinhalaSeconds % 12) * 360 / 12; // Adjust for 12 steps
const secondDeg = (sinhalaSeconds % 12) * 360 / 12; // Adjust for 12 steps
// Apply rotations to the clock hands
hourHand.style.transform = `rotate(${hourDeg}deg)`;
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
secondHand.style.transform = `rotate(${secondDeg}deg)`;
// Update the previous second and seconds counter
previousSecond = sinhalaSeconds;
secondsCounter++;
}
// Update the total milliseconds and the clock every 1000 milliseconds (1 second)
setInterval(function () {
totalMilliseconds += 1000;
updateClock();
}, 1000);
// Initial call to set the clock when the page loads
updateClock();
});
