diff --git a/01 - JavaScript Drum Kit/.vscode/database.json b/01 - JavaScript Drum Kit/.vscode/database.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/01 - JavaScript Drum Kit/.vscode/database.json	
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..33ea3b984a 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,21 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+  function removeTransition(e){
+    if(e.propertyName !== 'transform') return
+    this.classList.remove('playing')
+  }
+  function playSound (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
+    audio.play()
+    key.classList.add('playing')
+  }
+  window.addEventListener('keydown',playSound)
+  const keys = document.querySelectorAll('.key')
+  keys.forEach(key => key.addEventListener('transitionend',removeTransition))
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 075578c930..c4bfbbbee9 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -32,7 +32,7 @@ body,html {
 }
 
 .playing {
-  transform: scale(1.1);
+  transform: scale(1.6);
   border-color: #ffc600;
   box-shadow: 0 0 1rem #ffc600;
 }
diff --git a/02 - JS and CSS Clock/.vscode/database.json b/02 - JS and CSS Clock/.vscode/database.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/02 - JS and CSS Clock/.vscode/database.json	
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index ee7eaefb1f..2fac0b7187 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -11,7 +11,7 @@
       <div class="clock-face">
         <div class="hand hour-hand"></div>
         <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
+        <div class="hand second-hand" </div>
       </div>
     </div>
 
@@ -62,13 +62,37 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.5s;
+      transition-timing-function: cubic-bezier(0.0, 0, 0.58, 1);
     }
 
   </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()
+      const seconds = now.getSeconds()
+      const minutes = now.getMinutes()
+      const hours = now.getHours()
+      const secondsDegrees = ((seconds/60)*360) +90
+      const minutesDegrees = ((minutes/60)*360) +90
+      const hoursDegrees = ((hours/12)* 360) +90
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`
+      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`
 
 
+      console.log(seconds)
+      console.log(minutes)
+      console.log(hours)
+    }
+    setInterval(setDate, 1000)
+
   </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/.vscode/database.json b/03 - CSS Variables/.vscode/database.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/03 - CSS Variables/.vscode/database.json	
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 8a4f0d556e..9293b76d81 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,7 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root{
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img{
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur))
+    }
 
+    .hl {
+      color: var(--base)
+    }
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -45,6 +59,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 || ''
+      // console.log(this.datase)
+      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>
diff --git a/04 - Array Cardio Day 1/.vscode/database.json b/04 - Array Cardio Day 1/.vscode/database.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/04 - Array Cardio Day 1/.vscode/database.json	
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/04 - Array Cardio Day 1/.vscode/last.sql b/04 - Array Cardio Day 1/.vscode/last.sql
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..4751ea14ca 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,15 +31,25 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
-
+    const fifteen = inventors.filter(inventor => (inventor.year > 1499 && inventor.year < 1600))
+    console.table(fifteen)
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const name = inventors.map(inventor => `${inventor.first}, ${inventor.last}`)
+    console.table(name)
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const birthDate = inventors.sort((firstPerson,secondPerson) => firstPerson.year >secondPerson.year ? 1 : -1)
 
+    console.table (birthDate)
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const totalYears = inventors.reduce((total,inventor) => {
+      return total + (inventor.passed - inventor.year)
+    },0)
+
+    console.log(totalYears)
 
     // 5. Sort the inventors by years lived