diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..b2c9cd9218 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,3 +1,5 @@ + + @@ -62,12 +64,32 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.7, -0.27, 0.11, 1.91); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 8a4f0d556e..7a6a464cf8 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,3 +1,4 @@ + @@ -25,6 +26,19 @@

Update CSS Variables with JS

/* misc styles, nothing to do with CSS variables */ + :root { + --base: #ffc800; + --blur: 10px; + --padding: 20px; + } + img { + padding: var(--padding); + background: var(--base); + filter: blur(var(--blur)); + } + .hl { + color: var(--base); + } body { text-align: center; @@ -45,6 +59,15 @@

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..3015bc2c1c 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,3 +1,4 @@ +learning: console.table! sorted, reduce (mem, item) @@ -31,29 +32,50 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const filtered = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const fullNames = inventors.map(person => `${person.first} ${person.last}`); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sortedBirths = inventors.sort((a, b) => a.year > b.year ? 1: -1); // Array.prototype.reduce() // 4. How many years did all the inventors live? - + const totalYrs = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); // 5. Sort the inventors by years lived - + const sortedlives = inventors.sort((a, b) => { + return (a.passed - a.year) > (b.passed - b.year) ? 1:-1; + }) // 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('li a')); + // const de = links + // .map(li => li.textContent) + // .filter(li => li.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name - + const pplsort = people.sort((a, b) => { + const [alast, afirst] = a.split(', '); + const [blast, bfirst] = b.split(', '); + return afirst > bfirst ? 1: -1; + }) // 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 dataReduce = data.reduce((total, item) => { + if (!total[item]) { + total[item] = 0; + } + total[item] += 1; + return total; + }, {}); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 31c9167e16..b1a78c4f03 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,3 +1,4 @@ + @@ -24,6 +25,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +43,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -50,12 +57,30 @@ .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } + /*all the flex children;*/ .panel > * { 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 > *:last-child { + transform: translateY(100%); + } + .panel.open-active > *:first-child { + transform: translateY(0); + } + .panel.open-active > *:last-child { + transform: translateY(0); + } .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; @@ -68,6 +93,7 @@ .panel.open { font-size:40px; + flex: 5; } @@ -102,7 +128,20 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..c415b30eb3 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..60be1444e5 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,3 +1,4 @@ + @@ -26,16 +27,23 @@ // 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); + // Array.prototype.every() // is everyone 19 or older? + const isAdult2 = people.every(person => (new Date()).getFullYear() - person.year >= 19); // 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'); // 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'); + 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 37c148df07..8af5473f7f 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -1,3 +1,4 @@ + @@ -7,6 +8,56 @@