JS + CSS Clock

Update CSS Variables with JS

Date: Tue, 20 Dec 2016 13:16:02 -0600 Subject: [PATCH 06/17] Day Four - JavaScript array cardio --- 04 - Array Cardio Day 1/index-START.html | 56 +++++++++++++++++++++++- 1 file changed, 54 insertions(+), 2 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..b9aa84172e 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,28 +33,80 @@ // 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; + // } + // }); + + //Shorter version of above - ternary function. + 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; + + // if(lastGuy > nextGuy) { + // return -1; + // } else { + // return 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] = nextOne.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); From 14f68ded7dacdf0bd3c2b82fe18f01ac7eb5d227 Mon Sep 17 00:00:00 2001 From: Jacob Weber Date: Thu, 22 Dec 2016 15:41:23 -0600 Subject: [PATCH 07/17] Day 5 - flex panel gallery. --- 04 - Array Cardio Day 1/index-START.html | 6 +- 05 - Flex Panel Gallery/index-START.html | 87 ++++-------------------- 05 - Flex Panel Gallery/styles.css | 83 ++++++++++++++++++++++ 3 files changed, 101 insertions(+), 75 deletions(-) create mode 100644 05 - Flex Panel Gallery/styles.css diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index b9aa84172e..d48a3563b9 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -102,9 +102,9 @@ if (!obj[item]) { obj[item] = 0; } - obj[item]++; - return obj; - }, {}); + obj[item]++; + return obj; + }, {}); console.log(transportation); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..9f85843261 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -4,80 +4,10 @@ Flex Panels 💪 + - - - +

Hey

@@ -107,7 +37,20 @@

diff --git a/05 - Flex Panel Gallery/styles.css b/05 - Flex Panel Gallery/styles.css new file mode 100644 index 0000000000..ab4ae7d2f4 --- /dev/null +++ b/05 - Flex Panel Gallery/styles.css @@ -0,0 +1,83 @@ +html { + box-sizing: border-box; + background:#ffc600; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; +} +body { + margin: 0; +} +*, *:before, *:after { + box-sizing: inherit; +} + +.panels { + min-height:100vh; + overflow: hidden; + display: flex; +} + +.panel { + background:#6B0F9C; + box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); + color:white; + text-align: center; + align-items:center; + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + font-size: 20px; + background-size:cover; + background-position:center; + flex: 1; + justify-content: center; + display: flex; + flex-direction: column; +} + + +.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } +.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); } +.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } +.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } +.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } + +/* Flex Items */ +.panel > * { + 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.open-active > *:first-child { transform: translateY(0); } +.panel > *:last-child { transform: translateY(100%); } +.panel.open-active > *:last-child { transform: translateY(0); } + +.panel p { + text-transform: uppercase; + font-family: 'Amatic SC', cursive; + text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); + font-size: 2em; +} +.panel p:nth-child(2) { + font-size: 4em; +} + +.panel.open { + flex: 5; + font-size:40px; +} + +.cta { + color:white; + text-decoration: none; +} \ No newline at end of file From 28638c8ecaa1e18a87e1eb7cfbfc39778389e314 Mon Sep 17 00:00:00 2001 From: Jacob Weber Date: Thu, 22 Dec 2016 15:42:20 -0600 Subject: [PATCH 08/17] Day 4 - Cardio Array 1 --- 04 - Array Cardio Day 1/index-START.html | 1 - 1 file changed, 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index d48a3563b9..d34119ef93 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -11,7 +11,6 @@ // ## Array Cardio Day 1 // Some data we can work with - const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, From d060743e004e5be3938aea724f41ab2ebc0a0792 Mon Sep 17 00:00:00 2001 From: Jacob Weber Date: Tue, 27 Dec 2016 15:09:47 -0600 Subject: [PATCH 09/17] Day 6 - Type Ahead - added rank --- 06 - Type Ahead/index-START.html | 44 ++++++++++++++++++++++++++++++++ 06 - Type Ahead/style.css | 9 ++++++- 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..7fadeb0ff4 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,50 @@ diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css index 36dc55f30e..c2a52a9512 100644 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -62,10 +62,17 @@ background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); } - span.population { + span.population, + span.rank { font-size: 15px; } + span.rank { + background: rgba(0,0,0,0.6); + color: white; + padding: 1px; + border-radius: 0.5em; + } .details { text-align: center; From 1020b7737fcbd274348c3714332e01057da1f2e6 Mon Sep 17 00:00:00 2001 From: Jacob Weber Date: Wed, 28 Dec 2016 10:27:56 -0600 Subject: [PATCH 10/17] Day 7 - Array Cardio Day 2 --- 07 - Array Cardio Day 2/index-START.html | 45 ++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..5500b3b75a 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,16 +26,61 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + + // const isAdult = people.some(function(person){ + // const currentYear = (new Date()).getFullYear(); + // if(currentYear - person.year >= 19) { + // return true; + // } + // }); + + const isAdult = people.some(person => { + const currentYear = (new Date()).getFullYear(); + return currentYear - person.year >= 19; + }); + + console.log(isAdult); // Array.prototype.every() // is everyone 19? + const allAdults = people.every(person => { + const currentYear = (new Date()).getFullYear(); + return currentYear - person.year >= 19; + }); + + console.log(allAdults); // 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(function(comment){ + // if(comment.id === 823423){ + // return true; + // } + // }); + + const comment = comments.find(comment => { + return comment.id === 823423; + }); + + console.log(comment); // 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); + console.log(index); + + // comments.splice(index, 1); + + //ES6 Spread into new array with comment removed. + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ]; + console.log(newComments); + + From 049580a9f06fc4e77c391fea96016ecc5f897e08 Mon Sep 17 00:00:00 2001 From: Jacob Weber Date: Wed, 28 Dec 2016 13:00:12 -0600 Subject: [PATCH 11/17] Day 8 - HTML5 Canvas drawing --- 08 - Fun with HTML5 Canvas/index-START.html | 54 +++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..b03531e57e 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,60 @@