- +

+ .hand.second-hand { + margin-top: 3px; + margin-left: 1px; + width: 150px; + background: #555555; + } - - diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..3851fff718 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -9,10 +9,10 @@

Update CSS Variables with JS

Spacing: - + Blur: - + Base Color @@ -45,10 +45,10 @@

Update CSS Variables with JS

input { width:100px; } + - + diff --git a/03 - CSS Variables/sliders.js b/03 - CSS Variables/sliders.js new file mode 100644 index 0000000000..7b58ed9371 --- /dev/null +++ b/03 - CSS Variables/sliders.js @@ -0,0 +1,29 @@ +var spacingAmountElement = document.querySelector('input[name="spacing"]') +var blurAmountElement = document.querySelector('input[name="blur"]') +var baseColorElement = document.querySelector('input[name="base"]') + +var spacingAmount = spacingAmountElement.value +var blurAmount = blurAmountElement.value +var baseColor = baseColorElement.value + +var image = document.querySelector('img') + +function adjustImage() { + image.style.border = 'solid ' + (spacingAmount * .1) + 'px ' + baseColor + image.style.filter = 'blur(' + (blurAmount * .1) + 'px)' +} + +spacingAmountElement.addEventListener('change', function(e) { + spacingAmount = e.target.value + adjustImage() +}) + +blurAmountElement.addEventListener('change', function(e) { + blurAmount = e.target.value + adjustImage() +}) + +baseColorElement.addEventListener('change', function(e) { + baseColor = e.target.value + adjustImage() +}) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..d3863080f5 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,31 +31,119 @@ 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']; + console.log( "-----------------------------------------------------------------------" ) + // Array.prototype.filter() - // 1. Filter the list of inventors for those who were born in the 1500's + console.log( "1. Filter the list of inventors for those who were born in the 1500's" ) + + const answer_one = inventors.filter(function(inventor){ + return inventor.year > 1500 && inventor.year < 1600 + }) + console.log( "Answer 1: (log of objects in answer array)" ) + for( let item of answer_one ) { + console.log( item ) + } + + console.log( "-----------------------------------------------------------------------" ) // Array.prototype.map() - // 2. Give us an array of the inventors' first and last names + console.log( "2. Give us an array of the inventors' first and last names" ) + + const answer_two = inventors.map(function(inventor){ + return { first: inventor.first, last: inventor.last } + }) + console.log( "Answer 2: (log of objects in answer array)" ) + for( let item of answer_two ) { + console.log( item ) + } + + console.log( "-----------------------------------------------------------------------" ) // Array.prototype.sort() - // 3. Sort the inventors by birthdate, oldest to youngest + console.log( "3. Sort the inventors by birthdate, oldest to youngest" ) + + const answer_three = inventors.sort(function(a, b){ + return a.year - b.year + }) + console.log( "Answer 3: (log of objects in answer array)" ) + for( let item of answer_three ) { + console.log( item ) + } + + console.log( "-----------------------------------------------------------------------" ) // Array.prototype.reduce() - // 4. How many years did all the inventors live? + console.log( "4. How many years did all the inventors live?" ) + + const answer_four = inventors.reduce(function(acc, obj){ + return acc + (obj.passed - obj.year) + }, 0) + console.log( "Answer 4: " + answer_four ) + + console.log( "-----------------------------------------------------------------------" ) + + console.log( "5. Sort the inventors by years lived (ascending)" ) + + const answer_five = inventors.sort(function(a,b){ + return (a.passed - a.year) - (b.passed - b.year) + }) + console.log( "Answer 5: (log of objects in answer array)" ) + for( let item of answer_five ) { + console.log( item ) + } - // 5. Sort the inventors by years lived - // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + // Wiki Api URL + // https://en.wikipedia.org/w/api.php?action=query&list=categorymembers&cmtitle=Category:Boulevards_in_Paris&cmlimit=500&format=json + + // Nested element to gather + // query -> categorymembers -> title + + // Based on this regex we will also gather names that have 'des' in them + fetch('https://en.wikipedia.org/w/api.php?action=query&list=categorymembers&cmtitle=Category:Boulevards_in_Paris&cmlimit=500&format=json&origin=*').then(function(response) { + response.json().then(function(json) { + console.log( "-----------------------------------------------------------------------" ) + console.log( "6. create a list of Boulevards in Paris that contain 'de' anywhere in the name" ) + var answer_six = json.query.categorymembers.filter(function(obj) { + return !!obj.title.match(/.+de.+/) + }) + console.log( "Answer 6: (log of object titles in answer array)" ) + for( let obj of answer_six ) { + console.log( obj.title ) + } + }) + }) + + console.log( "-----------------------------------------------------------------------" ) // 7. sort Exercise - // Sort the people alphabetically by last name + console.log( "7. Sort the people alphabetically by last name" ) + + var answer_seven = people.sort(function(a,b){ + return a.localeCompare(b) + }) + console.log( "Answer 7: " + answer_seven ) + + console.log( "-----------------------------------------------------------------------" ) // 8. Reduce Exercise - // Sum up the instances of each of these + console.log( "8. Sum up the instances of each of these" ) const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + var answer_eight = data.reduce(function(memo, item) { + memo.hasOwnProperty(item) ? memo[item] += 1 : Object.assign(memo, { [item]: 1 }) + return memo + }, {}) + + console.log( "Answer 8: " ) + for( let key of Object.keys(answer_eight) ) { + console.log( key + ": " + answer_eight[key] ) + } + + console.log( "-----------------------------------------------------------------------" ) +