diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..7948d09163 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,10 +57,25 @@ - + function removeTransition(event) { + if (event.propertyName !== 'transform') return; + this.classList.remove('playing'); + }; + const keys = document.querySelectorAll('.key'); + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + window.addEventListener('keydown', playSound); + diff --git a/01 - JavaScript Drum Kit/notes.txt b/01 - JavaScript Drum Kit/notes.txt new file mode 100644 index 0000000000..14f173d50b --- /dev/null +++ b/01 - JavaScript Drum Kit/notes.txt @@ -0,0 +1,21 @@ +Cloned the JavaScript30 repository +Used Sublime Text instead of Rubymine + - Kind of a pain to set up + - Would like to have the same key bindings and color theme + + +Featues used: + - 'addEventListener' + - console + - 'querySelector' + - ES6 Template Strings `foo${value}` + - 'const' variables + - Audio elements + * currentTime + * play + - Element Attributes + * classList (add/remove/toggle) + - ES6 forEach + - ES6 '=>' arrow operator + -'transitionend' event + - ES6 === and !== \ No newline at end of file diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..f9b2dfdfc8 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,4 +1,4 @@ - + @@ -61,13 +61,43 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 3, 0.5, 1); } diff --git a/02 - JS + CSS Clock/notes.txt b/02 - JS + CSS Clock/notes.txt new file mode 100644 index 0000000000..32f0b52a47 --- /dev/null +++ b/02 - JS + CSS Clock/notes.txt @@ -0,0 +1,22 @@ +Thoughts +- switching from coffeescript is annoying, e.g. explicit returns and semi-colons + +Neat Tricks +- Chrome Dev Console CSS Editor: with cursor on a number value, typing shift+up/down will increase/decresase the number by 10 instead of 1 + +CSS +- transform + * rotate + +- transform-origin + +- transition + +- transition-timing-function + * + +JavaScript +- setInterval +- Date +- Element style attributes + * transform \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..99a8df73f7 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,7 +21,21 @@

Update CSS Variables with JS

- diff --git a/03 - CSS Variables/notes.txt b/03 - CSS Variables/notes.txt new file mode 100644 index 0000000000..41c89df20b --- /dev/null +++ b/03 - CSS Variables/notes.txt @@ -0,0 +1,19 @@ + +HTML features + - input type='range' + - input type='color' + +JavaScript features + - NodeList + - element 'dataset' attribute + +CSS features + - filters (blur) + +CSS Variables + - declared on an element + * ':root' being the highest + - each variable declared by prefixing with '--', e.g. '--foo' + - using variable call 'var(--foo)' + - values have scope and can be overridden + diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..65a7769636 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,28 +31,53 @@ // 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((first, second) => first.year > second.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 lived = inventors.sort((first, second) => ((first.passed - first.year) > (second.passed - second.year)) ? -1 : 1); + console.table(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 + const de = Array + .from(document.querySelectorAll('.mw-category a')) + .map(link => link.textContent) + .filter(name => name.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name + const alpha = people.sort((personA, personB) => { + const [aLast, aFirst] = personA.split(', '); + const [bLast, bFirst] = personB.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 sums = data.reduce(function(totals, item) { + totals[item] = !totals[item] ? 1: totals[item] + 1 + return totals; + }, {}) + console.log(sums); diff --git a/04 - Array Cardio Day 1/notes.txt b/04 - Array Cardio Day 1/notes.txt new file mode 100644 index 0000000000..b8fff97289 --- /dev/null +++ b/04 - Array Cardio Day 1/notes.txt @@ -0,0 +1,5 @@ +Neat stuff + - console.table + +Javscript functions: + - Array filter \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..ea975b776b 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -54,6 +60,22 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; + } + + .panel > *:first-child { + transform: translateY(-100%); + } + + .panel > *:last-child { + transform: translateY(100%); + } + + .panel.open-active > *:first-child, .panel.open-active > *:last-child { + transform: translateY(0); } .panel p { @@ -67,6 +89,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,7 +130,20 @@ diff --git a/05 - Flex Panel Gallery/notes.txt b/05 - Flex Panel Gallery/notes.txt new file mode 100644 index 0000000000..29d722abc1 --- /dev/null +++ b/05 - Flex Panel Gallery/notes.txt @@ -0,0 +1,10 @@ +Sublime Text: + * NO AUTOSAVE!!!! + +CSS: + * display: flex + * flex-direction: column; + * justify-content: center + - difference between this and text-align center? Justification? + * align-items: center + - no idea what this is \ No newline at end of file