Something is wrong in java script section of the code The hour hand is not working properly. It is rotating after every 60 seconds. Also, the minute hand is showing the wrong time. Please check the formula written in js. The formula I have used was also written by gfg. Please explain the necessary changes. Thank you.
const secHand=document.querySelector('.second-hand');
const minhand=document.querySelector('.minute-hand');
const hrhand=document.querySelector('.hour-hand');
function setDate(){
const d=new Date();
const hr=d.getHours();
const m=d.getMinutes();
const sethrdeg= 30*hr + m/2;
hrhand.style.transform=`rotate(${sethrdeg}deg)`;
const setmdeg=6*m;
minhand.style.transform=`rotate(${setmdeg}deg)`;
const s=d.getSeconds();
const setsdeg=6*s;
secHand.style.transform=`rotate(${setsdeg}deg)`;
}
setInterval(setDate,1000);*{
background:url(https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);
margin: 0;
padding: 0;
font-family: Georgia, 'Times New Roman', Times, serif;
background-size: cover;
}
body{
display: flex;
height: 100vh;
align-items: center;
}
.clock{
border : 3px solid black;
border-radius: 50%;
padding: 5px;
position: relative;
left:30rem;
width: 25rem;
height: 25rem;
justify-content: center;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}
.clock-face{
position :relative;
transform: translateY(-3px);
}
.hand{
background: white;
width: 48%;
height: 1.5%;
position: absolute;
top :50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.06s;
transition-timing-function: cubic-bezier(0.1, 1.09, 0.52, 1.26);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<div class="clock">
<div class="clock-face"></div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>
<script src="clock.js"></script>
</body>
</html>The issue about the mispositionned hands was due to the 90 degres rotation needed to show 00:00:00. So in the calculation, you always have to add this 90 degres.
About the calculation itself:
The clock has 360 degres for 12 hours (360/12) and for 60 minutes/seconds (360/60).
To have the hours hand constantly moving beween the hour knotches instead of jumping to it: The hour knotch is (360 * hr) / 12 and the minutes elapsed in this hour is (360 * m) / (12 * 60).
The same concept applies for the minutes hand.
Lastly, the seconds hand was strangely jumping when passing from 59 to 0. That was due to the rotation going from 359 degres to zero instead of going to 360. So in fact the hand was animated backward (counter clockwize) very fast. To fix that, I simply added a line to remove the transition animation when at 0 second.
secHand.classList.toggle("hand-transition", s != 0);
Have a look at .toggle([class],[force]).
const secHand = document.querySelector(".second-hand");
const minhand = document.querySelector(".minute-hand");
const hrhand = document.querySelector(".hour-hand");
function setDate() {
const d = new Date();
const hr = d.getHours();
const m = d.getMinutes();
const s = d.getSeconds();
// Remove the transition at 0 sec.
secHand.classList.toggle("hand-transition", s != 0);
const sethrdeg = (360 * hr) / 12 + (360 * m) / (12 * 60) + 90; // 30 * hr + m / 2;
hrhand.style.transform = `rotate(${sethrdeg}deg)`;
const setmdeg = (360 * m) / 60 + (360 * s) / (60 * 60) + 90; // 6 * m;
minhand.style.transform = `rotate(${setmdeg}deg)`;
const setsdeg = (360 / 60) * s + 90; // 6 * s;
secHand.style.transform = `rotate(${setsdeg}deg)`;
}
setInterval(setDate, 1000);* {
background: url(https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
background-size: cover;
}
body {
display: flex;
height: 100vh;
align-items: center;
}
.clock {
border: 3px solid black;
border-radius: 50%;
padding: 5px;
position: relative;
left: 30rem;
width: 25rem;
height: 25rem;
justify-content: center;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
}
.clock-face {
position: relative;
transform: translateY(-3px);
}
.hand {
background: white;
width: 48%;
height: 1.5%;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
}
/* Specific class for the transition, so it can be removed */
.hand-transition {
transition: all 0.06s;
transition-timing-function: cubic-bezier(0.1, 1.09, 0.52, 1.26);
}
.minute-hand {
background: blue;
}
.hour-hand {
background: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<div class="clock">
<div class="clock-face"></div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>
<script src="clock.js"></script>
</body>
</html>