Challenge wesbos#2

Author: Kennie-create

01 - JavaScript Drum Kit/index-START.html

@@ -58,7 +58,25 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  window.addEventListener('keydown',function(e){
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
+    if (!audio) return
+    audio.currentTime = 0;
+    audio.play();
 
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
+    key.classList.add("playing")
+    
+    function removeTransition (e){
+      key.classList.remove("playing")
+    }
+
+    const keys = document.querySelectorAll(".key");
+    keys.forEach(key => key.addEventListener('transitionend' , removeTransition));
+    
+    // console.log(audio);
+    // console.log(key);
+});
 </script>
 
 

02 - JS and CSS Clock/index-START.html

@@ -62,12 +62,36 @@
       background: black;
       position: absolute;
       top: 50%;
+      transform-origin: 100% 50%;
+      transform: rotate(90deg);
+      transition: all 1s;
+      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1)
     }
 
   </style>
 
   <script>
 
+  const secondHand = document.querySelector(".second-hand")
+  // secondHand refers to the "seconds" hand
+
+  function setDate(){
+  const now = new Date();
+  const seconds = now.getSeconds();
+  const secondDegrees = ((seconds / 60) * 360) + 90;
+
+  secondHand.style.transform = `rotate(${secondDegrees}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)
 
   </script>
 </body>