diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..82369fc802 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,24 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  window.addEventListener('keydown',function(e){
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+    if(!audio) return;
+    audio.currentTime = 0; //rewinds
+    audio.play();
+    key.classList.add('playing');
 
+  });
+  const keys = document.querySelectorAll(".key");
+  keys.forEach(function (key) {
+    key.addEventListener('transitionend', removeTransition)
+  });
+
+  function removeTransition(evt) {
+    if (evt.propertyName !== 'transform') return; // skip it if it's not a transform
+    this.classList.remove('playing');
+  }
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html
index 8b4fd26880..f8c790005f 100644
--- a/01 - JavaScript Drum Kit/index.html	
+++ b/01 - JavaScript Drum Kit/index.html	
@@ -58,8 +58,6 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
-
   function playSound(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
@@ -72,12 +70,9 @@
     if (e.propertyName !== 'transform') return; // skip it if it's not a transform
     this.classList.remove('playing');
   }
-
   const keys = document.querySelectorAll('.key');
   keys.forEach(key => key.addEventListener('transitionend', removeTransition));
   window.addEventListener('keydown', playSound);
-
 </script>
-
 </body>
 </html>
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..e0799afcde 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,13 +61,37 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin:100%;
+      transform: rotate(90deg);
+      transition: all 0.5s;
+      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
     }
 
   </style>
 
   <script>
+const secondHand =document.querySelector(".second-hand")
+const minHand =document.querySelector(".min-hand")
+const hrHand =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 minutesdegrees=((mins/60)*360)+90;
+  minHand.style.transform = `rotate(${minutesdegrees}deg)`;
+  console.log(seconds)
+
+  const hrs =now.getHours();
+  const hoursdegrees=((hrs/12)*360)+90;
+  hrHand.style.transform = `rotate(${hoursdegrees}deg)`;
+
+ }
+
+ setInterval(setDate, 1000);
   </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..ca3493d7ef 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,7 +21,23 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+   :root{
+--spacing:10px;
+--blur: 2px;
+--base: #fff221;
 
+   }
+
+  img{
+    background: var(--base);
+    padding: var(--spacing);
+    filter: blur(var(--blur));
+  } 
+
+
+  .hl{
+    color: var(--base);
+  }
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -48,6 +64,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+  const inputs = document.querySelectorAll('.controls input');
+ function handleUpdate(){
+  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>