diff --git a/main.css b/main.css index 5876d15..a4a1380 100644 --- a/main.css +++ b/main.css @@ -16,6 +16,9 @@ } .clock { + background: url(https://media.geeksforgeeks.org/wp-content/uploads/20210302161254/imgonlinecomuaCompressToSizeOmNATjUMFKw-300x300.jpg); + background-size: 100%; + width: 30rem; height: 30rem; border:20px solid white; @@ -47,4 +50,4 @@ transform: rotate(90deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); - } \ No newline at end of file + } diff --git a/script.js b/script.js index a3b083f..ebd3d4a 100644 --- a/script.js +++ b/script.js @@ -7,15 +7,15 @@ const secondHand = document.querySelector('.second-hand'); const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; - secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + 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)`; + 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)`; + hourHand.style.transform = "rotate(" + hourDegrees + "deg)"; } setInterval(setDate, 1000);