From 1dd116a4081893fa7c3c4331c6c5925d58262bf6 Mon Sep 17 00:00:00 2001
From: Arkadiusz Chatys <achatys@squiz.pl>
Date: Mon, 12 Dec 2016 14:12:59 +0100
Subject: [PATCH 1/2] 01 - JavaScript Drum Kit - SOLVED

---
 01 - JavaScript Drum Kit/index-START.html |  2 +-
 01 - JavaScript Drum Kit/script.js        | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 01 - JavaScript Drum Kit/script.js

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..fe20f3a6ab 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -61,6 +61,6 @@
 
 </script>
 
-
+<script src="http://github.com/script.js"></script>
 </body>
 </html>
diff --git a/01 - JavaScript Drum Kit/script.js b/01 - JavaScript Drum Kit/script.js
new file mode 100644
index 0000000000..3c425e3470
--- /dev/null
+++ b/01 - JavaScript Drum Kit/script.js	
@@ -0,0 +1,22 @@
+function playSound (e) {
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+
+  if (!audio) return;
+  if (!key) return;
+
+  audio.currentTime = 0;
+  audio.play();
+
+  key.classList.add('playing');
+}
+
+function removeTransition (e) {
+  if(e.propertyName !== 'transform') return;
+  this.classList.remove('playing');
+}
+
+window.addEventListener('keydown', playSound);
+
+const keys = document.querySelectorAll('.key');
+keys.forEach(key => key.addEventListener('transitionend', removeTransition));

From a3aef97264ad2d2cc4088f420a9dfc52fa41eb9c Mon Sep 17 00:00:00 2001
From: iamarek <arkadiuszchatys@gmail.com>
Date: Wed, 24 May 2017 19:32:24 +0200
Subject: [PATCH 2/2] Update compositor.json

---
 compositor.json | 90 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 compositor.json

diff --git a/compositor.json b/compositor.json
new file mode 100644
index 0000000000..532f169b3a
--- /dev/null
+++ b/compositor.json
@@ -0,0 +1,90 @@
+{
+  "name": "iamarek/JavaScript30",
+  "version": "0.1.4",
+  "libraries": {
+    "xv": "^1.1.25"
+  },
+  "title": "",
+  "branch": "",
+  "style": {
+    "name": "Brutalist",
+    "componentSet": {
+      "nav": "nav/BasicNav",
+      "header": "header/BasicHeader",
+      "article": "article/MarkdownArticle",
+      "footer": "footer/BasicFooter"
+    },
+    "fontFamily": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
+    "heading": {},
+    "typeScale": [
+      48,
+      32,
+      20,
+      18,
+      16,
+      14,
+      12
+    ],
+    "layout": {
+      "maxWidth": 1024,
+      "fluid": true
+    },
+    "colors": {
+      "text": "#333",
+      "background": "#fff",
+      "primary": "#666",
+      "secondary": "#888",
+      "highlight": "#1f80ff",
+      "muted": "#f6f6f6",
+      "border": "#eee"
+    }
+  },
+  "content": [
+    {
+      "component": "nav",
+      "links": [
+        {
+          "href": "https://github.com/iamarek/JavaScript30",
+          "text": "GitHub"
+        }
+      ]
+    },
+    {
+      "component": "header",
+      "heading": "JavaScript30",
+      "subhead": "30 Day Vanilla JS Challenge",
+      "children": [
+        {
+          "component": "ui/TweetButton",
+          "text": "JavaScript30: 30 Day Vanilla JS Challenge",
+          "url": null
+        },
+        {
+          "component": "ui/GithubButton",
+          "user": "iamarek",
+          "repo": "JavaScript30"
+        }
+      ]
+    },
+    {
+      "component": "article",
+      "metadata": {
+        "source": "github.readme"
+      },
+      "html": "<p><img src=\"https://javascript30.com/images/JS3-social-share.png/"></p>\n\n<p>Starter Files + Completed solutions for the JavaScript 30 Day Challenge. </p>\n<p>Grab the course at <a href=\"https://javascript30.com/">https://JavaScript30.com</a></p>\n<h2>Pull Requests</h2>\n<p>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. </p>\n<p>The starter files + solutions will be updated if/when the videos are updated. </p>\n<p>Thanks!</p>\n"
+    },
+    {
+      "component": "footer",
+      "links": [
+        {
+          "href": "https://github.com/iamarek/JavaScript30",
+          "text": "GitHub"
+        },
+        {
+          "href": "https://github.com/iamarek",
+          "text": "iamarek"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file