From 5e8bb2f4d77aff09897c515e1f7fa72ce664f5e2 Mon Sep 17 00:00:00 2001
From: AntonEmery <antonemery@gmail.com>
Date: Fri, 16 Dec 2016 07:39:37 -0800
Subject: [PATCH] exercise 1 finished

---
 01 - JavaScript Drum Kit/index-START.html | 36 +++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..ca15491dd5 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,43 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+ var dataKeyList = document.querySelectorAll('[data-key][class]');
+ var dataKeyValuesOnly = [];
 
+ for(var i=0; i<dataKeyList.length; i++) {
+  var value = dataKeyList[i].getAttribute('data-key');
+  dataKeyValuesOnly.push(value);
+ }
+
+
+ document.addEventListener('keydown', function(event) {
+   var keypressed = event.which;
+  if (checkKey(keypressed)) {
+    var returnedElements = document.querySelectorAll('[data-key="' + keypressed + '"]');
+    returnedElements[0].setAttribute('class', 'playing');
+    returnedElements[1].play();
+  }
+})
+
+ document.addEventListener('keyup', function(event) {
+  var keypressed = event.which;
+  if (checkKey(keypressed)) {
+    var returnedElements = document.querySelectorAll('[data-key="' + keypressed + '"]');
+    returnedElements[0].setAttribute('class', 'key');
+    returnedElements[1].pause();
+    returnedElements[1].currentTime = 0;
+  }
+})
+
+function checkKey(keypressed) {
+  for(var i = 0; i<dataKeyValuesOnly.length; i++) {
+    if(keypressed == dataKeyValuesOnly[i]) {
+      return true;
+  } else if (i == dataKeyValuesOnly.length) {
+      return false;
+    }
+  }
+}
 </script>