Day 1 and Day 2 completed

nrvarun · nrvarun · commit 7b9b7f4ad2e3 · 2016-12-20T12:46:45.000+05:30
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -58,7 +58,21 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+const keys = document.querySelectorAll('.key');
+keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+function removeTransition(e) {
+  this.classList.remove('playing');
+}
 
+function playSound(e) {
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  key.classList.add('playing');
+  console.log()
+  audio.currentTime = 0;
+  audio.play();
+}
+window.addEventListener('keydown', playSound);
 </script>
 
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
@@ -62,11 +62,44 @@
       position: absolute;
       top:50%;
     }
+    .second-hand {
+      height: 3px;
+      background-color: #fefefe;
+      box-shadow: 1px 1px 2px grey;
+      transform: rotate(90deg);
+      transform-origin: right; 
+    }
+    .min-hand, 
+    .hour-hand {
+      transform: rotate(90deg);
+      transform-origin: right;
+      transition: all 0.05s cubic-bezier(0, 2.87, 1, 1.41);
+    }
 
   </style>
 
   <script>
+    function setTime() {
+
+      const now = new Date();
+      const mins = now.getMinutes();
+      const hrs  = now.getHours();
+      const secs = now.getSeconds();
+
+      const hrsDeg  = ((hrs/12)*360) + 90;
+      const secsDeg = ((secs / 60) * 360) + 90;
+      const minsDeg = ((mins / 60) * 360) + 90;
+
+      const secHand = document.querySelector('.hand.second-hand');
+      const minHand = document.querySelector('.hand.min-hand');
+      const hourHand = document.querySelector('.hand.hour-hand');
+
+      secHand.style.transform = `rotate(${secsDeg}deg)`;
+      minHand.style.transform = `rotate(${minsDeg}deg)`;
+      hourHand.style.transform = `rotate(${hrsDeg}deg)`;
+    }
 
+    setInterval(setTime, 100);
 
   </script>
 </body>
