- A
- clap
-
-
- S
- hihat
-
-
- D
- kick
-
-
- F
- openhat
-
-
- G
- boom
+
+
+ JS Drum Kit
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
diff --git a/02 - JS and CSS Clock/clock.js b/02 - JS and CSS Clock/clock.js
new file mode 100644
index 0000000000..3516445b47
--- /dev/null
+++ b/02 - JS and CSS Clock/clock.js
@@ -0,0 +1,24 @@
+const secondHand = document.querySelector('.second-hand');
+const minuteHand = document.querySelector('.min-hand');
+const hourHand = document.querySelector('.hour-hand');
+
+const setTime = () => {
+ const now = new Date();
+ const hour = now.getHours();
+ const minute = now.getMinutes();
+ const second = now.getSeconds();
+
+ let rotation;
+
+ rotation = second * 6 + 90;
+ secondHand.style.transform = `rotate(${rotation}deg)`;
+
+ rotation = (minute + second / 60) * 6 + 90;
+ minuteHand.style.transform = `rotate(${rotation}deg)`;
+
+ rotation = (hour + minute / 60) * 30 + 90;
+ hourHand.style.transform = `rotate(${rotation}deg)`;
+};
+
+setTime();
+setInterval(setTime, 1000);
diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html
index 04d1a4e40e..0046e4a2d0 100644
--- a/02 - JS and CSS Clock/index-FINISHED.html
+++ b/02 - JS and CSS Clock/index-FINISHED.html
@@ -1,12 +1,10 @@
-
-
-
+
-
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
- H
- ride
-
-
- J
- snare
-
-
- K
- tom
-
-
- L
- tink
-
-
@@ -15,85 +13,82 @@
@@ -15,60 +13,55 @@
Update CSS Variables with JS
- -
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
+ body {
+ text-align: center;
+ background: #193549;
+ color: white;
+ font-family: "helvetica neue", sans-serif;
+ font-weight: 100;
+ font-size: 50px;
+ }
+
+ .controls {
+ margin-bottom: 50px;
+ }
+
+ input {
+ width: 100px;
+ }
+
+
+
+
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 6b9b539c09..2908a87f99 100644
--- a/03 - CSS Variables/index-START.html
+++ b/03 - CSS Variables/index-START.html
@@ -1,51 +1,79 @@
-
-
- Update CSS Variables with JS
+ + +Update CSS Variables with JS
-
-
-
+
-
+
+
-
-
+
+
-
-
-
+
+
+
+
-
+ .controls {
+ margin-bottom: 50px;
+ }
-
+ input {
+ width: 100px;
+ }
+
-
+
+
diff --git a/03 - CSS Variables/variables.js b/03 - CSS Variables/variables.js
new file mode 100644
index 0000000000..8aeb2e72d2
--- /dev/null
+++ b/03 - CSS Variables/variables.js
@@ -0,0 +1,16 @@
+// overly complicated destructuring but YOLO :poop:
+const updateVariable = ({
+ target: {
+ name,
+ value,
+ dataset: { sizing: units = '' },
+ },
+}) => {
+ const root = document.documentElement;
+ root.style.setProperty(`--${name}`, `${value}${units}`);
+};
+
+const inputs = document.querySelectorAll('.controls input');
+inputs.forEach((input) => {
+ input.addEventListener('input', updateVariable);
+});
diff --git a/04 - Array Cardio Day 1/arrays.js b/04 - Array Cardio Day 1/arrays.js
new file mode 100644
index 0000000000..d57c784382
--- /dev/null
+++ b/04 - Array Cardio Day 1/arrays.js
@@ -0,0 +1,134 @@
+// Get your shorts on - this is an array workout!
+// ## Array Cardio Day 1
+
+// Some data we can work with
+
+const inventors = [
+ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
+ { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
+ { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
+ { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
+ { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
+ { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
+ { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
+ { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
+ { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
+ { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
+ { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
+ { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 },
+];
+
+// Array.prototype.filter()
+// 1. Filter the list of inventors for those who were born in the 1500's
+const cqs = inventors.filter((item) => item.year < 1600 && item.year >= 1500);
+console.table(cqs);
+
+// Array.prototype.map()
+// 2. Give us an array of the inventors first and last names
+const names = inventors.map((item) => `${item.first} ${item.last}`);
+console.table(names);
+
+// Array.prototype.sort()
+// 3. Sort the inventors by birthdate, oldest to youngest
+const oldest = [...inventors].sort((a, b) => a.year - b.year);
+console.table(oldest);
+
+// Array.prototype.reduce()
+// 4. How many years did all the inventors live all together?
+const totalYears = inventors.reduce(
+ (acc, item) => acc + item.passed - item.year,
+ 0
+);
+console.table(totalYears);
+
+// 5. Sort the inventors by years lived
+const longevity = [...inventors].sort((a, b) => {
+ return a.passed - a.year - (b.passed - b.year);
+});
+console.log(longevity);
+
+// 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 nodes = Array.from(document.querySelectorAll('.mw-category li a'));
+ const result = nodes
+ .filter((node) => node.textContent.includes('de'))
+ .map((node) => node.textContent);
+ console.log(result);
+*/
+
+// 7. sort Exercise
+// Sort the people alphabetically by last name
+const people = [
+ 'Bernhard, Sandra',
+ 'Bethea, Erin',
+ 'Becker, Carl',
+ 'Bentsen, Lloyd',
+ 'Beckett, Samuel',
+ 'Blake, William',
+ 'Berger, Ric',
+ 'Beddoes, Mick',
+ 'Beethoven, Ludwig',
+ 'Belloc, Hilaire',
+ 'Begin, Menachem',
+ 'Bellow, Saul',
+ 'Benchley, Robert',
+ 'Blair, Robert',
+ 'Benenson, Peter',
+ 'Benjamin, Walter',
+ 'Berlin, Irving',
+ 'Benn, Tony',
+ 'Benson, Leana',
+ 'Bent, Silas',
+ 'Berle, Milton',
+ 'Berry, Halle',
+ 'Biko, Steve',
+ 'Beck, Glenn',
+ 'Bergman, Ingmar',
+ 'Black, Elk',
+ 'Berio, Luciano',
+ 'Berne, Eric',
+ 'Berra, Yogi',
+ 'Berry, Wendell',
+ 'Bevan, Aneurin',
+ 'Ben-Gurion, David',
+ 'Bevel, Ken',
+ 'Biden, Joseph',
+ 'Bennington, Chester',
+ 'Bierce, Ambrose',
+ 'Billings, Josh',
+ 'Birrell, Augustine',
+ 'Blair, Tony',
+ 'Beecher, Henry',
+ 'Biondo, Frank',
+];
+const lastNames = [...people].sort((a, b) => {
+ const aLast = a.split(',')[0];
+ const bLast = b.split(',')[0];
+ return aLast < bLast ? -1 : 1;
+});
+console.table(lastNames);
+
+// 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 totes = data.reduce((acc, item) => {
+ acc[item] = (acc[item] ?? 0) + 1;
+ return acc;
+}, {});
+console.table(totes);
diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html
index d1f6ce33d6..0dec0671e1 100644
--- a/04 - Array Cardio Day 1/index-FINISHED.html
+++ b/04 - Array Cardio Day 1/index-FINISHED.html
@@ -1,112 +1,167 @@
-
-
- Psst: have a look at the JavaScript Console 💁
- - + + +Psst: have a look at the JavaScript Console 💁
+ + diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 21bec96e8c..f993d491c3 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,65 +1,11 @@ - - -Psst: have a look at the JavaScript Console 💁
- - + + +Psst: have a look at the JavaScript Console 💁
+ + diff --git a/05 - Flex Panel Gallery/flex.js b/05 - Flex Panel Gallery/flex.js new file mode 100644 index 0000000000..8f41872713 --- /dev/null +++ b/05 - Flex Panel Gallery/flex.js @@ -0,0 +1,15 @@ +const panels = document.querySelectorAll('.panels .panel'); + +function toggleOpen() { + this.classList.toggle('open'); +} +function toggleActive(e) { + if (e.propertyName === 'flex-grow') { + this.classList.toggle('open-active'); + } +} + +panels.forEach((panel) => { + panel.addEventListener('click', toggleOpen); + panel.addEventListener('transitionend', toggleActive); +}) diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html index bfa64d6be3..f2dd2ce3af 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -1,147 +1,169 @@ - - -
-
+ .panel.open {
+ flex: 5;
+ font-size: 40px;
+ }
-
+ function toggleActive(e) {
+ console.log(e.propertyName);
+ if (e.propertyName.includes("flex")) {
+ this.classList.toggle("open-active");
+ }
+ }
-
+ panels.forEach((panel) => panel.addEventListener("click", toggleOpen));
+ panels.forEach((panel) =>
+ panel.addEventListener("transitionend", toggleActive)
+ );
+
+
-
- Hey
-Let's
-Dance
-
-
- Give
-Take
-Receive
-
-
- Experience
-It
-Today
-
-
- Give
-All
-You can
-
-
- Life
-In
-Motion
-