A @@ -58,9 +56,26 @@

- + function removeTransition(e) { + if (e.propertyName !== 'transform') + return; + this.classList.remove('playing'); + } + const keys = document.querySelectorAll('.key'); + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + window.addEventListener('keydown', playSound); + - + \ No newline at end of file From ef229c2dde393a4508b33b4bea762a374c3fa7c5 Mon Sep 17 00:00:00 2001 From: epikkoder Date: Mon, 4 Dec 2017 17:10:13 -0800 Subject: [PATCH 02/20] finished Day 2 --- 02 - JS and CSS Clock/index-START.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..e65e0ee672 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -62,13 +62,37 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(1,0,.6,1.75); } From d88379df20c0e4571c417948f7a3469b46bcbc33 Mon Sep 17 00:00:00 2001 From: epikkoder Date: Thu, 7 Dec 2017 15:37:19 -0800 Subject: [PATCH 03/20] finished Day 3 --- 03 - CSS Variables/index-START.html | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 8a4f0d556e..922af548f3 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,6 +21,21 @@

Update CSS Variables with JS

- + \ No newline at end of file From 7dc750858cd6cf288127379f5bac6a6579c3fa02 Mon Sep 17 00:00:00 2001 From: epikkoder Date: Fri, 15 Dec 2017 17:14:10 -0800 Subject: [PATCH 04/20] saved changes to Day 4 --- 04 - Array Cardio Day 1/index-START.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..74818303cc 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,12 +31,23 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const inventorsBorn1500s = inventors.filter(inventor => inventor.year >= 1500 && inventor.year <= 1599); + console.table(inventorsBorn1500s); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const names = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + console.table(names); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sorted = inventors.sort(function(a, b) { + return a.year - b.year; + }); + /* using arrow functions */ + const sorted2 = inventors.sort((a, b) => a.year - b.year); + console.table(sorted); + console.table(sorted2); // Array.prototype.reduce() // 4. How many years did all the inventors live? From 12e57c6dc202bdb738d93b6f90a9bdf1165956b9 Mon Sep 17 00:00:00 2001 From: epikkoder Date: Tue, 19 Dec 2017 00:45:22 -0800 Subject: [PATCH 05/20] saved changes for Day 4 --- 04 - Array Cardio Day 1/index-START.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 74818303cc..2f71ffd7d1 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -51,8 +51,16 @@ // 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 yearsLived = inventors.sort(function(a, b) { + return (a.passed - a.year) - (b.passed - b.year); + }); + console.table(yearsLived); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris From 16cf7df59cf9f1876f50cc458a4304a3ae5c37a8 Mon Sep 17 00:00:00 2001 From: epikkoder Date: Thu, 28 Dec 2017 15:31:20 -0800 Subject: [PATCH 06/20] finished Day 4 --- 04 - Array Cardio Day 1/index-START.html | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 2f71ffd7d1..5cca42eac4 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -64,14 +64,32 @@ // 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(name => name.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name + const alpha = people.sort((a, b) => { + const [aLast, aFirst] = a.split(', '); + const [bLast, bFirst] = b.split(', '); + return aLast - bLast; + }); + 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 3235294cbdef325a0bf2e3ed18505514f5ced312 Mon Sep 17 00:00:00 2001 From: epikkoder Date: Sun, 14 Jan 2018 11:38:38 -0800 Subject: [PATCH 07/20] finished Day 5 --- 05 - Flex Panel Gallery/index-START.html | 29 ++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index c6509bed02..430dfe163c 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,8 +60,17 @@ 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; @@ -67,6 +82,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -102,7 +118,20 @@

From 2791ba9420f3cad8421db9e25994470fc94a1abb Mon Sep 17 00:00:00 2001 From: epikkoder Date: Mon, 22 Jan 2018 15:43:09 -0800 Subject: [PATCH 08/20] finished Day 6 --- 06 - Type Ahead/index-START.html | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..3ea7e9b1d7 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,40 @@ From 60abf040fa3f3d824508f326a230c1d15e5d07d7 Mon Sep 17 00:00:00 2001 From: epikkoder Date: Thu, 25 Jan 2018 14:25:46 -0800 Subject: [PATCH 09/20] finished Day 7 --- 07 - Array Cardio Day 2/index-START.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..6195586fa8 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,39 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + // const isAdult = people.some(function(person) { + // const currentYear = (new Date()).getFullYear(); + // if (currentYear - person.year >= 19) { + // return true; + // } + // }); + + const isAdult = people.some(person => (new Date()).getFullYear() - person.year >= 19); + console.log(isAdult); + // Array.prototype.every() // is everyone 19 or older? + const allAdults = people.every(person => (new Date()).getFullYear() - 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(comment => 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); + + // Creating a new array without the selected element. + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ]; From aa2592bdc908a040f70e9eea855acc0716dc1847 Mon Sep 17 00:00:00 2001 From: epikkoder Date: Thu, 12 Apr 2018 13:31:49 -0700 Subject: [PATCH 10/20] finished Day 8 --- 08 - Fun with HTML5 Canvas/index-START.html | 48 +++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..93e82d0a1e 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,54 @@