diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..cf5089ddf9 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,28 @@
 
 <script>
 
+  function playSound(e){
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"`)
+    const currKey = document.querySelector(`.key[data-key="${e.keyCode}"`)
+
+    if (!audio) return;
+
+    audio.currentTime = 0; //rewind to start allowing repeated clicks
+    audio.play();
+    currKey.classList.add('playing');
+  }
+
+  function removeTransition(e){
+    if(e.propertyName !== "transform") return;
+    this.classList.remove('playing');
+  }
+
+
+  (() => {
+    document.addEventListener('keydown', playSound);
+    const keys = document.querySelectorAll('.key');
+    keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  })();
 </script>
 
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 259280d228..81362379d3 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -18,7 +18,7 @@
 
   <style>
     html {
-      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
+      background:#018DED;
       background-size:cover;
       font-family:'helvetica neue';
       text-align: center;
@@ -55,18 +55,76 @@
       transform: translateY(-3px); /* account for the height of the clock hands */
     }
 
+    .clock-face:after{
+      content: "";
+      position: absolute;
+      display: block;
+      top: 50%;
+      left: 50%;
+      width: 24px;
+      height: 24px;
+      border-radius: 24px;
+      background: black;
+      transform: translate(-50%,-50%);
+      z-index: 100;
+    }
+
     .hand {
       width:50%;
-      height:6px;
+      height:3px;
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100% 50%;
+      transform: rotate(90deg);
+      transition: all 0.5s cubic-bezier(0.1, 2.7. 0.58, 1);
     }
+      
+      .hour-hand{
+        background: none;
+      }
+
+      .hour-hand:after{
+        content: " ";
+        position: absolute;
+        top:0;
+        right:0;
+        width: 66%;
+        height: 100%;
+        background: pink;
+        display: block;
+      }
+
+
+      .hour-hand,
+      .min-hand {
+        height: 12px;
+      }
 
   </style>
 
   <script>
+    const secondHand = document.querySelector('.second-hand');
+    const hourHand = document.querySelector('.hour-hand');
+    const minsHand = document.querySelector('.min-hand');
+
+    function setDate() {
+      const now = new Date()
+      const seconds = now.getSeconds();
+      const hours = now.getHours();
+      const mins = now.getMinutes();
+
+      //90 because we offset it by 90degs initially
+      const secondsDegrees = ((seconds / 60) * 360) + 90;
+      const hoursDegrees = ((hours / 12) * 360 ) + 90;
+      const minsDegrees = ((mins / 60 ) * 360) + 90 ;
+
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+      minsHand.style.transform = `rotate(${minsDegrees}deg)`;
+     }
 
+     setInterval(setDate, 1000)
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index bf0f33e3ba..f8244d6b7f 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -25,7 +25,22 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     /*
       misc styles, nothing to do with CSS variables
     */
+    :root{
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px
+    }
+
 
+    img {
+      background: var(--base);
+      padding: var(--spacing);
+      filter: blur(var(--blur));
+    }
+    
+    .hl {
+      color: var(--base);
+    }
     body {
       text-align: center;
     }
@@ -53,6 +68,19 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+
+    const inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate() {
+      //old this.getAttribute()
+      const suffix = this.dataset.sizing || '';
+
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix )
+    }
+
+
+    inputs.forEach(input => input.addEventListener('change', handleUpdate))
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate))
   </script>
 
 </body>