From 609525abc15ba80608d25414eadd0b646ecbf57f Mon Sep 17 00:00:00 2001
From: DevvObiero <obieropauldev@gmail.com>
Date: Tue, 10 Jun 2025 08:16:24 +0300
Subject: [PATCH 1/5] testing commit message

---
 01 - JavaScript Drum Kit/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 8a2f8e8417..7acb247679 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,7 +59,7 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+s
 </script>
 
 

From 503d91a1cbd7c354f7bb6c8bb2288e6c1346dba7 Mon Sep 17 00:00:00 2001
From: DevvObiero <obieropauldev@gmail.com>
Date: Tue, 10 Jun 2025 11:41:49 +0300
Subject: [PATCH 2/5] done

---
 01 - JavaScript Drum Kit/index-START.html | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 7acb247679..56d24b1939 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,7 +59,23 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-s
+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; //stop the audio
+audio.currentTime = 0; //rewind to the start
+audio.play();
+
+key.classList.add("playing");
+})
+
+const keys = document.querySelectorAll(".key");
+keys.forEach(key => {
+  key.addEventListener("transitionend", function(e) {
+    if (e.propertyName !== "transform") return; //skip if not transform
+    this.classList.remove("playing");
+  });
+});
 </script>
 
 

From d040b4fa8c3c22aa6f58b5420b265f912d980695 Mon Sep 17 00:00:00 2001
From: DevvObiero <obieropauldev@gmail.com>
Date: Tue, 10 Jun 2025 15:14:27 +0300
Subject: [PATCH 3/5] done rewriting

---
 01 - JavaScript Drum Kit/index-START.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 56d24b1939..d3b63646e8 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,21 +59,21 @@
   <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; //stop the audio
-audio.currentTime = 0; //rewind to the start
-audio.play();
+window.addEventListener("keydown",(e)=>{
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+  if (!audio) return; // stop the audio if no audio found
+  audio.currentTime = 0; // rewind to the start
+  audio.play(); // play the sound
 
-key.classList.add("playing");
+  key.classList.add("playing"); // add playing class to the keyasds
 })
 
-const keys = document.querySelectorAll(".key");
+const keys  = document.querySelectorAll(".key");
 keys.forEach(key => {
-  key.addEventListener("transitionend", function(e) {
-    if (e.propertyName !== "transform") return; //skip if not transform
-    this.classList.remove("playing");
+  key.addEventListener("transitionend", (e) => {
+    if (e.propertyName !== "transform") return; // skip if not transform
+    key.classList.remove("playing"); // remove playing class
   });
 });
 </script>

From a4f05f8043304ce2980aa9a57985dbf927a1c8ee Mon Sep 17 00:00:00 2001
From: DevvObiero <obieropauldev@gmail.com>
Date: Thu, 12 Jun 2025 20:45:59 +0300
Subject: [PATCH 4/5] css variables

---
 02 - JS and CSS Clock/index-START.html |  1 +
 03 - CSS Variables/index-START.html    | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 55ab1a5331..88a9c0f7f7 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -63,6 +63,7 @@
       background: black;
       position: absolute;
       top: 50%;
+      transform-origin: 100%;
     }
 
   </style>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index d5fcc3a2ae..ca31cfbd73 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -19,7 +19,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <input id="base" type="color" name="base" value="#ffc600">
   </div>
 
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+  <img src="https://images.pexels.com/photos/32417557/pexels-photo-32417557/free-photo-of-charming-antique-shop-in-paris-display-window.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
 
   <style>
 
@@ -43,9 +43,25 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width: 100px;
     }
+    :root{
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px; 
+    }
+
+    img{
+      width: 100%;
+      max-width: 1000px;
+      margin: 0 auto;
+      display: block;
+      padding: var(--spacing);
+      filter: blur(var(--blur)) brightness(1.2);
+      box-shadow: 0 0 0 10px var(--base);
+    }
   </style>
 
   <script>
+    
   </script>
 
 </body>

From ebd3590b6783236dae930481eb7118150408a424 Mon Sep 17 00:00:00 2001
From: DevvObiero <obieropauldev@gmail.com>
Date: Thu, 12 Jun 2025 21:53:51 +0300
Subject: [PATCH 5/5] done

---
 03 - CSS Variables/index-START.html | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca31cfbd73..c6d6a5bace 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -44,7 +44,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       width: 100px;
     }
     :root{
-      --base: #ffc600;
+      --base: #c47611;
       --spacing: 10px;
       --blur: 10px; 
     }
@@ -61,7 +61,17 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
-    
+    const inputs  =  document.querySelectorAll('.controls input');
+    function handleUpdate(){
+// console.log(this.value) 
+const suffix  =  this.dataset.sizing || ''; 
+document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+}
+
+    inputs.forEach(input => {
+      input.addEventListener('change', handleUpdate);
+      input.addEventListener('mousemove', handleUpdate);
+    });
   </script>
 
 </body>