Skip to content

Commit 078a902

Browse files
author
Jonathan Alorda
committed
Finished CSS clock\! There is so much already available to us with CSS and built-in time object methods. I refactored the solution to call the clockEngine function.
1 parent b4b5eed commit 078a902

1 file changed

Lines changed: 27 additions & 1 deletion

File tree

‎02 - JS + CSS Clock/index-START.html‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
.clock {
3737
width: 30rem;
3838
height: 30rem;
39-
border:20px solid white;
39+
border:20px solid yellow;
4040
border-radius:50%;
4141
margin:50px auto;
4242
position: relative;
@@ -61,13 +61,39 @@
6161
background:black;
6262
position: absolute;
6363
top:50%;
64+
transform-origin: 100%;
65+
/*transform: rotate(90deg);*/
66+
transition: all 0.05s;
67+
transition-timing-function: cubic-bezier(.86,2.63,.36,1);
6468
}
6569

6670
</style>
6771

6872
<script>
73+
const secondHand = document.querySelector('.second-hand');
74+
const minuteHand = document.querySelector('.min-hand');
75+
const hourHand = document.querySelector('.hour-hand');
6976

77+
// refactored fn:
78+
function clockEngine(timeUnit, timeUnitQty, timeElem) {
79+
const timeDegrees = ((timeUnit / timeUnitQty) * 360) + 90;
80+
timeElem.style.transform = `rotate(${timeDegrees}deg)`;
81+
}
82+
83+
function setDate() {
84+
const now = new Date();
85+
const seconds = now.getSeconds();
86+
const minutes = now.getMinutes()
87+
const hour = now.getHours()
88+
89+
clockEngine(seconds, 60, secondHand);
90+
clockEngine(minutes, 60, minuteHand);
91+
clockEngine(hour, 12, hourHand);
92+
93+
console.log(`${hour} : ${minutes} : ${seconds}`);
94+
}
7095

96+
setInterval(setDate, 1000);
7197
</script>
7298
</body>
7399
</html>

0 commit comments

Comments
 (0)