diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..6f32b04914 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -9,56 +9,75 @@
-
+
A clap
-
+
S hihat
-
+
D kick
-
+
F openhat
-
+
G boom
-
+
H ride
-
+
J snare
-
+
K tom
-
+
L tink
- - - - - - - - - + + + + + + + + + diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..642ddeb861 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,13 +61,55 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transition: all 0.1s; + transform: rotate(90deg); + 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 index 7171607a8b..64703b1432 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -9,7 +9,7 @@

Update CSS Variables with JS

- + @@ -21,6 +21,21 @@

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 4162bce339..a3ba75c56c 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,29 +33,72 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const inventors1500 = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600); + + console.table(inventors1500); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const inventorsNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + + console.log(inventorsNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const inventorsOldestToYoungest = inventors.sort((invA, invB) => invA.year > invB.year ? 1 : -1); + + console.table(inventorsOldestToYoungest); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const lifetimeOfAllInventors = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0); + + console.log(lifetimeOfAllInventors); // 5. Sort the inventors by years lived + const inventorsOrderedByLifetime = inventors.sort((invA, invB) => { + const invALifetime = invA.passed - invA.year; + const invBLifetime = invB.passed - invB.year; + + return invALifetime > invBLifetime ? 1 : -1; + }); + + console.table(inventorsOrderedByLifetime); // 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 deBoulevards = Array.from(document.querySelectorAll('.mw-category a')) + // .map(aElement => aElement.textContent) + // .filter(name => name.includes('de')); + // console.log(deBoulevards); + // 7. sort Exercise // Sort the people alphabetically by last name + const peoplesSortedByLastName = people.sort((pA, pB) => { + const [lastNameA, firstNameA] = pA.split(', '); + const [lastNameB, firstNameB] = pB.split(', '); + + return lastNameA > lastNameB ? 1 : -1; + }); + console.log(peoplesSortedByLastName); // 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 transportationCategories = data.reduce((reduced, el) => { + if (!reduced[el]) { + reduced[el] = 0; + } + + ++reduced[el]; + + return reduced; + }, {}); + + console.log(transportationCategories); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..9fbd4dddcb 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,10 @@ font-size: 20px; background-size:cover; background-position:center; + display: flex; + flex: 1; + flex-direction: column; + justify-content: center; } @@ -54,8 +59,17 @@ margin:0; width: 100%; transition:transform 0.5s; + display: flex; + flex: 1 0 auto; + 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 +81,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,7 +122,20 @@
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..2ce2fba5c9 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -15,8 +15,48 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..aa15e2efda 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -24,18 +24,31 @@ { text: 'Nice Nice Nice!', id: 542328 } ]; + const currentYear = (new Date()).getFullYear(); + // Some and Every Checks // Array.prototype.some() // is at least one person 19? + const isAnyPersonOver19 = people.some(person => (currentYear - person.year) >= 19); + console.log(isAnyPersonOver19); + // Array.prototype.every() // is everyone 19? + const areEveryPersonOver19 = people.every(person => (currentYear - person.year) >= 19); + console.log(areEveryPersonOver19); // 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 indexOfElementToRemove = comments.findIndex(comment => comment.id == 823423); + const removedElements = indexOfElementToRemove !== -1 ? comments.splice(indexOfElementToRemove, 1) : []; + console.table(comments); + console.table(removedElements);