Completed exercise 2

tksander · tksander · commit 55cf245da999 · 2016-12-18T20:42:12.000-08:00
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
@@ -61,12 +61,38 @@
 background:black;
 position: absolute;
 top:50%;
+ transform-origin: 100%;
+ transform: rotate(90deg);
+ transition: all 0.5s
+ transition-timing-function: cubic-bezier(1, 2.99, 0.58, 1);
+
 }
 
 </style>
-
 <script>
-
+ setInterval(tick, 1000)
+ function tick(){
+ const date = new Date();
+ const seconds = date.getSeconds();
+ secTick(date.getSeconds())
+ minuteTick(date.getMinutes())
+ hourTick(date.getHours())
+ }
+ function secTick(sec){
+ const secondsDegrees = sec * 6;
+ const handSec = document.querySelector('.hand.second-hand');
+ handSec.style.transform = `rotate(${secondsDegrees}deg)`;
+ }
+ function minuteTick(min){
+ const minDegrees = min * 6;
+ const handMin = document.querySelector('.hand.min-hand');
+ handMin.style.transform = `rotate(${minDegrees}deg)`;
+ }
+ function hourTick(hour){
+ const hourDegrees = hour * 30;
+ const handHour = document.querySelector('.hand.hour-hand');
+ handHour.style.transform = `rotate(${hourDegrees}deg)`;
+ }
 
 </script>
 </body>

-Original file line number
+Diff line change
 background:black;
 position: absolute;
 top:50%;
 +transform-origin:100%;
 +transform:rotate(90deg);
 +transition: all 0.5s
 + transition-timing-function: cubic-bezier(1,2.99,0.58,1);
++
+ }
 </style>
+-
 <script>
+-
 +setInterval(tick,1000)
 +functiontick(){
 +constdate=newDate();
 +constseconds=date.getSeconds();
 +secTick(date.getSeconds())
 +minuteTick(date.getMinutes())
 +hourTick(date.getHours())
 +}
 +functionsecTick(sec){
 +constsecondsDegrees=sec*6;
 +consthandSec=document.querySelector('.hand.second-hand');
 +handSec.style.transform=`rotate(${secondsDegrees}deg)`;
 +}
 +functionminuteTick(min){
 +constminDegrees=min*6;
 +consthandMin=document.querySelector('.hand.min-hand');
 +handMin.style.transform=`rotate(${minDegrees}deg)`;
 +}
 +functionhourTick(hour){
 +consthourDegrees=hour*30;
 +consthandHour=document.querySelector('.hand.hour-hand');
 +handHour.style.transform=`rotate(${hourDegrees}deg)`;
 +}
 </script>
 </body>