diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..ae96bac0a3 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,7 +59,25 @@ diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 55ab1a5331..5bb38857f6 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -63,13 +63,34 @@ background: black; position: absolute; top: 50%; + transform-origin: 100%; + transform:rotate(90deg); + transition: all 0.05s; + transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index d5fcc3a2ae..6eb193d907 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -19,10 +19,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 0dcfd00f40..a9f2ec20b4 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -38,28 +38,75 @@ // 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 inventors first and last names + // 2. Give us an array of the inventor 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(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 all together? + // 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 lastInventor = a.passed - a.year; + const nextInventor = b.passed - b.year; + return lastInventor > nextInventor ? -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'); + // 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 data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick']; + + 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 88a4f1d1e2..6e817a246b 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -27,6 +27,7 @@ .panels { min-height: 100vh; overflow: hidden; + display: flex; } .panel { @@ -44,6 +45,11 @@ font-size: 20px; background-size: cover; background-position: center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } @@ -57,7 +63,18 @@ margin: 0; width: 100%; transition: transform 0.5s; + border: 1px solid red; + 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 > *:first-child {transform: translateY(0);} + + .panel p { text-transform: uppercase; @@ -72,6 +89,7 @@ .panel.open { font-size: 40px; + flex:5 ; } @@ -106,7 +124,22 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 5a9aa7e4e8..4c6d4a5f31 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 4ca34c7536..a19544a909 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -27,16 +27,25 @@ // 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() // Find the comment with this ID // delete the comment with the ID of 823423 - + const index = comments.findIndex(comment => comment.id === 823423); + console.log(index); + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ] diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index f70ad2059b..ff2c857b1b 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -8,6 +8,59 @@ + +