HTML5 Canvas

A clap

S hihat

D kick

F openhat

G boom

H ride

J snare

K tom

L tink

@@ -60,9 +61,27 @@

From 3ac088ff99fb60df3bdd287104b3f55b01f7ea56 Mon Sep 17 00:00:00 2001 From: Erik Wallace Date: Thu, 15 Dec 2016 22:29:37 -0500 Subject: [PATCH 03/11] Update index-FINISHED.html Few tweaks from the tutorial code. Added 'js-' prefix to classes that I used as JS hooks. Also added comments for things I may forget or didn't know. --- 02 - JS + CSS Clock/index-FINISHED.html | 70 ++++++++++++++----------- 1 file changed, 39 insertions(+), 31 deletions(-) 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; } - - + From fcdd10be94fdddc8463d9436a49cc301acdbadc7 Mon Sep 17 00:00:00 2001 From: Erik Wallace Date: Fri, 16 Dec 2016 15:54:22 -0500 Subject: [PATCH 04/11] Update index-START.html --- 03 - CSS Variables/index-START.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) 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

From d48d75350579519d43e60bae341265cf745c37cf Mon Sep 17 00:00:00 2001 From: Erik Wallace Date: Sat, 17 Dec 2016 22:29:04 -0500 Subject: [PATCH 05/11] Update index-FINISHED.html --- 04 - Array Cardio Day 1/index-FINISHED.html | 58 +++++++++++---------- 1 file changed, 31 insertions(+), 27 deletions(-) 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); From da8a6551ee8cb1207bc23f395dbb6103660d9cae Mon Sep 17 00:00:00 2001 From: Erik Wallace Date: Tue, 20 Dec 2016 14:20:30 -0500 Subject: [PATCH 06/11] Update index-FINISHED.html Added prefix support for flex items, also a few comments --- 05 - Flex Panel Gallery/index-FINISHED.html | 85 +++++++++++++++++---- 1 file changed, 69 insertions(+), 16 deletions(-) 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 @@

+ + From 9c2f5134554a4fd360f32228f95176cef2196f32 Mon Sep 17 00:00:00 2001 From: Erik Wallace Date: Thu, 22 Dec 2016 10:45:25 -0500 Subject: [PATCH 07/11] Update index-FINISHED.html --- 06 - Type Ahead/index-FINISHED.html | 88 ++++++++++++++++------------- 1 file changed, 48 insertions(+), 40 deletions(-) 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 @@ From 3345dfae01b15ec19057dda63a08424c505ebaca Mon Sep 17 00:00:00 2001 From: Erik Wallace Date: Thu, 22 Dec 2016 15:31:39 -0500 Subject: [PATCH 08/11] Update index-FINISHED.html --- 07 - Array Cardio Day 2/index-FINISHED.html | 5 +++++ 1 file changed, 5 insertions(+) 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() From 78ce90ac0e2c29ffa7c5119ffb220e709193b7e8 Mon Sep 17 00:00:00 2001 From: Erik Wallace Date: Fri, 23 Dec 2016 11:28:02 -0500 Subject: [PATCH 09/11] Update index-FINISHED.html --- .../index-FINISHED.html | 100 ++++++++++-------- 1 file changed, 54 insertions(+), 46 deletions(-) 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 -

From 5fdd6f2655a1131746ec87ff3c46d2b3495211af Mon Sep 17 00:00:00 2001 From: Erik Wallace Date: Wed, 28 Dec 2016 20:31:31 -0500 Subject: [PATCH 10/11] Update index-FINISHED.html --- 09 - Dev Tools Domination/index-FINISHED.html | 51 +++++++++++-------- 1 file changed, 31 insertions(+), 20 deletions(-) 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 @@ From 5f38a074ccbef54c3d28c1d3e4ead6592b5cacce Mon Sep 17 00:00:00 2001 From: Erik Wallace Date: Thu, 29 Dec 2016 09:15:55 -0500 Subject: [PATCH 11/11] Update index-FINISHED.html --- .../index-FINISHED.html | 60 +++++++++++-------- 1 file changed, 34 insertions(+), 26 deletions(-) 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)); -