diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..7f16496c08 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -8,7 +8,7 @@
 <body>
 
 
-  <div class="keys">
+  <div class="keys" id="keys">
     <div data-key="65" class="key">
       <kbd>A</kbd>
       <span class="sound">clap</span>
@@ -58,7 +58,28 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  var currentDiv;
 
+  function initKey(e) {
+    var key = e.keyCode || e.charCode;
+    var audio = document.querySelector('audio[data-key="'+ key +'"]');
+    currentDiv = document.querySelector('div[data-key="'+ key +'"]');
+
+    if(currentDiv) {
+      audio.currentTime = 0;
+      audio.play()
+      currentDiv.classList.add("playing")
+    }
+  }
+
+  function deleteKey() {
+    if(currentDiv) {
+      currentDiv.classList.remove("playing")
+    }
+
+  }
+  window.addEventListener("keydown", initKey);
+  window.addEventListener("keyup", deleteKey);
 </script>
 
 
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index ee7eaefb1f..1f21d6c8a4 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -17,6 +17,9 @@
 
 
   <style>
+    * {
+      margin: 0;
+    }
     html {
       background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
       background-size:cover;
@@ -53,7 +56,7 @@
       position: relative;
       width: 100%;
       height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
+      transform: translateY(-3px) rotate(90deg);
     }
 
     .hand {
@@ -62,11 +65,41 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100% 0;
     }
 
+    .hour-hand {
+      transform: rotate(10deg);
+    }
   </style>
 
   <script>
+    var handHour = document.querySelector(".hour-hand");
+    var handMin = document.querySelector(".min-hand");
+    var handSec = document.querySelector(".second-hand");
+
+    var now = new Date();
+    var hours = null;
+    var minutes = null;
+    var seconds = null;
+
+    function setTime() {
+      handHour.style.transform = 'rotate(' + hours * 30 + 'deg)';
+      handMin.style.transform = 'rotate(' + minutes * 6 + 'deg)';
+      handSec.style.transform = 'rotate(' + seconds * 6 + 'deg)';
+    }
+    function result() {
+      now = new Date();
+      hours = now.getHours();
+      hours = hours > 12 ? hours - 12 : hours;
+      minutes = now.getMinutes();
+      seconds = now.getSeconds();
+
+      setTime();
+      return seconds;
+    }
+
+    setInterval(result, 1000);
 
 
   </script>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 8a4f0d556e..42a0bbba7d 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,10 +21,11 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
-
-    /*
-      misc styles, nothing to do with CSS variables
-    */
+    html {
+      --blur: 10px;
+      --spacing: 10px;
+      --base: #fff;
+    }
 
     body {
       text-align: center;
@@ -42,9 +43,32 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width:100px;
     }
+
+    img {
+      filter: blur(var(--blur));
+      padding: var(--spacing);
+      background-color: var(--base);
+    }
+
   </style>
 
   <script>
+    const root = document.documentElement;
+    const blur = document.getElementById('blur');
+    const spacing = document.getElementById('spacing');
+    const base = document.getElementById('base');
+
+    blur.addEventListener('input', function () {
+      root.style.setProperty('--blur', blur.value + 'px');
+    })
+
+    spacing.addEventListener('input', function () {
+      root.style.setProperty('--spacing', spacing.value + 'px');
+    })
+
+    base.addEventListener('input', function () {
+      root.style.setProperty('--base', base.value);
+    })
   </script>
 
 </body>
