Can someone please help me with my code?
I am trying to build a simple clock and I thought that my code looks good, but it does not move on my end. Help please. Thanks <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>JS + CSS Clock</title> </head> <body> <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> <style> html { background: #018ded url(http://unsplash.it/1500/1000?image=881&blur=5); background-size: cover; font-family: 'helvetica neue'; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } .clock { width: 30rem; height: 30rem; border: 20px solid white; border-radius: 50%; margin: 50px auto; position: relative; padding: 2rem; 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; width: 100%; height: 100%; transform: translateY( -3px ); /* account for the height of the clock hands */ } .hand { width: 50%; height: 6px; background: black; position: absolute; top: 50%; transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0, 1); } </style> <script> const secondHand = document.querySelector('.second-hand'); const minsHand = document.querySelector('.min-hand'); const hourHand = document.querySelector('.hour-hand'); function setdate() { const now
Often have questions like this?
Learn more efficiently, for free:
