diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..ce714ee052 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,23 @@ 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

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