JS Drum Kit

From d5ea5970134f9b0b7f838b9eeac0ac27d64a84dd Mon Sep 17 00:00:00 2001 From: AFronczak Date: Mon, 12 Dec 2016 16:41:43 -0500 Subject: [PATCH 1/7] keydown event correctl logs element if corresponding wav file exists. --- 01 - JavaScript Drum Kit/index-FINISHED.html | 83 -------------------- 01 - JavaScript Drum Kit/index-START.html | 1 + 01 - JavaScript Drum Kit/index.html | 25 ++---- 3 files changed, 9 insertions(+), 100 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/index-FINISHED.html diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index 1a16d0997c..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - JS Drum Kit - - - - - -

- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride -

- J - snare -

- K - tom -

- L - tink -

- -

- - - - - - diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..536da7b46d 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,7 @@ diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 246639f990..b7b045da62 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -59,23 +59,14 @@ From 38e6fc61f1fb2b00b59872b1b93a921b0d3287da Mon Sep 17 00:00:00 2001 From: AFronczak Date: Mon, 12 Dec 2016 18:48:09 -0500 Subject: [PATCH 2/7] function added to remove styling on transitioned elements after sound plays. --- 01 - JavaScript Drum Kit/index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index b7b045da62..aded1b2d3c 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -68,7 +68,17 @@ key.classList.add('playing') }); +function removeTransition(e) { + if (e.propertyName !== 'transform') return; + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key'); + +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + + From 97558ab29fbaefe2c154d97c6f3c3763f47e7950 Mon Sep 17 00:00:00 2001 From: AFronczak Date: Mon, 12 Dec 2016 18:52:05 -0500 Subject: [PATCH 3/7] functioned inside keydown event refactored for readability --- 01 - JavaScript Drum Kit/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index aded1b2d3c..416f8322f9 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -59,14 +59,14 @@ From f00c0aace8436b9dfb223f46b7afa8f66f22ddb3 Mon Sep 17 00:00:00 2001 From: AFronczak Date: Tue, 13 Dec 2016 12:27:16 -0500 Subject: [PATCH 4/7] working CSS clock using CSS transform/transition and JavaScrpt setDate --- 02 - JS + CSS Clock/index.html | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index d5c9ec9596..ee2a905f7f 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -63,34 +63,32 @@ top:50%; transform-origin: 100%; transform: rotate(90deg); - transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } - - + + From bb0166e3d4ad28dddaa7e1f4ccc6344b7bc77fef Mon Sep 17 00:00:00 2001 From: AFronczak Date: Tue, 13 Dec 2016 16:31:26 -0500 Subject: [PATCH 5/7] CSS variables updated using JS --- 03 - CSS Variables/index.html | 84 +++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 03 - CSS Variables/index.html diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..e50289a324 --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,84 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +

+ Spacing: + + + Blur: + + + Base Color + +

+ +

+ + + + + + From 45c48bc06c83ba41490034bca827eab6b063ab46 Mon Sep 17 00:00:00 2001 From: AFronczak Date: Thu, 15 Dec 2016 17:01:22 -0500 Subject: [PATCH 6/7] different array functions added. --- 04 - Array Cardio Day 1/index-START.html | 2 + 04 - Array Cardio Day 1/index.html | 79 ++++++++++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 04 - Array Cardio Day 1/index.html diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 6e28e357d0..07e507ac7b 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,7 +27,9 @@ // 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 inventory first and last names diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..f569fce65d --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,79 @@ + + + + + Array Cardio 💪 + + + + + From 38513b957a834b548ea73b02c83cd29a163d935d Mon Sep 17 00:00:00 2001 From: AFronczak Date: Sun, 18 Dec 2016 18:42:38 -0500 Subject: [PATCH 7/7] added event listeners to transform elements on the page upon click --- 04 - Array Cardio Day 1/index.html | 25 ++++++++++++++++--- .../{index-FINISHED.html => index.html} | 25 +++++++++---------- 2 files changed, 33 insertions(+), 17 deletions(-) rename 05 - Flex Panel Gallery/{index-FINISHED.html => index.html} (93%) diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html index f569fce65d..118035ced3 100644 --- a/04 - Array Cardio Day 1/index.html +++ b/04 - Array Cardio Day 1/index.html @@ -61,19 +61,36 @@ const nextGuy = b.passed - b.year; return lastGuy > nextGuy ? -1 : 1; }); - console.log(oldest); + 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 category = document.querySelector('.mw-category'); + // const links = Array.from(category.querySelectorAll('a')); + // + // const de = links + // .map(link => link.textContent) + // .filter(streetName => streetName.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name - + const alpha = people.sort((lastOne, nextOne) => { + const [aLast, aFirst] = lastOne.split(' '); + const [bLast, bFirst] = lastOne.split(' '); + return aLast > bLast ? 1 : -1; + }); + console.log(alpha); // 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(function (obj, item) { + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + console.log(transportation); diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index.html similarity index 93% rename from 05 - Flex Panel Gallery/index-FINISHED.html rename to 05 - Flex Panel Gallery/index.html index 243f8a221d..2267f03ffa 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index.html @@ -43,6 +43,7 @@ background-size:cover; background-position:center; flex: 1; + align-items: center; justify-content: center; display: flex; flex-direction: column; @@ -55,21 +56,20 @@ .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } - /* Flex Items */ +/*flex children*/ .panel > * { margin:0; width: 100%; transition:transform 0.5s; flex: 1 0 auto; - display:flex; + display: flex; justify-content: center; align-items: center; } - - .panel > *:first-child { transform: translateY(-100%); } - .panel.open-active > *:first-child { transform: translateY(0); } - .panel > *:last-child { transform: translateY(100%); } - .panel.open-active > *:last-child { transform: translateY(0); } + .panel > *:first-child { transform: translateY(-100%);} + .panel.open-active > *:first-child { transform: translateY(0);} + .panel > *:last-child { transform: translateY(100%);} + .panel.open-active > *:last-child { transform: translateY(0);} .panel p { text-transform: uppercase; @@ -82,8 +82,8 @@ } .panel.open { - flex: 5; font-size:40px; + flex: 5; } .cta { @@ -124,22 +124,21 @@ + + +home