JS Drum Kit

From ae6bebb0342a73091206e5336917c42e7cddb2ce Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Sat, 3 Mar 2018 23:48:39 +0100 Subject: [PATCH 01/11] 01: working prototype --- 01 - JavaScript Drum Kit/index-ZORMIT.html | 130 +++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index-ZORMIT.html diff --git a/01 - JavaScript Drum Kit/index-ZORMIT.html b/01 - JavaScript Drum Kit/index-ZORMIT.html new file mode 100644 index 0000000000..b63ad0bae5 --- /dev/null +++ b/01 - JavaScript Drum Kit/index-ZORMIT.html @@ -0,0 +1,130 @@ + + + + + JS Drum Kit + + + + + +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

+ +

+ + + + + + From 262c9e0cc1179ab8e62af9b927d4b58350fde3b0 Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Sat, 3 Mar 2018 23:56:42 +0100 Subject: [PATCH 02/11] 01: refactor components into functions --- 01 - JavaScript Drum Kit/index-ZORMIT.html | 53 +++++++++++----------- 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-ZORMIT.html b/01 - JavaScript Drum Kit/index-ZORMIT.html index b63ad0bae5..4f973f9a8c 100644 --- a/01 - JavaScript Drum Kit/index-ZORMIT.html +++ b/01 - JavaScript Drum Kit/index-ZORMIT.html @@ -74,35 +74,32 @@ * https://stackoverflow.com/a/14101453, https://stackoverflow.com/a/27612019 * => classList.add/remove */ -document.onkeydown = function (e) { - var keynum; - - if (window.event) { // IE - keynum = e.keyCode; - } else if (e.which) { // Netscape/Firefox/Opera - keynum = e.which; +filterObjFor = function (keynum) { + return function (obj) { + return obj.dataset.key == keynum; } - - filterObjForKeynum = function (keynum) { - return function ( obj ) { - return obj.dataset.key == keynum; - } - }(keynum); +} +playSound = function(keynum) { var sounds = Array.from(document.getElementsByTagName('audio')); - var sound = sounds.filter(filterObjForKeynum); + var sound = sounds.filter(filterObjFor(keynum)); if (sound.length == 1) { // TODO this seems to block another, parallel playing. sound[0].play(); } - +} +highlight = function(keynum, add) { var keys = Array.from(document.getElementsByClassName('key')); - var key = keys.filter(filterObjForKeynum); + var key = keys.filter(filterObjFor(keynum)); if (key.length == 1) { - key[0].classList.add("playing"); + if (add) { + key[0].classList.add("playing"); + } else { + key[0].classList.remove("playing"); + } } } -document.onkeyup = function (e) { +document.onkeydown = function (e) { var keynum; if (window.event) { // IE @@ -111,17 +108,19 @@ keynum = e.which; } - filterObjForKeynum = function (keynum) { - return function ( obj ) { - return obj.dataset.key == keynum; - } - }(keynum); + playSound(keynum); + highlight(keynum, true); +} +document.onkeyup = function (e) { + var keynum; - var keys = Array.from(document.getElementsByClassName('key')); - var key = keys.filter(filterObjForKeynum); - if (key.length == 1) { - key[0].classList.remove("playing"); + if (window.event) { // IE + keynum = e.keyCode; + } else if (e.which) { // Netscape/Firefox/Opera + keynum = e.which; } + + highlight(keynum, false); } From 92c6c5c75ac0895ed46b279c090852bfabc310dc Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Sun, 4 Mar 2018 00:16:04 +0100 Subject: [PATCH 03/11] 01: fix some bugs with help of the solution --- 01 - JavaScript Drum Kit/index-ZORMIT.html | 26 ++++++++-------------- 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-ZORMIT.html b/01 - JavaScript Drum Kit/index-ZORMIT.html index 4f973f9a8c..6e5ef8f190 100644 --- a/01 - JavaScript Drum Kit/index-ZORMIT.html +++ b/01 - JavaScript Drum Kit/index-ZORMIT.html @@ -84,19 +84,15 @@ var sound = sounds.filter(filterObjFor(keynum)); if (sound.length == 1) { - // TODO this seems to block another, parallel playing. + sound[0].currentTime = 0; sound[0].play(); } } -highlight = function(keynum, add) { +highlight = function(keynum) { var keys = Array.from(document.getElementsByClassName('key')); var key = keys.filter(filterObjFor(keynum)); if (key.length == 1) { - if (add) { - key[0].classList.add("playing"); - } else { - key[0].classList.remove("playing"); - } + key[0].classList.add("playing"); } } document.onkeydown = function (e) { @@ -109,19 +105,15 @@ } playSound(keynum); - highlight(keynum, true); + highlight(keynum); } -document.onkeyup = function (e) { - var keynum; - - if (window.event) { // IE - keynum = e.keyCode; - } else if (e.which) { // Netscape/Firefox/Opera - keynum = e.which; - } - highlight(keynum, false); +function removeTransition(e) { + if (e.propertyName !== 'transform') return; + e.target.classList.remove('playing'); } +const keys = Array.from(document.querySelectorAll('.key')); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); From 3295593d4a55c217581c6f0f5896c42da7e80de1 Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Sun, 4 Mar 2018 13:32:27 +0100 Subject: [PATCH 04/11] 02: working prototype --- 02 - JS and CSS Clock/index-ZORMIT.html | 98 +++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 02 - JS and CSS Clock/index-ZORMIT.html diff --git a/02 - JS and CSS Clock/index-ZORMIT.html b/02 - JS and CSS Clock/index-ZORMIT.html new file mode 100644 index 0000000000..c98d421e83 --- /dev/null +++ b/02 - JS and CSS Clock/index-ZORMIT.html @@ -0,0 +1,98 @@ + + + + + JS + CSS Clock + + + + +

+ + + + + + + From abef5325960bb620d0dcbb2ae2466eb027b88377 Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Sun, 4 Mar 2018 13:42:08 +0100 Subject: [PATCH 05/11] 02: refactor, after watching solution video. * pull const elements outside * replace some vars by consts * use ES6 template literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals --- 02 - JS and CSS Clock/index-ZORMIT.html | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/02 - JS and CSS Clock/index-ZORMIT.html b/02 - JS and CSS Clock/index-ZORMIT.html index c98d421e83..ed7394205d 100644 --- a/02 - JS and CSS Clock/index-ZORMIT.html +++ b/02 - JS and CSS Clock/index-ZORMIT.html @@ -75,19 +75,20 @@ * https://stackoverflow.com/a/7188740 * => setTimeout */ +const hourHand = document.querySelector(`.hour-hand`); +const minHand = document.querySelector(`.min-hand`); +const secondHand = document.querySelector(`.second-hand`); + function tick() { - const hourHand = document.querySelector(`.hour-hand`); - const minHand = document.querySelector(`.min-hand`); - const secondHand = document.querySelector(`.second-hand`); - var d = new Date(); - var secondsDeg = (d.getSeconds() / 60 * 360) + 90; - var minsDeg = (d.getMinutes() / 60 * 360) + 90; - var hoursDeg = ((d.getHours() % 12) / 60 * 360) + 90; + const now = new Date(); + const secondsDeg = ((now.getSeconds() / 60) * 360) + 90; + const minsDeg = ((now.getMinutes() / 60) * 360) + 90; + const hoursDeg = (((now.getHours() % 12) / 60) * 360) + 90; - secondHand.style.transform = "rotate(" + secondsDeg + "deg)"; - minHand.style.transform = "rotate(" + minsDeg + "deg)"; - hourHand.style.transform = "rotate(" + hoursDeg + "deg)"; + secondHand.style.transform = `rotate(${secondsDeg}deg)`; + minHand.style.transform = `rotate(${minsDeg}deg)`; + hourHand.style.transform = `rotate(${hoursDeg}deg)`; // call again in one second setTimeout(tick, 1000); From 1f542cdccb90c0c7ea549399667c5975894b1b43 Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Mon, 5 Mar 2018 11:17:56 +0100 Subject: [PATCH 06/11] 03: working prototype --- 03 - CSS Variables/index-ZORMIT.html | 80 ++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 03 - CSS Variables/index-ZORMIT.html diff --git a/03 - CSS Variables/index-ZORMIT.html b/03 - CSS Variables/index-ZORMIT.html new file mode 100644 index 0000000000..0f7972152b --- /dev/null +++ b/03 - CSS Variables/index-ZORMIT.html @@ -0,0 +1,80 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +

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

+ +

+ + + + + + + From da43a7babc429a916cbd017dd262604f746770f8 Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Mon, 5 Mar 2018 11:30:31 +0100 Subject: [PATCH 07/11] 03: copy the more generic solution, after watching video --- 03 - CSS Variables/index-ZORMIT.html | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/03 - CSS Variables/index-ZORMIT.html b/03 - CSS Variables/index-ZORMIT.html index 0f7972152b..e4afcddb86 100644 --- a/03 - CSS Variables/index-ZORMIT.html +++ b/03 - CSS Variables/index-ZORMIT.html @@ -61,19 +61,14 @@

Update CSS Variables with JS

From f2b2fc33f153e559febeaf9d91cc643434d92b09 Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Mon, 5 Mar 2018 13:26:16 +0100 Subject: [PATCH 08/11] 04: solve it. --- 04 - Array Cardio Day 1/index-ZORMIT.html | 68 +++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 04 - Array Cardio Day 1/index-ZORMIT.html diff --git a/04 - Array Cardio Day 1/index-ZORMIT.html b/04 - Array Cardio Day 1/index-ZORMIT.html new file mode 100644 index 0000000000..b1dda083bf --- /dev/null +++ b/04 - Array Cardio Day 1/index-ZORMIT.html @@ -0,0 +1,68 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From 43aa52cd119fb6b5dbed02affd3a81a37888171d Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Wed, 7 Mar 2018 15:24:13 +0100 Subject: [PATCH 09/11] 05: solve by following video. --- 05 - Flex Panel Gallery/index-ZORMIT.html | 140 ++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 05 - Flex Panel Gallery/index-ZORMIT.html diff --git a/05 - Flex Panel Gallery/index-ZORMIT.html b/05 - Flex Panel Gallery/index-ZORMIT.html new file mode 100644 index 0000000000..300ce82f51 --- /dev/null +++ b/05 - Flex Panel Gallery/index-ZORMIT.html @@ -0,0 +1,140 @@ + + + + + Flex Panels 💪 + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + + + From 8c839ead1d8fde626d720711e88664807f27056c Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Fri, 9 Mar 2018 00:37:15 +0100 Subject: [PATCH 10/11] 06: working prototype. --- 06 - Type Ahead/index-ZORMIT.html | 45 +++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 06 - Type Ahead/index-ZORMIT.html diff --git a/06 - Type Ahead/index-ZORMIT.html b/06 - Type Ahead/index-ZORMIT.html new file mode 100644 index 0000000000..3d20eece24 --- /dev/null +++ b/06 - Type Ahead/index-ZORMIT.html @@ -0,0 +1,45 @@ + + + + + Type Ahead 👀 + + + + + + + + From e7629cc9b6c5e8acd18db9bff8b8bad44a7e2fa5 Mon Sep 17 00:00:00 2001 From: Moritz Neeb Date: Fri, 9 Mar 2018 01:04:13 +0100 Subject: [PATCH 11/11] 07: solved! --- 07 - Array Cardio Day 2/index-ZORMIT.html | 52 +++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 07 - Array Cardio Day 2/index-ZORMIT.html diff --git a/07 - Array Cardio Day 2/index-ZORMIT.html b/07 - Array Cardio Day 2/index-ZORMIT.html new file mode 100644 index 0000000000..966862a2bd --- /dev/null +++ b/07 - Array Cardio Day 2/index-ZORMIT.html @@ -0,0 +1,52 @@ + + + + + Array Cardio 💪💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + +