From cbf354d3c7bdc5b2af1cf8a2e0b40a06f44c795e Mon Sep 17 00:00:00 2001 From: Luis Sanchez Date: Mon, 13 Oct 2025 21:52:56 -0400 Subject: [PATCH 1/2] finished drum kit --- 01 - JavaScript Drum Kit/index-START.html | 134 ++++++++++++---------- 1 file changed, 76 insertions(+), 58 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..c403537ec6 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,67 +1,85 @@ - - - JS Drum Kit - - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink + + + JS Drum Kit + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
-
- - - - - - - - - + + + + + + + + + - + function removeTransition(e) { + if (e.propertyName !== "transform") return; //skip if its not a transform + this.classList.remove("playing"); + } + const keys = document.querySelectorAll(".key"); + keys.forEach((key) => + key.addEventListener("transitionend", removeTransition) + ); - + window.addEventListener("keydown", playSound); + + From 665861545290854374ce56f7cacdb7c5bc3b9449 Mon Sep 17 00:00:00 2001 From: Luis Sanchez Date: Fri, 17 Oct 2025 11:12:18 -0400 Subject: [PATCH 2/2] finished day 3 --- 01 - JavaScript Drum Kit/index-START.html | 1 + 02 - JS and CSS Clock/index-START.html | 128 ++++++++++++---------- 03 - CSS Variables/index-START.html | 122 +++++++++++++++------ 3 files changed, 160 insertions(+), 91 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index c403537ec6..11eaf5c7c0 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -70,6 +70,7 @@ } function removeTransition(e) { + console.log(e); if (e.propertyName !== "transform") return; //skip if its not a transform this.classList.remove("playing"); } diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 55ab1a5331..5fb7b24f60 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,13 +1,11 @@ - - - JS + CSS Clock - - - - - + + + JS + CSS Clock + + +
@@ -16,60 +14,80 @@
+ - .hand { - width: 50%; - height: 6px; - background: black; - position: absolute; - top: 50%; - } + - + setInterval(setDate, 1000); + + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index d5fcc3a2ae..606cfd7840 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,52 +1,102 @@ - - - Scoped CSS Variables and JS - - - -

Update CSS Variables with JS

+ + + Scoped CSS Variables and JS + + + +

Update CSS Variables with JS

-
- - +
+ + - - + + - - -
+ + +
- + - - .controls { - margin-bottom: 50px; - } + + inputs.forEach((input) => { + input.addEventListener("change", handleUpdate); + }); + inputs.forEach((input) => { + input.addEventListener("mousemove", handleUpdate); + }); - + handleUpdate(); + +