HTML5 Canvas

A clap

S hihat

D kick

F openhat

G boom

H ride

J snare

K tom

L tink

@@ -58,26 +61,30 @@

+ diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html index db653a5340..0f76a7875e 100644 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS + CSS Clock/index-FINISHED.html @@ -9,9 +9,9 @@

@@ -58,41 +58,49 @@ .hand { width:50%; height:6px; - background:black; + background-color: black; position: absolute; top:50%; - transform-origin: 100%; - transform: rotate(90deg); + transform-origin: 100%; /* make the right end the pivot point of rotation, not the middle (default = 50%) */ + transform: rotate(90deg); /* flip the hand from horizontal, to vertical pointing at 12:00; */ transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + transition-timing-function: ease-in-out; /* helps mimic second hand tick action */ + z-index: 25; } - - + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..81a4395f4c 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,6 +21,24 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html index e61b94c006..5d93bfde1f 100644 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ b/04 - Array Cardio Day 1/index-FINISHED.html @@ -11,6 +11,7 @@ // ## Array Cardio Day 1 // Some data we can work with + // Each inventor is an object const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, @@ -27,39 +28,40 @@ { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } ]; + const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry']; + 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']; // 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); + // Use a filter function to find all inventors who were born in the 1500's + // A filter function will loop over all data in the inventors array + const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year <=1599)); + console.table(fifteen); // table displays results for this better than log // Array.prototype.map() - // 2. Give us an array of the inventor first and last names - const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + // 2. Give us an array of the inventors' 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) { + // const birthdate = 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); + + // shorthand way to tackle the sort function above + const birthdate = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + console.table(birthdate); // 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); + }, 0); // the first total will be undefined, so add a zero here // 5. Sort the inventors by years lived const oldest = inventors.sort(function(a, b) { @@ -71,32 +73,34 @@ // 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 links = Array.from(category.querySelector('a')); // const de = links - // .map(link => link.textContent) - // .filter(streetName => streetName.includes('de')); + // .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 [aFirst, aLast] = lastOne.split(', '); - const [bFirst, bLast] = nextOne.split(', '); - return aLast > bLast ? 1 : -1; + const alpha = people.sort(function(lastOne, nextOne) { + const [alast, afirst] = lastOne.split(', '); // help format the result + const [blast, bfirst] = nextOne.split(', '); // help format the result + // console.log(last, first); + 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', 'pogostick']; + const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'gitane', 'gunnar', 'huffy' ]; const transportation = data.reduce(function(obj, item) { - if (!obj[item]) { - obj[item] = 0; + // start with a blank object + if(!obj[item]) { + obj[item] = 0; // if there's no object item, set it to 0 } - obj[item]++; - return obj; + obj[item]++; // increment and step through + return(obj); }, {}); console.log(transportation); diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html index 243f8a221d..82cf89c024 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -22,19 +22,44 @@ } .panels { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height:100vh; overflow: hidden; - display: flex; } .panel { background:#6B0F9C; box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); color:white; + + display: -webkit-box; + display: -ms-flexbox; + display: flex; + + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; - align-items:center; /* Safari transitionend event.propertyName === flex */ /* Chrome + FF transitionend event.propertyName === flex-grow */ + /* Help our transform transitions */ transition: font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), @@ -42,10 +67,6 @@ font-size: 20px; background-size:cover; background-position:center; - flex: 1; - justify-content: center; - display: flex; - flex-direction: column; } @@ -55,21 +76,43 @@ .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } - /* Flex Items */ .panel > * { margin:0; width: 100%; transition:transform 0.5s; + + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; flex: 1 0 auto; - display:flex; + + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; + + -webkit-box-align: center; + -ms-flex-align: 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); } + /* For every first word (or child) make them -100% */ + .panel > *:first-child { + transform: translateY(-100%); + } + + /* For every first word (or child) make them -100% */ + .panel.open-active > *:first-child { + transform: translateY(0); + } + + /* For every last word (or child) make them 100% */ + .panel > *:last-child { + transform: translateY(100%); + } + + /* For every first word (or child) make them -100% */ + .panel.open-active > *:last-child { + transform: translateY(0); + } .panel p { text-transform: uppercase; @@ -82,8 +125,11 @@ } .panel.open { - flex: 5; font-size:40px; + + -webkit-box-flex: 5; + -ms-flex: 5; + flex: 5; /* take up more room than the initial flex:1 - take 5x the amount */ } .cta { @@ -123,23 +169,30 @@

+ + diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html index 5902b43936..9393568de0 100644 --- a/06 - Type Ahead/index-FINISHED.html +++ b/06 - Type Ahead/index-FINISHED.html @@ -15,46 +15,54 @@ diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html index c8e5b25d3b..a86837ed15 100644 --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ b/07 - Array Cardio Day 2/index-FINISHED.html @@ -25,6 +25,8 @@ ]; // Some and Every Checks + // .some checks if at least one thing in your array is a match for what you're looking for + // Array.prototype.some() // is at least one person 19? // const isAdult = people.some(function(person) { // const currentYear = (new Date()).getFullYear(); @@ -33,12 +35,15 @@ // } // }); + // Find who is 19 or older in my array const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); + // Curly braces around a variable in console.log = shows the name of the variable and value console.log({isAdult}); // Array.prototype.every() // is everyone 19? const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); + console.log({allAdults}); // Array.prototype.find() diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html index 0791e17d0d..435def3101 100644 --- a/08 - Fun with HTML5 Canvas/index-FINISHED.html +++ b/08 - Fun with HTML5 Canvas/index-FINISHED.html @@ -5,61 +5,69 @@ HTML5 Canvas -

diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html index 55cd3a2f42..d7752e2530 100644 --- a/09 - Dev Tools Domination/index-FINISHED.html +++ b/09 - Dev Tools Domination/index-FINISHED.html @@ -11,6 +11,12 @@ diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html index 3ce296cc4b..471087b60d 100644 --- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html +++ b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html @@ -103,35 +103,43 @@

- -checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck)); -