JS Drum Kit

From d991ac4ebfdd734f6997937222864fa7e941c038 Mon Sep 17 00:00:00 2001 From: Heron Date: Thu, 2 Mar 2017 19:56:59 +0000 Subject: [PATCH 1/7] 1,2,3 and doing 4 --- .tern-project | 7 ++ 01 - JavaScript Drum Kit/donebyme.html | 87 +++++++++++++ 01 - JavaScript Drum Kit/index-START.html | 130 ++++++++++--------- 02 - JS and CSS Clock/donebyme.html | 103 +++++++++++++++ 02 - JS and CSS Clock/index-START.html | 146 +++++++++++----------- 03 - CSS Variables/donebyme.html | 80 ++++++++++++ 03 - CSS Variables/index-START.html | 108 ++++++++-------- 04 - Array Cardio Day 1/index-START.html | 29 +++-- 8 files changed, 488 insertions(+), 202 deletions(-) create mode 100644 .tern-project create mode 100644 01 - JavaScript Drum Kit/donebyme.html create mode 100644 02 - JS and CSS Clock/donebyme.html create mode 100644 03 - CSS Variables/donebyme.html diff --git a/.tern-project b/.tern-project new file mode 100644 index 0000000000..22bd8f4635 --- /dev/null +++ b/.tern-project @@ -0,0 +1,7 @@ +{ + "ecmaVersion": 6, + "libs": [ + "browser" + ], + "plugins": {} +} \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/donebyme.html b/01 - JavaScript Drum Kit/donebyme.html new file mode 100644 index 0000000000..eded585292 --- /dev/null +++ b/01 - JavaScript Drum Kit/donebyme.html @@ -0,0 +1,87 @@ + + + + + + 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..fa18d8ed53 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,64 @@ - - - - - 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 +

+ +

+ + + + diff --git a/02 - JS and CSS Clock/donebyme.html b/02 - JS and CSS Clock/donebyme.html new file mode 100644 index 0000000000..1905c4ad98 --- /dev/null +++ b/02 - JS and CSS Clock/donebyme.html @@ -0,0 +1,103 @@ + + + + + + JS + CSS Clock + + + + + +

+ + + + + + + + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..157b7947b7 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,72 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - + + + + + + JS + CSS Clock + + + + + +

+ + + + + + + + diff --git a/03 - CSS Variables/donebyme.html b/03 - CSS Variables/donebyme.html new file mode 100644 index 0000000000..30e2905a2c --- /dev/null +++ b/03 - CSS Variables/donebyme.html @@ -0,0 +1,80 @@ + + + + + + Scoped CSS Variables and JS + + + +

Update CSS Variables with JS

+ +

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

+ +

+ + + + + + + + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..39bfb33c79 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,54 +1,54 @@ - - - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -

- Spacing: - - - Blur: - - - Base Color - -

- -

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

Update CSS Variables with JS

+ +

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

+ +

+ + + + + + + + diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..a6c0a224d3 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -11,7 +11,7 @@ // ## Array Cardio Day 1 // Some data we can work with - + /* jshint esversion: 6 */ const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, @@ -31,22 +31,35 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's - + const inventors_1500 = inventors.filter(inventor => { + return (inventor.year >= 1500 && inventor.year < 1600); + }); + console.table(inventors_1500); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names - + const inventors_first_last = inventors.map(inventor => { + return `${inventor.first}, ${inventor.last}`; + }); + console.log(inventors_first_last); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest - + const inventors_byrthday = inventors.sort((a,b) => a.year > b.year ? 1 : -1); + console.table(inventors_byrthday); // Array.prototype.reduce() // 4. How many years did all the inventors live? - + const inventors_years_lived = inventors.reduce((total, inventor) =>{ + return total + (inventor.passed - inventor.year); + }, 0); + console.log(inventors_years_lived); // 5. Sort the inventors by years lived - + const inventors_by_years = inventors.sort((a,b) => (a.passed-a.year) > (b.passed-b.year) ? 1 : -1); + console.log(inventors_by_years); // 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 mw_category = document.querySelector('.mw-category'); + // const bule = Array.from(mw_category.querySelectorAll('a')); + // const de_bule = bule.map(b => b.textContent).filter( b => b.includes('de')); + // -------------------------------- // 7. sort Exercise // Sort the people alphabetically by last name From 3e4580b6090c652bbd095ea0109027569aafdeb0 Mon Sep 17 00:00:00 2001 From: Heron Rossi Date: Fri, 3 Mar 2017 16:46:45 -0300 Subject: [PATCH 2/7] 5 done --- 05 - Flex Panel Gallery/donebyme.html | 149 ++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 05 - Flex Panel Gallery/donebyme.html diff --git a/05 - Flex Panel Gallery/donebyme.html b/05 - Flex Panel Gallery/donebyme.html new file mode 100644 index 0000000000..b52fa826c1 --- /dev/null +++ b/05 - Flex Panel Gallery/donebyme.html @@ -0,0 +1,149 @@ + + + + + Flex Panels 💪 + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + + + From 7e2618d4b6fba03be4e1727236c2862b314f1993 Mon Sep 17 00:00:00 2001 From: Heron Date: Tue, 21 Mar 2017 15:33:07 +0000 Subject: [PATCH 3/7] 5 and 6 --- 06 - Type Ahead/donebyme.html | 56 +++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 06 - Type Ahead/donebyme.html diff --git a/06 - Type Ahead/donebyme.html b/06 - Type Ahead/donebyme.html new file mode 100644 index 0000000000..fca79ac724 --- /dev/null +++ b/06 - Type Ahead/donebyme.html @@ -0,0 +1,56 @@ + + + + + Type Ahead 👀 + + + + + + + + From 6cc742d3e0e3451ee2b8e0fc0a24e24fd6293658 Mon Sep 17 00:00:00 2001 From: Heron Date: Tue, 21 Mar 2017 18:58:15 -0300 Subject: [PATCH 4/7] done 4 and 7 --- 04 - Array Cardio Day 1/donebyme.html | 89 +++++++++++++++++++++++++++ 07 - Array Cardio Day 2/donebyme.html | 55 +++++++++++++++++ 2 files changed, 144 insertions(+) create mode 100644 04 - Array Cardio Day 1/donebyme.html create mode 100644 07 - Array Cardio Day 2/donebyme.html diff --git a/04 - Array Cardio Day 1/donebyme.html b/04 - Array Cardio Day 1/donebyme.html new file mode 100644 index 0000000000..34351c554f --- /dev/null +++ b/04 - Array Cardio Day 1/donebyme.html @@ -0,0 +1,89 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + diff --git a/07 - Array Cardio Day 2/donebyme.html b/07 - Array Cardio Day 2/donebyme.html new file mode 100644 index 0000000000..2735708fd1 --- /dev/null +++ b/07 - Array Cardio Day 2/donebyme.html @@ -0,0 +1,55 @@ + + + + + Array Cardio 💪💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From 6f1bc3daecca140c888f7e649b7051ce0faf4cc6 Mon Sep 17 00:00:00 2001 From: Heron Date: Tue, 21 Mar 2017 20:21:15 -0300 Subject: [PATCH 5/7] 8 done --- 08 - Fun with HTML5 Canvas/donebyme.html | 53 ++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 08 - Fun with HTML5 Canvas/donebyme.html diff --git a/08 - Fun with HTML5 Canvas/donebyme.html b/08 - Fun with HTML5 Canvas/donebyme.html new file mode 100644 index 0000000000..4fd41c7d59 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/donebyme.html @@ -0,0 +1,53 @@ + + + + + HTML5 Canvas + + +

+ + + + + + From c2d6cdd28499eb5bb1584e3b1525ac07742f4b7d Mon Sep 17 00:00:00 2001 From: Heron Date: Wed, 22 Mar 2017 19:57:54 +0000 Subject: [PATCH 6/7] 5 and doing 10 --- 05 - Flex Panel Gallery/donebyme.html | 298 +++++++++--------- .../donebyme.html | 135 ++++++++ 2 files changed, 284 insertions(+), 149 deletions(-) create mode 100644 10 - Hold Shift and Check Checkboxes/donebyme.html diff --git a/05 - Flex Panel Gallery/donebyme.html b/05 - Flex Panel Gallery/donebyme.html index b52fa826c1..15257137e4 100644 --- a/05 - Flex Panel Gallery/donebyme.html +++ b/05 - Flex Panel Gallery/donebyme.html @@ -1,149 +1,149 @@ - - - - - Flex Panels 💪 - - - - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- - - - - - - + + + + + Flex Panels 💪 + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + + + diff --git a/10 - Hold Shift and Check Checkboxes/donebyme.html b/10 - Hold Shift and Check Checkboxes/donebyme.html new file mode 100644 index 0000000000..9c652d625e --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/donebyme.html @@ -0,0 +1,135 @@ + + + + + Hold Shift to Check Multiple Checkboxes + + + + +

+ +

This is an inbox layout.

+ +

Check one item

+ +

Hold down your Shift key

+ +

Check a lower item

+ +

Everything inbetween should also be set to checked

+ +

Try do it with out any libraries

+ +

Just regular JavaScript

+ +

Good Luck!

+ +

Don't forget to tweet your result!

+ + + + From 4631551f8a1b6e61b74d1ee8e7c30b0727e93773 Mon Sep 17 00:00:00 2001 From: Heron Date: Wed, 22 Mar 2017 19:43:09 -0300 Subject: [PATCH 7/7] 10 and doing 11 --- .../donebyme.html | 267 +++++++++--------- 11 - Custom Video Player/index.html | 2 +- 11 - Custom Video Player/scripts.js | 0 11 - Custom Video Player/scripts_donebyme.js | 30 ++ 4 files changed, 163 insertions(+), 136 deletions(-) delete mode 100644 11 - Custom Video Player/scripts.js create mode 100644 11 - Custom Video Player/scripts_donebyme.js diff --git a/10 - Hold Shift and Check Checkboxes/donebyme.html b/10 - Hold Shift and Check Checkboxes/donebyme.html index 9c652d625e..8d196a1fa8 100644 --- a/10 - Hold Shift and Check Checkboxes/donebyme.html +++ b/10 - Hold Shift and Check Checkboxes/donebyme.html @@ -1,135 +1,132 @@ - - - - - Hold Shift to Check Multiple Checkboxes - - - - -

- -

This is an inbox layout.

- -

Check one item

- -

Hold down your Shift key

- -

Check a lower item

- -

Everything inbetween should also be set to checked

- -

Try do it with out any libraries

- -

Just regular JavaScript

- -

Good Luck!

- -

Don't forget to tweet your result!

- - - - + + + + + + Hold Shift to Check Multiple Checkboxes + + + + + +

+ +

This is an inbox layout.

+ +

Check one item

+ +

Hold down your Shift key

+ +

Check a lower item

+ +

Everything inbetween should also be set to checked

+ +

Try do it with out any libraries

+ +

Just regular JavaScript

+ +

Good Luck!

+ +

Don't forget to tweet your result!

+ + + + + diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html index 281a15eaa8..23e2ceda1e 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -22,6 +22,6 @@ - + diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/11 - Custom Video Player/scripts_donebyme.js b/11 - Custom Video Player/scripts_donebyme.js new file mode 100644 index 0000000000..8f89e62cff --- /dev/null +++ b/11 - Custom Video Player/scripts_donebyme.js @@ -0,0 +1,30 @@ +/*jshint esversion: 6*/ +const player = document.querySelector('.player'); +const video = player.querySelector('.viewer'); +const progress = player.querySelector('.progress'); +const progressBar = player.querySelector('.progress__filled'); +const toggle = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]'); +const ranges = player.querySelectorAll('.player__slider'); + + +// functions +function togglePlay(){ + const method = video.paused ? 'play': 'pause'; + video[method](); +} + +function updateButton(){ + const icon = this.paused ? '►' : '❚ ❚'; + toggle.textContent = icon; +} + +function skip(){ + video.currentTime += parseFloat(this.dataset.skip); +} +// event hookups +video.addEventListener('click', togglePlay); +video.addEventListener('play', updateButton); +video.addEventListener('pause', updateButton); +toggle.addEventListener('click', togglePlay); +skipButtons.forEach(button => button.addEventListener('click', skip));