Try to build an analog clock,but its Hours hand is not working properly,Help me to solve Hours hand code

const secondHand = document.querySelector('.sec');
const minHand = document.querySelector('.min');
const hoursHand = document.querySelector('.hour');
function setDate()
const now = new Date();
const seconds= now.getSeconds();
const secondsDegree =((seconds /60) *360) + 90;
secondHand.style.transform =`rotate($secondsDegreedeg)`;

const Mins= now.getMinutes();
const minsDegree =((Mins /60) *360) + 90;
minHand.style.transform =`rotate($minsDegreedeg)`;

const hours= now.getHours();
const hoursDegree =((Mins /12) *360) + 90;
hoursHand.style.transform =`rotate($hoursDegreedeg)`;


setInterval(setDate, 1000);

body
background-image: url("sky.jpg");
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
font-size: 2rem;


.face
position: relative;
transform: translateY(-3px);
width: 100%;
height: 100%;

.clock
border: 9px solid red;
width: 21rem;
height: 21rem;
border-radius: 50%;

.hand
transition : all 0.05s;
transform-origin: 100%;
background-color: black;
height: 2px;
width: 50%;
position: absolute;
top: 50%;

.hand.sec
transform: rotate(60deg);
transition-timing-function: cubic-bezier(0.42, 0, 0.82, 1.51);

.hand.hour
height: 3px;
color: black;
font-size: 8px;
background-color: red;

.hand.min
color: black;
background-color: blue;
font-size: 8px;

audio
display: none;


<div class="clock">
<div class="face">
<div class="hand hour"> &nbsp;&nbsp; THIS HAND INDICATE THE HOURS</div>
<div class="hand min">&nbsp;&nbsp;THIS HAND INDICATE THE Minutes</div>
<div class="hand sec"></div>
</div>
</div>

I want to build an analog clock with three hand of hours ,minute and Second. But the hours hand is not working properly.I think there are some problems with the calculation of hours hand.Help me out this problem.

You can also check the css property to solve this problem or change something on my code.

1 Answer
1

Just a few small modifications are needed.

Specifically:

const hoursDegree =(((hours%12)/12) *360.0) + 90;


const secondHand = document.querySelector('.sec');
const minHand = document.querySelector('.min');
const hoursHand = document.querySelector('.hour');
function setDate()
const now = new Date();
const seconds= now.getSeconds();
const secondsDegree =((seconds / 60.0) *360) + 90;
secondHand.style.transform =`rotate($secondsDegreedeg)`;

const Mins= now.getMinutes();
const minsDegree =((Mins / 60.0) *360) + 90;
minHand.style.transform =`rotate($minsDegreedeg)`;

const hours= now.getHours();
const hoursDegree =(((hours%12) / 12.0) *360) + 90;
hoursHand.style.transform =`rotate($hoursDegreedeg)`;


setInterval(setDate, 1000);

body
background-image: url("sky.jpg");
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
font-size: 2rem;


.face
position: relative;
transform: translateY(-3px);
width: 100%;
height: 100%;

.clock
border: 9px solid red;
width: 21rem;
height: 21rem;
border-radius: 50%;

.hand
transition : all 0.05s;
transform-origin: 100%;
background-color: black;
height: 2px;
width: 50%;
position: absolute;
top: 50%;

.hand.sec
transform: rotate(60deg);
transition-timing-function: cubic-bezier(0.42, 0, 0.82, 1.51);

.hand.hour
height: 3px;
color: black;
font-size: 8px;
background-color: red;

.hand.min
color: black;
background-color: blue;
font-size: 8px;

audio
display: none;


<div class="clock">
<div class="face">
<div class="hand hour"> &nbsp;&nbsp; THIS HAND INDICATE THE HOURS</div>
<div class="hand min">&nbsp;&nbsp;THIS HAND INDICATE THE Minutes</div>
<div class="hand sec"></div>
</div>
</div>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy