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 72% rename from 01 - JavaScript Drum Kit/index-FINISHED.html rename to 01 - JavaScript Drum Kit/index.html index 1a16d0997c..295b7c565f 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index.html @@ -58,26 +58,29 @@ + key.classList.add('playing'); + } + + function removeTransition(e){ + if(e.propertyName !== 'transform') return; + + this.classList.remove('playing'); + } + const keys = document.querySelectorAll('.key'); + + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + window.addEventListener('keydown', playSound); + diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..7135ed871c 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,12 +61,43 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.3, 1.88, 0.12, 1.89); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..d27c5cb5a3 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,54 +1,78 @@ + - - Scoped CSS Variables and JS + + Scoped CSS Variables and JS - -

Update CSS Variables with JS

-
- - - - - + +

Update CSS Variables with JS

+ +
+ + + + + + +
+ + + + + + + function handleUpdate() { + const suffix = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix) + } + input.forEach(input => input.addEventListener('change', handleUpdate)); + input.forEach(input => input.addEventListener('mousemove', handleUpdate)); + + diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..58f9c8d596 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -34,28 +34,102 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const one = inventors.filter((inventor)=> { + return (inventor.year >= 1500) && (inventor.year < 1600); + }) + + console.group("1. Filter the list of inventors for those who were born in the 1500's") + console.table(one); + console.groupEnd(); + // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const two = inventors.map((inventor) => `${inventor.first} ${inventor.last}`) + + console.group("2. Give us an array of the inventors' first and last names") + console.log(two); + console.groupEnd(); + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const three = inventors.sort((a, b)=>{ + return a.year - b.year; + }); + + console.group("3. Sort the inventors by birthdate, oldest to youngest") + console.table(three); + console.groupEnd(); + // Array.prototype.reduce() // 4. How many years did all the inventors live? + const four = inventors.reduce((total, inventor)=> { + return total + (inventor.passed - inventor.year); + }, 0) + + console.group("4. How many years did all the inventors live?") + console.log(four); + console.groupEnd(); + // 5. Sort the inventors by years lived + const five = inventors.sort((a, b)=> { + return (a.passed - a.year) - (b.passed - b.year); + }) + + console.group("5. Sort the inventors by years lived") + console.table(five); + console.groupEnd(); + // 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'); + // const links = [...category.querySelectorAll('a')]; + // const de = links + // .map(link => link.textConent) + // .filter(streetName => streetName.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name + // function getLastName(person) { + // return person.substr(0, person.indexOf(',')); + // } + + // const lastNames = people.map((person)=>{ + // return getLastName(person); + // }) + + const seven = people.sort((a, b)=>{ + const [aLast, aFirst] = a.split(', '); + const [bLast, bFirst] = b.split(', '); + + return aLast > bLast ? 1 : -1; + }); + + console.group("7. Sort the people alphabetically by last name") + console.log(seven); + console.groupEnd(); + // 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 eight = data.reduce((obj, item)=> { + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + + console.group("8. Sum up the instances of each of transportations") + console.log(eight); + console.groupEnd(); + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..00967511b3 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } @@ -54,8 +60,17 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + 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 > *:last-child { transform: translateY(0); } + .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; @@ -67,6 +82,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,6 +123,23 @@
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..09d876429c 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,50 @@