diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index.html
similarity index 65%
rename from 01 - JavaScript Drum Kit/index-START.html
rename to 01 - JavaScript Drum Kit/index.html
index 4070d32767..cde918982d 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index.html	
@@ -9,8 +9,8 @@
 
 
   <div class="keys">
-    <div data-key="65" class="key">
-      <kbd>A</kbd>
+    <div data-key="81" class="key">
+      <kbd>Q</kbd>
       <span class="sound">clap</span>
     </div>
     <div data-key="83" class="key">
@@ -47,7 +47,7 @@
     </div>
   </div>
 
-  <audio data-key="65" src="sounds/clap.wav"></audio>
+  <audio data-key="81" src="sounds/clap.wav"></audio>
   <audio data-key="83" src="sounds/hihat.wav"></audio>
   <audio data-key="68" src="sounds/kick.wav"></audio>
   <audio data-key="70" src="sounds/openhat.wav"></audio>
@@ -58,7 +58,35 @@
   <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}"]`);
+    if (!audio) {
+      return;
+    }
+
+    audio.currentTime = 0; // rewind to the start
+    audio.play();
+
+    key.classList.add("playing");
+
+
+  }
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return; // skip it if it's no a transform
+    this.classList.remove("playing");
+  }
+
+  // add eventList end transition
+  const keys= document.querySelectorAll(".key");
+
+  keys.forEach(key => key.addEventListener("transitionend", removeTransition));
+
+
+  window.addEventListener('keydown', playSound);
 </script>
 
 
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 21bec96e8c..f650c211c6 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -37,29 +37,60 @@
     
     // 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 >= 1500 && inventor.year <= 1600);
+    console.table(fifteen);
 
     // 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.log(fullNames);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const sortOldest = inventors.sort((a, b) => a.year - b.year);
+    console.table(sortOldest);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live all together?
+    const sumYears = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0);
+    console.log(sumYears);
 
     // 5. Sort the inventors by years lived
+    const oldest = inventors.sort((a,b) => (b.passed - b.year) - (a.passed - a.year));
+    console.table(oldest);
 
     // 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 category = document.querySelector('.mw-category');
+    // const links = category.querySelectorAll('a');
 
+    // const de = Array.from(links)
+    //                       .map(link => link.textContent)
+    //                       .filter(streetName => streetName.includes(' de '));
+    // console.table(de);
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const peopleAsc = people.sort((a, b) => a.split(",")[0].localeCompare(b.split(",")[0]));
+    console.table(peopleAsc);
 
     // 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' ];
 
+    const transportation = data.reduce((total, vehicule) => {
+      if (!total[vehicule]) {
+        total[vehicule] = 1;
+      }
+      else {
+        total[vehicule]++;
+      }
+      
+      return total;
+    }, {});
+
+    console.log(transportation);
+
   </script>
 </body>
 </html>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..f4867ea57b 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,39 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+    const isSomeAdult = people.some(
+      person => (new Date).getFullYear() - person.year >= 19
+    );
+    console.log(isSomeAdult);
+
     // Array.prototype.every() // is everyone 19 or older?
+    const isAllAdults = people.every(
+      person => (new Date).getFullYear() - person.year >= 19
+    );
+    console.log(isAllAdults);
 
     // Array.prototype.find()
     // Find is like filter, but instead returns just the one you are looking for
     // find the comment with the ID of 823423
+    const id823423 = comments.find(comment => comment.id === 823423);
+    console.log(id823423);
+
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex(comment => comment.id === 823423);
+    console.log(index);
+
+    //comments.splice(index, 1);
+
+    const newComments = [
+      ...comments.slice(0, index),
+      ...comments.slice(index + 1),
+    ];
+
+    console.table(newComments);
+
 
   </script>
 </body>
diff --git a/readme.md b/readme.md
index 146517e264..134bbfa1fb 100644
--- a/readme.md
+++ b/readme.md
@@ -1,4 +1,8 @@
-![](https://javascript30.com/images/JS3-social-share.png)
+Live demo :
+
+- Drum kit 👉 https://jasonocat.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit/
+
+![](https://javascript30.com/images/JS3-social-share.png)
 
 # JavaScript30