From f6a5383cdfffd94bae8a0208de8a310804e019d8 Mon Sep 17 00:00:00 2001 From: Eric Swanson Date: Fri, 5 Jun 2020 22:35:44 -0500 Subject: [PATCH 1/5] 01 Solution. Following video --- 01 - JavaScript Drum Kit/index-START.html | 141 +++++++++++++--------- 1 file changed, 85 insertions(+), 56 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..1f9c883b25 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,95 @@ - - - JS Drum Kit - - - + + + JS Drum Kit + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
+ + function removeTransition(event) { + if (event.propertyName !== "transform") return; // do nothing if not transform + this.classList.remove("playing"); + } + // Add an event listener for each of the keys transition to be removed + const keys = document.querySelectorAll(".key"); + keys.forEach((key) => + key.addEventListener("transitionend", removeTransition) + ); - + // Add an event listener that captures the key down event + window.addEventListener("keydown", playSound); + + From 2aa33378441bb5b747bbb872a1f6ae9eb62550d3 Mon Sep 17 00:00:00 2001 From: Eric Swanson Date: Sun, 7 Jun 2020 08:29:09 -0500 Subject: [PATCH 2/5] 02 Solution. Some help from video. --- 02 - JS and CSS Clock/index-START.html | 138 +++++++++++++++---------- 1 file changed, 84 insertions(+), 54 deletions(-) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7a6d27d5bd..08cdbe06d6 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,12 +1,10 @@ - - - JS + CSS Clock - - - - + + + JS + CSS Clock + +
@@ -15,60 +13,92 @@
+ + - + setInterval(setDate, 1000); + + From ad708c121ed16cba9bc6b2b5bac406e6bfef1a4b Mon Sep 17 00:00:00 2001 From: Eric Swanson Date: Mon, 8 Jun 2020 09:48:34 -0500 Subject: [PATCH 3/5] 03 Solution. Following video --- 03 - CSS Variables/index-START.html | 125 ++++++++++++++++++++-------- 1 file changed, 90 insertions(+), 35 deletions(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..22cd4578a7 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,51 +1,106 @@ - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

+ + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

-
- - +
+ + - - + + - - -
+ + +
- + - - .controls { - margin-bottom: 50px; - } + + // Set the property with the given name (input name) with the value of the input + // document gets us to :root + // setProperty sets a property on :root + document.documentElement.style.setProperty( + `--${this.name}`, + this.value + suffix + ); + } - + // Loop through each element of the node list (input) and handle update + inputs.forEach((input) => input.addEventListener("change", handleUpdate)); + // Listens for mouse movement instead of just when let go + inputs.forEach((input) => + input.addEventListener("mousemove", handleUpdate) + ); + + From 85953980f950a613a45a64047e88e370a84bcf93 Mon Sep 17 00:00:00 2001 From: Eric Swanson Date: Sun, 14 Jun 2020 09:22:40 -0500 Subject: [PATCH 4/5] Partway through array cardoi --- 04 - Array Cardio Day 1/index-START.html | 209 +++++++++++++++++------ 1 file changed, 153 insertions(+), 56 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index d19181b6b4..9f72419ebb 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,59 +1,156 @@ - - - Array Cardio 💪 - - -

Psst: have a look at the JavaScript Console 💁

- - + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + From be0a09d0b498ffdf70ac9a49450d43bf4e1238b3 Mon Sep 17 00:00:00 2001 From: Eric Swanson Date: Sun, 14 Jun 2020 20:31:24 -0500 Subject: [PATCH 5/5] 04 Solution. Some help from finished example --- 04 - Array Cardio Day 1/index-START.html | 34 +++++++++++++++++++++--- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 9f72419ebb..a2a6cf86e3 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -73,10 +73,10 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's - var fifteens = inventors.filter((inventor) => { - return inventor.year >= 1500 && inventor.year < 1600; - }); - console.table(fifteens); + // var fifteens = inventors.filter((inventor) => { + // return inventor.year >= 1500 && inventor.year < 1600; + // }); + // console.table(fifteens); // Array.prototype.map() // 2. Give us an array of the inventors first and last names @@ -132,6 +132,23 @@ // 7. sort Exercise // Sort the people alphabetically by last name + // Already sorted by last name. Going to sort by first. + // const sorted = people.sort(function (a, b) { + // // console.log(a); + // const aSplit = a.split(", "); + // const bSplit = b.split(", "); + // const aFirst = aSplit[1]; + // const aLast = aSplit[0]; + // const bFirst = bSplit[1]; + // const bLast = bSplit[0]; + + // console.log(`Comparing: ${aFirst} against ${bFirst}`); + // console.log(aFirst > bFirst); + + // return aFirst > bFirst ? 1 : -1; + // }); + // console.log("Sorted people"); + // console.log(sorted) // 8. Reduce Exercise // Sum up the instances of each of these @@ -151,6 +168,15 @@ "car", "truck", ]; + + const sumData = data.reduce(function (sum, current) { + if (!sum[current]) { + sum[current] = 0; + } + sum[current]++; + return sum; + }, {}); + console.log(sumData);