From fb79ca33f2ff98034b7b7319f68a2283b341f425 Mon Sep 17 00:00:00 2001 From: Orion Date: Fri, 16 Dec 2016 03:09:08 -0500 Subject: [PATCH 1/4] Initial commit --- 01 - JavaScript Drum Kit/index-START.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..02a1d0e5a1 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,9 @@ From c8012a8dd323d829ef47c3e5dc84bc5580526b15 Mon Sep 17 00:00:00 2001 From: Orion Date: Fri, 16 Dec 2016 03:45:19 -0500 Subject: [PATCH 2/4] Completed Day 1 completely vanilla-ly --- 01 - JavaScript Drum Kit/index-START.html | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 02a1d0e5a1..ce714ee052 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,9 +58,23 @@ From dbd8d4572905c013a55821080e6ced5970767457 Mon Sep 17 00:00:00 2001 From: Orion Date: Sun, 18 Dec 2016 00:39:30 -0500 Subject: [PATCH 3/4] Did day 2 and 3 :) --- 02 - JS + CSS Clock/index-START.html | 23 +++++++++++++++++++++++ 03 - CSS Variables/index-START.html | 24 ++++++++++++++++++++++++ 2 files changed, 47 insertions(+) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..ec4b480318 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,13 +61,36 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + 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..d317850551 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,6 +21,21 @@

Update CSS Variables with JS

From 16c3156ecccb2e86a25dad6e0e02b2ac36f001df Mon Sep 17 00:00:00 2001 From: Orion Date: Mon, 19 Dec 2016 03:03:21 -0500 Subject: [PATCH 4/4] Did day 4 and added a much needed Notes.txt --- 04 - Array Cardio Day 1/index-START.html | 47 +++++++++++++++++- Notes.txt | 62 ++++++++++++++++++++++++ 2 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 Notes.txt diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..bdbd01403b 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,29 +33,74 @@ // 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); + // Array.prototype.map() // 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) { + // return 1; + // } else { + // return -1; + // } + // }) + //^ is the same as the following ternary thing + + const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + console.table(ordered); // 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); // 5. Sort the inventors by years lived + const oldest = inventors.sort(function(a, b) { + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -1 : 1; + }); + console.table(oldest); // 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 de = links + // .map(link => link.textContent) + // .filter(streetName => streetName.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name + const alpha = people.sort(function(lastOne, nextOne) { + const [aLast, aFirst] = lastOne.split(', '); + const [bLast, bFirst] = lastOne.split(', '); + 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' ]; + const transportation = data.reduce(function(obj, item) { + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + console.log(transportation); + diff --git a/Notes.txt b/Notes.txt new file mode 100644 index 0000000000..1efdc74464 --- /dev/null +++ b/Notes.txt @@ -0,0 +1,62 @@ +JavaScript30 Notes + +//Shoulda started with day 1 but didn't it's day 4 now lol ;) + +Day 4 +1. Array.prototype.filter() + returns the things in an array with specified properties + you would do like + + const filteredArray = items.filter(function(item) { + if(attributes and values to filter on) { + return true; + } + }); + + Ok so I guess because that only returns true/false you could also do like... + + const filteredArray = items.filter(item => item.attributes and values to filter on); + +2. console.table + super dope! it's like console.log but for objects and returns a table with the objects' attributes :-) + +3. => + okay so I'm sure there's more to it but basically => creates a function, it kind of implies the word function around the word before it and also the word return before (or after) the next argument + + so.. + var materialsLength1 = materials.map(function(material){ + return material.length + }); + == + var materialsLength2 = materials.map(material => material.length); + +4. Array.prototype.map() + -maps over an array and returns an array of the same length + +5. Array.prototype.sort() + evaluates 2 values in an array and based on a conditional returns 1 or -1. This causes the sorting, I don't really understand how. + things.sort((a, b) => a.value > b.value ? 1 : -1); + +6. Array.prototype.reduce() + Allow you to build something on every value in the array + -it gives you your running total or what you've returned from each time through + -it replaces something like this + totalThings = 0; + for (i = 0; i < things.length; i++) + { + totalThings += things[i]; + } + console.log(totalThings); + + or whatever. + + so you would do like... + const totalThings = things.reduce((total, thing) => { + return total + (thing); + }, 0); + and that , 0 part is because the first time you run through there is no total. + +7. querySelector + Well, I don't understand it that fully yet, but it basically looks through the DOM for the item you want. You use querySelector when you want to find one item and querySelectorAll when you want to return a list. Also, it returns as a node list, not an array. + + \ No newline at end of file