diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..fdec8eabdf 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -7,15 +7,6 @@ -
-
-
-
-
-
-
- - +
+
+
+
+
+
+
+ + diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..970e055690 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -28,31 +28,80 @@ ]; const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; + let results; + const prettify = (function() { + let i = 1; + + const isArrayOfObjects = (variable) => ( + Array.isArray(variable) && typeof variable[0] === 'object' + ); + + return function prettify(results) { + console.log((i++) + '. ========================================\n'); + if (isArrayOfObjects(results)) { + console.table(results); + } else { + console.log(results); + } + } + })(); // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + results = inventors.filter((inventor) => ( + inventor.year >= 1500 && inventor.year < 1600 + )); + prettify(results); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + results = inventors.map((inventor) => `${inventor.first} ${inventor.last}`); + prettify(results); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + results = inventors.sort((a, b) => a.year - b.year); + prettify(results); // Array.prototype.reduce() // 4. How many years did all the inventors live? + results = inventors.reduce((total, inventor) => ( + total + (inventor.passed - inventor.year) + ), 0); + prettify(results); // 5. Sort the inventors by years lived + results = inventors.sort((a, b) => ( + (a.passed - a.year) - (b.passed - b.year) + )); + prettify(results); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + prettify([]); // 7. sort Exercise // Sort the people alphabetically by last name + // results = inventors.sort((a, b) => ( + // a.last.charCodeAt(0) - b.last.charCodeAt(0) + // )); + // prettify(results); + results = people.sort(); + prettify(results); + // 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' ]; + results = data.reduce((obj, word) => { + if (obj[word] === undefined) { + obj[word] = 0; + } + obj[word] += 1; + return obj; + }, {}); + prettify(results); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..ead1f90e25 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,9 +24,14 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1; background:#6B0F9C; box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); color:white; @@ -43,7 +48,6 @@ background-position:center; } - .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); } .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } @@ -53,7 +57,11 @@ .panel > * { margin:0; width: 100%; - transition:transform 0.5s; + transition: transform 0.5s cubic-bezier(0.61,-0.19, 0.7,-0.11) 0.5s; + flex: 1; + display: flex; + justify-content: center; + align-items: center; } .panel p { @@ -62,12 +70,30 @@ text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; } + .panel p:nth-child(2) { font-size: 4em; } .panel.open { font-size:40px; + flex: 5; + } + + .panel > *:first-child { + transform: translateY(-100%); + } + + .panel.open > *:first-child { + transform: translateY(0); + } + + .panel > *:last-child { + transform: translateY(100%); + } + + .panel.open > *:last-child { + transform: translateY(0); } .cta { @@ -107,7 +133,12 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..c116e84248 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -4,19 +4,107 @@ Type Ahead 👀 + + +
Loading...
- + + diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..61290cd759 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -24,17 +24,35 @@ { text: 'Nice Nice Nice!', id: 542328 } ]; + const year = (new Date()).getFullYear(); + // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + if (people.some((person) => ((year - person.year) >= 19))) { + console.log('Is at least one person 19 or older? YES'); + } else { + console.log('Is at least one person 19 or older? NO'); + } + // Array.prototype.every() // is everyone 19 or older? + if (people.every((person) => ((year - person.year) >= 19))) { + console.log('Is at least one person 19 or older? YES'); + } else { + console.log('Is at least one person 19 or older? NO'); + } // 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 result = comments.find((comment) => (comment.id === 823423)); + console.log('COMMENT', JSON.stringify(result)); // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 + const idx = comments.findIndex((comment) => (comment.id === 823423)); + delete comments[idx]; + console.log('COMMENTS', JSON.stringify(comments)); diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html index 8cab786140..bcfe08ad65 100644 --- a/12 - Key Sequence Detection/index-START.html +++ b/12 - Key Sequence Detection/index-START.html @@ -7,6 +7,41 @@ diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html index 0b9fb8fccb..aa47791572 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index-START.html @@ -58,6 +58,27 @@

Slide in on Scroll

}; } + const imgs = document.querySelectorAll('.site-wrap img'); + const buffer = 50; + + function onScroll(e) { + const top = window.scrollY + buffer; + const bottom = window.scrollY + window.innerHeight - buffer; + + imgs.forEach((img, i) => { + const imgTop = img.offsetTop; + const imgBottom = imgTop + img.height; + + if ((imgTop > top && imgTop < bottom) || (imgBottom > top && imgBottom < bottom)) { + img.className = 'align-right slide-in active'; + } else { + img.className = 'align-right slide-in'; + } + }); + } + + window.addEventListener('scroll', debounce(onScroll)); +