From 5c81292a97aa2e5de248eaa33668847935885e83 Mon Sep 17 00:00:00 2001
From: Mateusz Kaczmarek <mateusz@kacz.pl>
Date: Sun, 11 Dec 2016 08:51:54 +0100
Subject: [PATCH 1/3] JS#1

---
 01 - JavaScript Drum Kit/index-START.html | 38 +++++++++++++++++------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..c825d1420d 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -47,18 +47,38 @@
     </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" id="65" src="http://github.com/sounds/clap.wav"></audio>
+  <audio data-key="83" id="83" src="http://github.com/sounds/hihat.wav"></audio>
+  <audio data-key="68" id="68" src="http://github.com/sounds/kick.wav"></audio>
+  <audio data-key="70" id="70" src="http://github.com/sounds/openhat.wav"></audio>
+  <audio data-key="71" id="71" src="http://github.com/sounds/boom.wav"></audio>
+  <audio data-key="72" id="72" src="http://github.com/sounds/ride.wav"></audio>
+  <audio data-key="74" id="74" src="http://github.com/sounds/snare.wav"></audio>
+  <audio data-key="75" id="75" src="http://github.com/sounds/tom.wav"></audio>
+  <audio data-key="76" id="76" src="http://github.com/sounds/tink.wav"></audio>
 
 <script>
 
+  function playSound(e) {
+    var audioSelector = "audio[data-key='" + String(e.keyCode) + "']";
+    var keySelector = ".key[data-key='" + String(e.keyCode) + "']";
+    const audio = document.querySelector(audioSelector);
+    const key = document.querySelector(keySelector);
+    if(!audio) return;
+
+    audio.currentTime = 0;
+    audio.play();
+    key.classList.add('playing'); 
+
+    setTimeout(function() {
+      key.classList.remove('playing');
+    }, 300);
+  }
+
+  window.addEventListener('keydown', playSound);
+
+
+
 </script>
 
 

From 07389c4acce7654e4c540ef7677b067d2213d663 Mon Sep 17 00:00:00 2001
From: Mateusz Kaczmarek <mateusz@kacz.pl>
Date: Sun, 11 Dec 2016 10:58:17 +0100
Subject: [PATCH 2/3] JS30 #2

---
 02 - JS + CSS Clock/index-START.html | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..f2cea753eb 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -25,6 +25,12 @@
       font-size: 10px;
     }
 
+    span {
+      color: red;
+      text-transform: uppercase;
+      font-size: 10px;
+    }
+
     body {
       font-size: 2rem;
       display:flex;
@@ -61,13 +67,35 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.2s cubic-bezier(0.56, 1.71, 0.25, 1)
     }
 
   </style>
 
   <script>
+  const secondHand = document.querySelector('.second-hand');
+  const minHand = document.querySelector('.min-hand');
+  const hourHand = document.querySelector('.hour-hand');
+
+  function setDate() {
+    const now = new Date();
+
+    const seconds = now.getSeconds();    
+    const secondsDegrees = (seconds / 60) * 360 + 90;
+    secondHand.style.transform = "rotate(" + secondsDegrees + "deg)"; 
+
+    const mins = now.getMinutes();    
+    const minDegrees = (mins / 60) * 360 + 90;
+    minHand.style.transform = "rotate(" + minDegrees + "deg)"; 
 
+    const hours = now.getHours();    
+    const hoursDegrees = (hours / 12) * 360 + 90;
+    hourHand.style.transform = "rotate(" + hoursDegrees + "deg)";
+  }
 
+  setInterval(setDate, 1000)
   </script>
 </body>
 </html>

From 931f8d97245a42bb7e4b6dff49811c6e26c7e977 Mon Sep 17 00:00:00 2001
From: Mateusz Kaczmarek <mateusz@kacz.pl>
Date: Tue, 13 Dec 2016 16:47:27 +0100
Subject: [PATCH 3/3] JS#30

---
 03 - CSS Variables/index-START.html | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index bf0f33e3ba..b4d38e2263 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,6 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: #ff0000;
+      --blur: 10px;
+      --spacing: 10px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background-color: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .hl {
+      color: var(--base);
+    }
 
     /*
       misc styles, nothing to do with CSS variables
@@ -53,6 +68,20 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+
+  var inputs = document.querySelectorAll('.controls input');
+
+  function handleUpdate() {
+    var suffix = this.dataset.sizing || '';    
+    var propertyName = "--" + String(this.name);
+    document.documentElement.style.setProperty(propertyName, this.value + suffix);
+  }
+
+  htmlElements.forEach(element => element.addEventListener('event', callback));
+
+  document.documentElement
+  
+
   </script>
 
 </body>