A @@ -59,8 +58,29 @@ + const playSound = function(event) { + + const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${event.keyCode}"]`); + + if(audio) { + audio.currentTime = 0; + audio.play(); + key.classList.add('playing'); + } + + }; + const removeTransition = function(event) { + if(event.propertyName === 'transform') { + this.classList.remove('playing'); + } + }; + + document.addEventListener('keydown', playSound); + document.querySelectorAll('.key').forEach(key => key.addEventListener('transitionend', removeTransition)); + + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..1106cd2b05 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -62,13 +62,45 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.5s; + transition-timing-function: cubic-bezier(0.1, 2.5, 0.5, 1); } + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..809a4a4001 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -22,6 +22,22 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..c426b1b3ec 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,28 +31,63 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const oldInventors = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); + console.table(oldInventors); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const inventorNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + console.log(inventorNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + // TODO: Remove sorted in var name + const inventorsByBirthDate = inventors.sort((a, b) => (a.year > b.year ? 1 : -1)); + console.table(inventorsByBirthDate); // 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 + // TODO: Remove sorted in var name + const inventorsSortedByYearsLived = inventors.sort((a, b) => { + return a.passed - a.year > b.passed - b.year ? 1 : -1; + }); + console.table(inventorsSortedByYearsLived); // 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 links = Array.from(document.querySelectorAll('.mw-category a')); + const de = links.map(link => link.text).filter(streetName => streetName.includes('de')); + console.log(de); // 7. sort Exercise // Sort the people alphabetically by last name + // TODO: Refactor destructuring of people objects + const peopleByLastName = people.sort((a, b) => { + const [aLast, aFirst] = a.split(', '); + const [bLast, bFirst] = b.split(', '); + return aLast > bLast ? 1 : -1; + }); + console.log(peopleByLastName); // 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' ]; + // TODO: Refactor reduce function + const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogo stick']; + const transportation = data.reduce(function(obj ,item) { + if(!obj[item]) { + obj[item] = 1; + } else { + 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 e1d643ad5c..674504f962 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,26 @@ 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 { @@ -67,6 +93,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,6 +134,21 @@

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..00231f35df 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,44 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..6f35e1e73a 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,27 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + const isAdult = people.some(person => (new Date().getFullYear() - person.year >= 19)) + console.log(isAdult); + // Array.prototype.every() // is everyone 19 or older? + const allAdults = people.every(person => (new Date().getFullYear() - person.year >= 19)) + console.log(allAdults); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 + const comment = comments.find(comment => comment.id === 823423); + console.log(comment); // Array.prototype.findIndex() + const index = comments.findIndex(comment => comment.id === 823423); + console.log(index); + // Find the comment with this ID // delete the comment with the ID of 823423 + comments.splice(index, 1); + console.table(comments); diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..e40318a728 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,66 @@