From 3128aea143ef071355b472a2be8fcce2a1eb4e6f Mon Sep 17 00:00:00 2001
From: mmcgraw73 <michael@mcgraw.codes>
Date: Fri, 9 Dec 2016 16:37:03 -0500
Subject: [PATCH] added click event to the keys

---
 01 - JavaScript Drum Kit/index-START.html | 129 ++++++++++++++++------
 1 file changed, 97 insertions(+), 32 deletions(-)
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..d88bc75bae 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -1,64 +1,129 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>JS Drum Kit</title>
-  <link rel="stylesheet" href="http://github.com/style.css">
+    <meta charset="UTF-8">
+    <title>JS Drum Kit</title>
+    <link rel="stylesheet" href="http://github.com/style.css">
 </head>
 <body>
 
 
-  <div class="keys">
+<div class="keys">
     <div data-key="65" class="key">
-      <kbd>A</kbd>
-      <span class="sound">clap</span>
+        <kbd>A</kbd>
+        <span class="sound">clap</span>
     </div>
     <div data-key="83" class="key">
-      <kbd>S</kbd>
-      <span class="sound">hihat</span>
+        <kbd>S</kbd>
+        <span class="sound">hihat</span>
     </div>
     <div data-key="68" class="key">
-      <kbd>D</kbd>
-      <span class="sound">kick</span>
+        <kbd>D</kbd>
+        <span class="sound">kick</span>
     </div>
     <div data-key="70" class="key">
-      <kbd>F</kbd>
-      <span class="sound">openhat</span>
+        <kbd>F</kbd>
+        <span class="sound">openhat</span>
     </div>
     <div data-key="71" class="key">
-      <kbd>G</kbd>
-      <span class="sound">boom</span>
+        <kbd>G</kbd>
+        <span class="sound">boom</span>
     </div>
     <div data-key="72" class="key">
-      <kbd>H</kbd>
-      <span class="sound">ride</span>
+        <kbd>H</kbd>
+        <span class="sound">ride</span>
     </div>
     <div data-key="74" class="key">
-      <kbd>J</kbd>
-      <span class="sound">snare</span>
+        <kbd>J</kbd>
+        <span class="sound">snare</span>
     </div>
     <div data-key="75" class="key">
-      <kbd>K</kbd>
-      <span class="sound">tom</span>
+        <kbd>K</kbd>
+        <span class="sound">tom</span>
     </div>
     <div data-key="76" class="key">
-      <kbd>L</kbd>
-      <span class="sound">tink</span>
+        <kbd>L</kbd>
+        <span class="sound">tink</span>
     </div>
-  </div>
+</div>
 
-  <audio data-key="65" src="http://github.com/sounds/clap.wav"></audio>
-  <audio data-key="83" src="http://github.com/sounds/hihat.wav"></audio>
-  <audio data-key="68" src="http://github.com/sounds/kick.wav"></audio>
-  <audio data-key="70" src="http://github.com/sounds/openhat.wav"></audio>
-  <audio data-key="71" src="http://github.com/sounds/boom.wav"></audio>
-  <audio data-key="72" src="http://github.com/sounds/ride.wav"></audio>
-  <audio data-key="74" src="http://github.com/sounds/snare.wav"></audio>
-  <audio data-key="75" src="http://github.com/sounds/tom.wav"></audio>
-  <audio data-key="76" src="http://github.com/sounds/tink.wav"></audio>
+<audio data-key="65" src="http://github.com/sounds/clap.wav"></audio>
+<audio data-key="83" src="http://github.com/sounds/hihat.wav"></audio>
+<audio data-key="68" src="http://github.com/sounds/kick.wav"></audio>
+<audio data-key="70" src="http://github.com/sounds/openhat.wav"></audio>
+<audio data-key="71" src="http://github.com/sounds/boom.wav"></audio>
+<audio data-key="72" src="http://github.com/sounds/ride.wav"></audio>
+<audio data-key="74" src="http://github.com/sounds/snare.wav"></audio>
+<audio data-key="75" src="http://github.com/sounds/tom.wav"></audio>
+<audio data-key="76" src="http://github.com/sounds/tink.wav"></audio>
 
 <script>
+    function DrumKit() {
+        this.init();
+    }
+    ;
+    !(function () {
+        DrumKit.prototype = {
+            constructor: DrumKit,
+            init: function () {
+                this.settings = {
+                    keysWrap: document.querySelector('.keys'),
+                    keys: document.querySelectorAll('.key')
+                };
 
+                this.playSoundMouse();
+                this.effectHandler();
+                this.playSoundKeyboard();
+            },
+            playSoundMouse: function () {
+                var self = this,
+                        keysWrap = self.settings.keysWrap,
+                        target, keyEl, sound, keyVal, audEl;
+                document.addEventListener('mousedown', function (e) {
+                    target = e.target;
+                    if (target.parentElement.classList.contains('key') || target.classList.contains('key')) {
+                        if (target.parentElement.classList.contains('key')) {
+                            keyVal = target.parentElement.getAttribute('data-key');
+                            target.parentElement.classList.add('playing');
+                        } else if (target.classList.contains('key')) {
+                            keyVal = target.getAttribute('data-key');
+                            target.classList.add('playing');
+                        }
+                        audEl = document.querySelector('audio[data-key="' + keyVal + '"]');
+                        sound = new Audio(audEl.src);
+                        sound.play();
+                    }
+                });
+            },
+            playSoundKeyboard: function () {
+                document.addEventListener('keydown', function (event) {
+                    var kc = event.keyCode,
+                            audEl = document.querySelector('audio[data-key="' + kc + '"]'),
+                            keyEl = document.querySelector('div[data-key="' + kc + '"]'),
+                            sound;
+                    if (audEl) {
+                        sound = new Audio(audEl.src);
+                        sound.play();
+                        keyEl.classList.add('playing');
+                    }
+                });
+            },
+            effectHandler: function () {
+                var self = this,
+                        keys = self.settings.keys;
+                keys.forEach(function (element) {
+                    element.addEventListener('transitionend', function (e) {
+                        element.classList.remove('playing');
+                    });
+                });
+            }
+        }
+        document.addEventListener('DOMContentLoaded', function () {
+            //console.log('yodawg, DOM be good!!');
+            var drumkit = new DrumKit();
+        });
+
+    })();
 </script>
 
 
