From 0e7887d7998c9104a6b36a4139214af61468a111 Mon Sep 17 00:00:00 2001 From: mokutsu Date: Tue, 5 Sep 2017 23:14:07 -0400 Subject: [PATCH 1/5] complete js30 proj 2 --- 02 - JS and CSS Clock/index-START.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..fda27ee07e 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -62,12 +62,32 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.7, -0.27, 0.11, 1.91); } From e729f892acc507d812e5859bb8fe7c352a610c91 Mon Sep 17 00:00:00 2001 From: mokutsu Date: Thu, 7 Sep 2017 23:06:04 -0400 Subject: [PATCH 2/5] js30 proj 3 and 4! woot! --- 02 - JS and CSS Clock/index-START.html | 2 ++ 03 - CSS Variables/index-START.html | 23 +++++++++++++++++ 04 - Array Cardio Day 1/index-START.html | 32 ++++++++++++++++++++---- 3 files changed, 52 insertions(+), 5 deletions(-) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index fda27ee07e..b2c9cd9218 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,3 +1,5 @@ + + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 8a4f0d556e..7a6a464cf8 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,3 +1,4 @@ + @@ -25,6 +26,19 @@

Update CSS Variables with JS

/* misc styles, nothing to do with CSS variables */ + :root { + --base: #ffc800; + --blur: 10px; + --padding: 20px; + } + img { + padding: var(--padding); + background: var(--base); + filter: blur(var(--blur)); + } + .hl { + color: var(--base); + } body { text-align: center; @@ -45,6 +59,15 @@

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 eec0ffc31d..3015bc2c1c 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,3 +1,4 @@ +learning: console.table! sorted, reduce (mem, item) @@ -31,29 +32,50 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const filtered = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const fullNames = inventors.map(person => `${person.first} ${person.last}`); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sortedBirths = inventors.sort((a, b) => a.year > b.year ? 1: -1); // Array.prototype.reduce() // 4. How many years did all the inventors live? - + const totalYrs = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); // 5. Sort the inventors by years lived - + const sortedlives = inventors.sort((a, b) => { + return (a.passed - a.year) > (b.passed - b.year) ? 1:-1; + }) // 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('li a')); + // const de = links + // .map(li => li.textContent) + // .filter(li => li.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name - + const pplsort = people.sort((a, b) => { + const [alast, afirst] = a.split(', '); + const [blast, bfirst] = b.split(', '); + return afirst > bfirst ? 1: -1; + }) // 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 dataReduce = data.reduce((total, item) => { + if (!total[item]) { + total[item] = 0; + } + total[item] += 1; + return total; + }, {}); From 43534d147873cbce8e60f64d8a3cde1508ac1245 Mon Sep 17 00:00:00 2001 From: mokutsu Date: Mon, 11 Sep 2017 22:39:37 -0400 Subject: [PATCH 3/5] add in step 6 --- 06 - Type Ahead/index-START.html | 38 ++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..c415b30eb3 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,44 @@ From f6970699f7de67f0c1ee42d85000c1e2a70ff298 Mon Sep 17 00:00:00 2001 From: mokutsu Date: Tue, 12 Sep 2017 23:25:45 -0400 Subject: [PATCH 4/5] lesson 8 --- 08 - Fun with HTML5 Canvas/index-START.html | 50 +++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..5a0cab7b1e 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,56 @@ @@ -102,7 +128,20 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..60be1444e5 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,3 +1,4 @@ + @@ -26,16 +27,23 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + const isAdult = people.some(person => (new Date()).getFullYear() - person.year >= 19); + // Array.prototype.every() // is everyone 19 or older? + const isAdult2 = people.every(person => (new Date()).getFullYear() - person.year >= 19); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 - + const comment = comments.find(comment => comment.id == '823423'); // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 - + const index = comments.findIndex(comment => comment.id == '823423'); + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index+1) + ]; diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 5a0cab7b1e..8af5473f7f 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -1,3 +1,4 @@ + @@ -14,7 +15,7 @@ canvas.height = window.innerHeight; ctx.strokeStyle = '#BADA55'; ctx.lineJoin = 'round'; - ctx.lineCap = 'rousnd'; + ctx.lineCap = 'round'; ctx.lineWidth = 5; // global composite operator ctx.globalCompositeOperation = 'multiply'; diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html index 196fffd719..d963a02922 100644 --- a/09 - Dev Tools Domination/index-START.html +++ b/09 - Dev Tools Domination/index-START.html @@ -18,29 +18,44 @@ } // Regular - + console.log('hello'); // Interpolated - + console.log('hello i am a %s', 32442) // Styled - + console.log('%c hello i am a some great text!', 'font-size:25px;color:pink;') // warning! - + console.warn('this is just a warning!'); // Error :| - + console.error('A MISTAKE! DUH DUH DUHHHH') // Info - - // Testing - + console.info('FYI: did you know...') + // Testing - only shows something if it is wrong + console.assert(1==1, 'this is incorrect'); + console.assert(2==1, 'this is incorrect'); // clearing - - // Viewing DOM Elements - + console.clear(); + // Viewing DOM Elements - see element methods and attributes like python dir! :D + const p = document.querySelector('p'); + console.dir(p) // Grouping together - + dogs.forEach(dog => { + console.groupCollapsed(`${dog.name}`);s + console.groupEnd(`${dog.name}`) + }) + x // counting - + console.log('hey hey hey'); + console.count('hey'); // timing - + console.time('fetch data'); + fetch('https://api.github.com/users/wesbos'); + .then(data => data.json()) + .then(data => { + console.timeEnd('fetching data'); + console.log(data); + }) + + console.table(dogs) diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index aeac48e7f9..c7f834d4f4 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -99,6 +99,28 @@