diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..9ad83b0a6e 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -45,6 +45,10 @@
       <kbd>L</kbd>
       <span class="sound">tink</span>
     </div>
+    <div data-key="32" class="key">
+      <kbd>SPACE</kbd>
+      <span class="sound">I GOT A FEVER, AND THE ONLY CURE IS...</span>
+    </div>
   </div>
 
   <audio data-key="65" src="sounds/clap.wav"></audio>
@@ -56,9 +60,41 @@
   <audio data-key="74" src="sounds/snare.wav"></audio>
   <audio data-key="75" src="sounds/tom.wav"></audio>
   <audio data-key="76" src="sounds/tink.wav"></audio>
+  <audio data-key="32" src="sounds/cowbell.wav"></audio>
 
 <script>
 
+  function playSound(keyCode){
+    const keyAttrSelector = `[data-key="${keyCode}"]`
+    const audio = document.querySelector("audio"+keyAttrSelector);
+
+    if(!audio){ return; }
+
+    audio.currentTime = 0;  // be kind, rewind
+    audio.play();
+
+    addTransition(document.querySelector(".key"+keyAttrSelector));
+  }
+
+  function addTransition(key){
+    key.classList.add("playing");
+  }
+
+  function removeTransition(key){
+    key.classList.remove("playing");
+  }
+
+  document.querySelectorAll(".key")
+    .forEach(key => key.addEventListener("transitionend", function(event){
+      if(event.propertyName == "transform"){
+        removeTransition(this);
+      }
+    }));
+
+  window.addEventListener('keydown', function(event){
+    playSound(event.keyCode);
+  });
+
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html
index 246639f990..c8d1198466 100644
--- a/01 - JavaScript Drum Kit/index.html	
+++ b/01 - JavaScript Drum Kit/index.html	
@@ -59,7 +59,6 @@
 
 <script>
 
-
   function playSound(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
diff --git a/01 - JavaScript Drum Kit/sounds/cowbell.wav b/01 - JavaScript Drum Kit/sounds/cowbell.wav
new file mode 100644
index 0000000000..f100e7cf6a
Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/cowbell.wav differ
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 3e0a320b37..e6aa2f5054 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -12,6 +12,7 @@ body,html {
 .keys {
   display:flex;
   flex:1;
+  flex-wrap: wrap;
   min-height:100vh;
   align-items: center;
   justify-content: center;
@@ -29,6 +30,12 @@ body,html {
   color:white;
   background:rgba(0,0,0,0.4);
   text-shadow:0 0 5px black;
+  align-self: flex-end;
+}
+
+.key[data-key="32"]{
+  width: 1050px;
+  align-self: flex-start;  
 }
 
 .playing {
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..69f68658ae 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,67 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition-timing-function: cubic-bezier(0.42, 0, 0.55, 1.46);
+      border-radius: 25%;
+    }
+
+    .tick-transition{
+      transition: all 0.5s;
+    }
+
+    .hand.second-hand{
+      background: lightgreen;
+    }
+
+    .hand.min-hand{
+      background: yellow;
+      width: 40%;
+      right:50%; /*this allows us to make the hand smaller*/
+    }
+
+    .hand.hour-hand{
+      background: magenta;
+      width: 33%;
+      right:50%; /*this allows us to make the hand smaller*/
     }
 
   </style>
 
   <script>
+  const secondHand = document.querySelector(".second-hand");
+  const minuteHand = document.querySelector(".min-hand");
+  const hourHand = document.querySelector(".hour-hand");
+  function setDate(){
+    const now = new Date();
+    
+    // Calculate total rotation to avoid jumping back when it rolls over to the next value
+    const seconds = now.getSeconds() + now.getMinutes()*60 + now.getHours()*60*60;
+    const secondsDegrees = 90 + (seconds / 60)*360;
+    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+    const minute = now.getMinutes() + now.getHours()*60;
+    const minuteDegrees = 90 + (minute / 60)*360;
+    minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
+
+    const hour = now.getHours();
+    const hourDegrees = 90 + (hour / 12)*360;
+    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+
+    if(!transitionEnabled){
+      // Turn on transitions
+      document.querySelectorAll(".hand").forEach(hand => hand.classList.add("tick-transition"));
+      transitionEnabled = true;
+    }
 
+    transitionEnabled = true;
+  }
+  let transitionEnabled = false;
+  // Initially get everyone in place
+  setDate();
+  // Start ticking
+  setInterval(setDate, 1000);
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index bf0f33e3ba..752c7edbec 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -9,19 +9,33 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <div class="controls">
     <label for="spacing">Spacing:</label>
-    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+    <input type="range" name="spacing" min="10" max="200" value="0" data-sizing="px">
 
     <label for="blur">Blur:</label>
-    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+    <input type="range" name="blur" min="0" max="25" value="0" data-sizing="px">
 
     <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
+    <input type="color" name="base" >
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root{
+      --base:#01b8f1;
+      --spacing: 15px;
+      --blur: 0px;
+    }
+
+    img{
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
 
+    .hl{
+      color: var(--base);
+    }
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -53,6 +67,23 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+
+    var computedStyles = window.getComputedStyle(document.documentElement);
+    function updateValue(prop){
+      let target = document.querySelector(`input[name='${prop}']`);
+      const value = computedStyles.getPropertyValue(`--${prop}`).replace("px","");
+      target.value = value;
+    }
+    ["base", "spacing", "blur"].forEach(prop => updateValue(prop));
+
+    function handleUpdate(){
+      const suffix = this.dataset.sizing || "";
+      document.documentElement.style.setProperty(`--${this.name}`, this.value+suffix);
+    }
+
+    const inputs = document.querySelectorAll(".controls input");
+    inputs.forEach(input => input.addEventListener("input", handleUpdate));
+    
   </script>
 
 </body>