JS Drum Kit

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

+ + + + + + + + + + + + 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) + + + + + + + + + +