diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..3dd3cf7e89 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,10 +1,12 @@ + JS Drum Kit + @@ -57,10 +59,34 @@ - + function playSound(e) { + const audio = document.querySelector('audio[data-key="' + e.keyCode + '"]'); + const key = document.querySelector('.key[data-key="' + e.keyCode + '"]'); + + if (!audio) { + return; + } + + audio.currentTime = 0; + audio.play(); + 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); + + - + + \ No newline at end of file diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..682fbde8c7 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,99 @@ + - - JS + CSS Clock + + JS + CSS Clock +
-
-
-
-
-
+
+
+
+
+
- - - + + + - + + \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 8a4f0d556e..23d81c7f72 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,51 +1,77 @@ + - - Scoped CSS Variables and JS + + Scoped CSS Variables and JS + -

Update CSS Variables with JS

+

Update CSS Variables with JS

+ +
+ + -
- - + + - - + + +
- - -
+ - + + input { + width: 100px; + } + - + - + + \ No newline at end of file diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..b6aedd7b77 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.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(function(i){ + return i.year >= 1500 && i.year < 1600; + }); + + // Can be written as + //const fifteen = inventors.filter(i => i.year >= 1500 && i.year < 1600); + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const fullNames = inventors.map(i => `${i.first} ${i.last}`); + console.log(fullNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + // const ordered = inventors.sort(function(a, b){ + // return a.year - b.year; + // }); + + 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 sortedByYearsLived = inventors.sort(function(a, b){ + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -1 : 1; + }); + console.table(sortedByYearsLived); // 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 = 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((a, b) => { + const [aLast, aFirst] = a.split(', '); + const [bLast, bFirst] = b.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 index 31c9167e16..2bedfba753 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; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -54,6 +60,24 @@ 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 > *:last-child { + transform: translateY(100%); + } + + .panel.open-active > *:first-child, + .panel.open-active > *:last-child + { + transform: translateY(0); } .panel p { @@ -68,6 +92,7 @@ .panel.open { font-size:40px; + flex: 5; } @@ -102,6 +127,20 @@