const secondHand = document.querySelector('.second-hand'); const minsHand = document.querySelecetor('.min-hand'); const hourHand = document.querySelector('.hour-hand'); function setDate() { const now = new Date(); const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; secondHand.style.transform = `rotate(${secondsDegrees}deg)`; const mins = now.getMinutes(); const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90; minsHand.style.transform = `rotate(${minsDegrees}deg)`; const hour = now.getHours(); const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90; hourHand.style.transform = `rotate(${hourDegrees}deg)`; } setInterval(setDate, 1000); setDate(); .hand { width: 50%; height: 6px; background: black; position: absolute; top: 50%; transform-origin: 100%; transform: rotate(120deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } <div class="clock"> <div class="clock-face"> <div class="hand hour-hand"></div> <div class="hand min-hand"></div> <div class="hand second-hand"></div> </div> </div>la hora y el minutero no aparecen cuando ejecuto este código. solo aparece una mano en la página web. la propiedad de transformación para rotarlo (120 grados) no funciona (desde el centro/punto de pivote)
Es porque escribiste mal "querySelector". Escribiste:
const minsHand = document.querySelecetor('.min-hand');