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 Kit/index.html similarity index 71% rename from 01 - JavaScript Drum Kit/index-FINISHED.html rename to 01 - JavaScript Drum Kit/index.html index 1a16d0997c..9aaba63c8f 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index.html @@ -57,25 +57,28 @@

- diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 075578c930..f783be532e 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -24,6 +24,7 @@ body,html { font-size: 1.5rem; padding: 1rem .5rem; transition: all .07s ease; + width: 10rem; text-align: center; color: white; diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html deleted file mode 100644 index ee7eaefb1f..0000000000 --- a/02 - JS and CSS Clock/index-START.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index.html similarity index 59% rename from 02 - JS and CSS Clock/index-FINISHED.html rename to 02 - JS and CSS Clock/index.html index 37436ed1ca..4ee0c736db 100644 --- a/02 - JS and CSS Clock/index-FINISHED.html +++ b/02 - JS and CSS Clock/index.html @@ -62,38 +62,41 @@ background:black; position: absolute; top:50%; + right: 50%; + transition: all 0.05s cubic-bezier(0.02, 2.56, 0.56, 1); transform-origin: 100%; transform: rotate(90deg); - transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } - - + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html deleted file mode 100644 index 8a4f0d556e..0000000000 --- a/03 - CSS Variables/index-START.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -

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

- -

- - - - - - - diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index.html similarity index 98% rename from 03 - CSS Variables/index-FINISHED.html rename to 03 - CSS Variables/index.html index c931959a74..294568cfb6 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index.html @@ -21,6 +21,7 @@

Update CSS Variables with JS

- diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index.html similarity index 62% rename from 04 - Array Cardio Day 1/index-START.html rename to 04 - Array Cardio Day 1/index.html index eec0ffc31d..1ac43bcd23 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index.html @@ -31,28 +31,73 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen = inventors.filter(invetor => (invetor.year >= 1500 && invetor.year <= 1599)); + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + console.log(fullNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + // const ordered = inventors.sort(function(firstPerson, secondPerson){ + // const ordered = inventors.sort(function(a, b){ + // if(a.year > b. year){ + // return 1; + // } else { + // return -1; + // } + // }); + const ordered = inventors.sort((a,b) => (a.year>b.year?1:-1)); + console.table(ordered); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); + console.log(totalYears); // 5. Sort the inventors by years lived + const oldest = inventors.sort(function(a,b){ + const lastGuy = a.passed - a.year; + const 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 + // const category = document.querySelector('.mw-category'); + // // you can call query selectorall against something you already have + // 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] = nextOne.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-START.html b/05 - Flex Panel Gallery/index-START.html deleted file mode 100644 index c6509bed02..0000000000 --- a/05 - Flex Panel Gallery/index-START.html +++ /dev/null @@ -1,111 +0,0 @@ - - - - - Flex Panels 💪 - - - - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- - - - - - - diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index.html similarity index 83% rename from 05 - Flex Panel Gallery/index-FINISHED.html rename to 05 - Flex Panel Gallery/index.html index f703fed6ae..96116541c1 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index.html @@ -42,10 +42,14 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; justify-content: center; + align-items: center; + display: flex; flex-direction: column; + justify-content: center; } @@ -55,20 +59,20 @@ .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } - /* Flex Items */ .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 > *:first-child, .panel.open-active > *:last-child { transform: translateY(0); } .panel p { @@ -82,8 +86,8 @@ } .panel.open { - flex: 5; font-size:40px; + flex: 5; } @@ -118,23 +122,13 @@ - function toggleActive(e) { - console.log(e.propertyName); - if (e.propertyName.includes('flex')) { - this.classList.toggle('open-active'); - } - } + - panels.forEach(panel => panel.addEventListener('click', toggleOpen)); - panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); - + + diff --git a/05 - Flex Panel Gallery/script.js b/05 - Flex Panel Gallery/script.js new file mode 100644 index 0000000000..34d51cc44a --- /dev/null +++ b/05 - Flex Panel Gallery/script.js @@ -0,0 +1,16 @@ +console.log('hello'); +const panels = document.querySelectorAll('.panel'); + +function toggleOpen(){ + this.classList.toggle('open'); +}; + +function toggleActive(e){ + console.log(e.propertyName); + if(e.propertyName.includes('flex')){ + this.classList.toggle('open-active'); + } +}; + +panels.forEach(panel => panel.addEventListener('click', toggleOpen)); +panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); \ No newline at end of file