cource wesbos#1 done

Author: Jin Xu

01 - JavaScript Drum Kit/index-START.html

@@ -58,7 +58,19 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+window.onload = function(){
+  window.addEventListener('keydown', function(e){
+    var keyNum = e.keyCode;
+    document.querySelector('.key[data-key="'+keyNum+'"]').classList.add('playing')
+    var audio = document.querySelector('audio[data-key="'+keyNum+'"]');
+    audio.currentTime = 0;
+    audio.play();
+  })
+  window.addEventListener('keyup', function(e){
+    var keyNum = e.keyCode;
+    document.querySelector('.key[data-key="'+keyNum+'"]').classList.remove('playing')
+  })
+}
 </script>
 
 

readme.md

@@ -1,17 +1,36 @@
-![](https://javascript30.com/images/JS3-social-share.png)
-
 # JavaScript30
 
-Starter Files + Completed solutions for the JavaScript 30 Day Challenge. 
-
-Grab the course at [https://JavaScript30.com](https://JavaScript30.com)
-
-Text-based guides (unofficial) for the challenges can be found here - [Text Guides](https://github.com/nitishdayal/JavaScript30).
-
-## Pull Requests
-
-These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos. 
-
-The starter files + solutions will be updated if/when the videos are updated. 
-
-Thanks!
+> Course [JavaScript30](https://javascript30.com) created by [Wes Bos](https://github.com/wesbos)    
+
+> Folked repo for practice and fun!
+
+1. [x]  ~~JavaScript Drum Kit~~
+2. [ ] JS + CSS Clock 
+3. [ ] CSS Variables 
+4. [ ] Array Cardio, Day 1 
+5. [ ] Flex Panel Gallery
+6. [ ] Type Ahead
+7. [ ] Array Cardio, Day 2
+8. [ ] Fun with HTML5 Canvas
+9. [ ] Dev Tools Domination
+10. [ ] Hold Shift and Check Checkboxes
+11. [ ] Custom Video Player
+12. [ ] Key Sequence Detection
+13. [ ] Slide in on Scroll
+14. [ ] JavaScript References vs. Copying
+15. [ ] LocalStorage
+16. [ ] Mouse Move Shadow
+17. [ ] Sort Without Articles
+18. [ ] Adding Up Times with Reduce
+19. [ ] Webcam Fun
+20. [ ] Speech Detection
+21. [ ] Geolocation
+22. [ ] Follow Along Link Highlighter
+23. [ ] Speech Synthesis
+24. [ ] Sticky Nav
+25. [ ] Event Capture, Propagation, Bubbling, and Once
+26. [ ] Stripe Follow Along Nav
+27. [ ] Click and Drag
+28. [ ] Video Speed Controller
+29. [ ] Countdown Timer
+30. [ ] Whack A Mole