JS Drum Kit

From 55fd6bc188ffcbdb41f37aadbec9af2116f6b558 Mon Sep 17 00:00:00 2001 From: Eric Booker Date: Sat, 10 Dec 2016 09:04:55 -0800 Subject: [PATCH 1/2] Complete first 3 exersizes --- 01 - JavaScript Drum Kit/index-START.html | 66 ---------------- .../index-FINISHED.html | 0 .../index.html | 24 +++--- .../sounds/boom.wav | Bin .../sounds/clap.wav | Bin .../sounds/hihat.wav | Bin .../sounds/kick.wav | Bin .../sounds/openhat.wav | Bin .../sounds/ride.wav | Bin .../sounds/snare.wav | Bin .../sounds/tink.wav | Bin .../sounds/tom.wav | Bin .../style.css | 3 +- 02 - JS + CSS Clock/index-START.html | 73 ------------------ .../index-FINISHED.html | 0 .../index.html | 42 +++++----- .../index-FINISHED.html | 0 .../index.html | 44 ++++++++++- 18 files changed, 78 insertions(+), 174 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/index-START.html rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/index-FINISHED.html (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/index.html (81%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/boom.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/clap.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/hihat.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/kick.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/openhat.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/ride.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/snare.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/tink.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/tom.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/style.css (94%) delete mode 100644 02 - JS + CSS Clock/index-START.html rename {02 - JS + CSS Clock => 02 - JS + CSS Clock_completed}/index-FINISHED.html (100%) rename {02 - JS + CSS Clock => 02 - JS + CSS Clock_completed}/index.html (61%) rename {03 - CSS Variables => 03 - CSS Variables_completed}/index-FINISHED.html (100%) rename 03 - CSS Variables/index-START.html => 03 - CSS Variables_completed/index.html (54%) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html deleted file mode 100644 index 4070d32767..0000000000 --- a/01 - JavaScript Drum Kit/index-START.html +++ /dev/null @@ -1,66 +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-FINISHED.html b/01 - JavaScript Drum KitP_completed/index-FINISHED.html similarity index 100% rename from 01 - JavaScript Drum Kit/index-FINISHED.html rename to 01 - JavaScript Drum KitP_completed/index-FINISHED.html diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum KitP_completed/index.html similarity index 81% rename from 01 - JavaScript Drum Kit/index.html rename to 01 - JavaScript Drum KitP_completed/index.html index 246639f990..f5d8b60fe2 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum KitP_completed/index.html @@ -1,4 +1,4 @@ - + @@ -58,26 +58,28 @@

+ + diff --git a/01 - JavaScript Drum Kit/sounds/boom.wav b/01 - JavaScript Drum KitP_completed/sounds/boom.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/boom.wav rename to 01 - JavaScript Drum KitP_completed/sounds/boom.wav diff --git a/01 - JavaScript Drum Kit/sounds/clap.wav b/01 - JavaScript Drum KitP_completed/sounds/clap.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/clap.wav rename to 01 - JavaScript Drum KitP_completed/sounds/clap.wav diff --git a/01 - JavaScript Drum Kit/sounds/hihat.wav b/01 - JavaScript Drum KitP_completed/sounds/hihat.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/hihat.wav rename to 01 - JavaScript Drum KitP_completed/sounds/hihat.wav diff --git a/01 - JavaScript Drum Kit/sounds/kick.wav b/01 - JavaScript Drum KitP_completed/sounds/kick.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/kick.wav rename to 01 - JavaScript Drum KitP_completed/sounds/kick.wav diff --git a/01 - JavaScript Drum Kit/sounds/openhat.wav b/01 - JavaScript Drum KitP_completed/sounds/openhat.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/openhat.wav rename to 01 - JavaScript Drum KitP_completed/sounds/openhat.wav diff --git a/01 - JavaScript Drum Kit/sounds/ride.wav b/01 - JavaScript Drum KitP_completed/sounds/ride.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/ride.wav rename to 01 - JavaScript Drum KitP_completed/sounds/ride.wav diff --git a/01 - JavaScript Drum Kit/sounds/snare.wav b/01 - JavaScript Drum KitP_completed/sounds/snare.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/snare.wav rename to 01 - JavaScript Drum KitP_completed/sounds/snare.wav diff --git a/01 - JavaScript Drum Kit/sounds/tink.wav b/01 - JavaScript Drum KitP_completed/sounds/tink.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/tink.wav rename to 01 - JavaScript Drum KitP_completed/sounds/tink.wav diff --git a/01 - JavaScript Drum Kit/sounds/tom.wav b/01 - JavaScript Drum KitP_completed/sounds/tom.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/tom.wav rename to 01 - JavaScript Drum KitP_completed/sounds/tom.wav diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum KitP_completed/style.css similarity index 94% rename from 01 - JavaScript Drum Kit/style.css rename to 01 - JavaScript Drum KitP_completed/style.css index 3e0a320b37..b83ead7057 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum KitP_completed/style.css @@ -23,7 +23,7 @@ body,html { margin:1rem; font-size: 1.5rem; padding:1rem .5rem; - transition:all .07s; + transition:all .20s; width:100px; text-align: center; color:white; @@ -34,6 +34,7 @@ body,html { .playing { transform:scale(1.1); border-color:#ffc600; + border-radius: 10%; box-shadow: 0 0 10px #ffc600; } diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 2712384201..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock_completed/index-FINISHED.html similarity index 100% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS + CSS Clock_completed/index-FINISHED.html diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock_completed/index.html similarity index 61% rename from 02 - JS + CSS Clock/index.html rename to 02 - JS + CSS Clock_completed/index.html index 1c777557da..9d10eb0acf 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock_completed/index.html @@ -64,33 +64,35 @@ transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + transition-timing-function: cubic-bezier(0.25, 0, 0.15, 1.01); } - - + diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables_completed/index-FINISHED.html similarity index 100% rename from 03 - CSS Variables/index-FINISHED.html rename to 03 - CSS Variables_completed/index-FINISHED.html diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables_completed/index.html similarity index 54% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables_completed/index.html index bf0f33e3ba..25fc4a8513 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables_completed/index.html @@ -1,4 +1,4 @@ - + @@ -12,10 +12,10 @@

Update CSS Variables with JS

Blur: - + Base Color - +

@@ -26,6 +26,22 @@

Update CSS Variables with JS

misc styles, nothing to do with CSS variables */ + :root { + --base: #BADA55; + --spacing: 10px; + --blur: 0px; + } + + img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); + } + + .hl { + color: var(--base); + } + body { text-align: center; } @@ -53,7 +69,29 @@

Update CSS Variables with JS

+ + + + + + + + + + + + From 9240a57950a82970be639faee0a89bd51f502d02 Mon Sep 17 00:00:00 2001 From: Eric Booker Date: Sat, 10 Dec 2016 11:05:42 -0800 Subject: [PATCH 2/2] complete exercise 4 --- .../index-FINISHED.html | 0 .../index.html | 60 +++++++++++++++++++ 2 files changed, 60 insertions(+) rename {04 - Array Cardio Day 1 => 04 - Array Cardio Day 1_complete}/index-FINISHED.html (100%) rename 04 - Array Cardio Day 1/index-START.html => 04 - Array Cardio Day 1_complete/index.html (64%) diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1_complete/index-FINISHED.html similarity index 100% rename from 04 - Array Cardio Day 1/index-FINISHED.html rename to 04 - Array Cardio Day 1_complete/index-FINISHED.html diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1_complete/index.html similarity index 64% rename from 04 - Array Cardio Day 1/index-START.html rename to 04 - Array Cardio Day 1_complete/index.html index 6e28e357d0..bb159834b0 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1_complete/index.html @@ -27,29 +27,89 @@ // 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 + const fullNames = inventors.map(inventor => inventor.last + ', ' + inventor.first) + console.log(fullNames) // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const ordered = inventors.sort(function(a, b) { + if (a.year > b.year) { + return 1; + } else { + return -1 + } + }); + console.table(ordered); + + const ordered2 = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + console.table(ordered2); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce(function(total, inventor) { + return total + (inventor.passed - inventor.year) + }, 0); + + console.log(totalYears) // 5. Sort the inventors by years lived + var oldest = inventors.sort(function(a, b) { + var lastGuy = a.passed - a.year; + var nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -1 : 1; + + }); + 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 + // Copy and paste into console of above link + // var category = document.querySelector('.mw-category'); + // var links = Array.from(category.querySelectorAll('a')); + // var de = links + // .map(function(link) {return link.textContent }) + // .filter(function(streetName) {return streetName.includes('de')}) + // 7. sort Exercise // Sort the people alphabetically by last name + var lastname = people.sort(function(a, b) { return a > b ? 1 : -1 }); + + console.log("Sort by last name: ") + console.log(lastname) // 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' ]; + var transportation = data.reduce(function(obj, item) { + if (!obj[item]) { + obj[item] = 0; + }; + + obj[item]++; + return obj; + }, {}) + + console.log(transportation) + + + + + + + + + +