diff --git a/01 - JavaScript Drum Kit/main.js b/01 - JavaScript Drum Kit/main.js
new file mode 100644
index 0000000000..45a4639cc2
--- /dev/null
+++ b/01 - JavaScript Drum Kit/main.js
@@ -0,0 +1,17 @@
+window.addEventListener('keydown', function(e){
+ // KeyCode represents code of the current key being pressed
+ // The variable 'keys' is creating an array of each element on the page
+ // with the class name 'key'
+ var keyCode = e.keyCode;
+ var keys = document.getElementsByClassName('key');
+
+ // Below, we are looping through each element in our 'keys' array and
+ // checking to see if it's data-key matches our keyCode variable.
+ for(i = 0; i < keys.length; i++){
+ var data_key = keys[i].dataset.key;
+
+ if(keyCode == data_key){
+ keys[i].classList.add("playing");
+ }
+ }
+});
diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html
new file mode 100644
index 0000000000..a6a375f456
--- /dev/null
+++ b/03 - CSS Variables/index.html
@@ -0,0 +1,78 @@
+
+
++
+ Scoped CSS Variables and JS
+
+
+
+
+
+
+
+