diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..fb408aed21 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,35 @@
 
 <script>
 
+  const keys = document.querySelectorAll(".key");
+
+  function keySound(e) {
+    const keyCode = e.code;
+    const sound = document.querySelector(`audio[data-key="${keyCode}"]`);
+    if (!sound) return;
+    sound.play();
+    sound.currentTime = 0;
+    const key = document.querySelector(`div[data-key="${keyCode}"]`);
+    key.classList.add('playing');
+  }
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return;
+    this.classList.remove('playing');
+  }
+
+  function clickSound() {
+    const keyCode = this.dataset.key;
+    const sound = document.querySelector(`audio[data-key="${keyCode}"]`);
+    sound.play();
+    sound.currentTime = 0;
+    this.classList.add('playing');
+  }
+
+  window.addEventListener('keydown', keySound);
+  keys.forEach(key => key.addEventListener('click', clickSound));
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
 </script>
 
 
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 12f721b183..1f9352b7c0 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -12,6 +12,7 @@
         <div class="hand hour-hand"></div>
         <div class="hand min-hand"></div>
         <div class="hand second-hand"></div>
+        <div class="center"></div>
       </div>
     </div>
 
@@ -37,14 +38,14 @@
     .clock {
       width: 30rem;
       height: 30rem;
-      border: 20px solid white;
+      border: 20px solid rgba(255,255,255,0.5);
       border-radius: 50%;
       margin: 50px auto;
       position: relative;
       padding: 2rem;
       box-shadow:
         0 0 0 4px rgba(0,0,0,0.1),
-        inset 0 0 0 3px #EFEFEF,
+        inset 0 0 0 3px #50fffcf5,
         inset 0 0 10px black,
         0 0 10px rgba(0,0,0,0.2);
     }
@@ -58,16 +59,65 @@
 
     .hand {
       width: 50%;
-      height: 6px;
-      background: black;
+      height: 5px;
+      background: #210069c2;
       position: absolute;
+      right: 50%;
       top: 50%;
+      transform: rotate(90deg);
+      transform-origin: right;
+      transition: all .05s;
+      transition-timing-function: cubic-bezier(0.41, 0.64, 0.83, 0.62);
+    }
+
+    .second-hand {
+      height: 2px;
+      width: 45%;
+    }
+
+    .hour-hand {
+      height: 12px;
+      top: 48%;
+      width: 40%;
+    }
+
+    .center {
+      background-color: #c5370a;
+      border-radius: 25px;
+      height: 25px;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 25px;
     }
 
   </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 secondDegrees = seconds/60 * 360 + 90;
+      secondHand.style.transform = `rotate(${secondDegrees}deg)`;
+
+      const minutes = now.getMinutes();
+      console.log(minutes);
+      const minuteDegrees = minutes/60 * 360 + 90;
+      minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
+
+      const hours = now.getHours();
+      const hourDegrees = hours/12 * 360 + 90;
+      hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+    }
+
+    setInterval(setDate, 1000);
+
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 6b9b539c09..d23b9fa8c2 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -9,22 +9,40 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <div class="controls">
     <label for="spacing">Spacing:</label>
-    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+    <input id="spacing" type="range" name="spacing" min="10" max="200" value="15" data-sizing="px">
 
     <label for="blur">Blur:</label>
-    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+    <input id="blur" type="range" name="blur" min="0" max="200" value="200" data-sizing="px">
 
-    <label for="base">Base Color</label>
-    <input id="base" type="color" name="base" value="#ffc600">
+    <label for="color">Base Color</label>
+    <input id="color" type="color" name="color" value="#D9BB82">
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
 
-    /*
-      misc styles, nothing to do with CSS variables
-    */
+    :root {
+      --color: #D9BB82;
+      --spacing: 15px;
+      --blur: 200px;
+    }
+
+
+
+    img {
+      background-color: var(--color);
+      filter: blur(var(--blur));
+      padding: var(--spacing);
+    }
+
+    .hl {
+      color: var(--color);
+    }
+
+      /*
+        misc styles, nothing to do with CSS variables
+      */
 
     body {
       text-align: center;
@@ -45,6 +63,32 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+
+    const inputs = document.querySelectorAll('input');
+
+    function handleUpdate() {
+      /*
+      const inputId = this.id;
+      const root = document.documentElement;
+      if (inputId === "color") {
+        root.style.setProperty('--color', this.value);
+      }
+      if (inputId === "blur") {
+        root.style.setProperty('--blur', this.value + "px");
+      }
+      if (inputId === "spacing") {
+        root.style.setProperty('--spacing', this.value + "px");
+      }
+      */
+      const suffix = this.dataset.sizing || '';
+      console.log(this.name);
+      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/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..00ef8800c0 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -27,32 +27,99 @@
       { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
     ];
 
-    const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
+    const people = ['Beddoes, Mick', 'Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Begin, Menachem', 'Beecher, Henry', 'Beethoven, Ludwig', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Blake, William', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony'];
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
 
+    const c1500 = inventors.filter(inventor => inventor.year < 1600 && inventor.year >= 1500);
+    console.table(c1500);
+    c1500.forEach(inventor => console.log(`${inventor.first} ${inventor.last}, born in ${inventor.year}`));
+
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
 
+    const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
+    console.table(fullNames);
+
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
 
+    /*
+    const birth = inventors.sort(function (personA, personB) {
+      if (personA.year > personB.year) {
+        return 1; // Can be any positive number
+      } else {
+        return -1; // Can be any negative number
+      }
+    });
+    */
+
+    const birtharrow = inventors.sort((inventorA, inventorB) => inventorA.year > inventorB.year ? 1 : -1);
+    console.table(birtharrow);
+
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
 
+    const age = inventors.map(inventor => inventor.passed - inventor.year);
+    const reducer = (a, c) => a + c;
+    const totalYears = age.reduce(reducer);
+    console.log(totalYears);
+
+    const totalYearsWB = inventors.reduce((inventorA, inventorB) => {
+      return inventorA + (inventorB.passed - inventorB.year);
+    }, 0);
+
+    console.log(totalYearsWB);
+
     // 5. Sort the inventors by years lived
 
+    const longLive = inventors.sort((a, b) => (a.passed - a.year) > (b.passed - b.year) ? 1 : -1);
+    console.table(longLive);
+
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
+    const boulevards = Array.from(document.querySelectorAll(".mw-category li"));
+    const de = boulevards
+      .map(boulevard => boulevard.textContent)
+      .filter(name => name.includes('de '));
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
 
+    //const names = people.map(people => people.split(', '));
+    //console.table(names);
+
+
+    const peopleList = people.sort(function (a, b) {
+      //const aName = a.split(', ');
+      //const bName = b.split(', ');
+      //return aName[0] > bName[0] ? 1 : -1;
+
+      const [aLast, aFirst] = a.split(', ');
+      const [bLast, bFirst] = b.split(', ');
+      //return aLast > bLast ? 1 : -1;
+      return aFirst> bFirst ? 1 : -1;
+    });
+    console.table(peopleList);
+
+
     // 8. Reduce Exercise
     // Sum up the instances of each of these
-    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
+    // => En tajunnut.
+    const data = ['car', 'car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
+
+    const transportation = data.reduce(function (obj, item) {
+      if (!obj[item]) {
+        obj[item] = 0; // Luku, josta lasku aloitetaan
+      }
+      obj[item]++;
+      return obj;
+    }, {});
+
+    console.log(transportation);
+
 
   </script>
 </body>