From 0bcde413f6dd856986b440fc210cf5a701d7b8fb Mon Sep 17 00:00:00 2001 From: Arnaud Weyts Date: Fri, 16 Dec 2016 13:08:28 +0100 Subject: [PATCH 01/30] finished 1 & 2 --- .../{index-START.html => index-MINE.html} | 26 +++++++++++++---- .../{index-START.html => index-MINE.html} | 28 +++++++++++++++++-- 2 files changed, 47 insertions(+), 7 deletions(-) rename 01 - JavaScript Drum Kit/{index-START.html => index-MINE.html} (67%) rename 02 - JS + CSS Clock/{index-START.html => index-MINE.html} (56%) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-MINE.html similarity index 67% rename from 01 - JavaScript Drum Kit/index-START.html rename to 01 - JavaScript Drum Kit/index-MINE.html index 4070d32767..33b5004701 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-MINE.html @@ -6,8 +6,6 @@ - -
A @@ -46,7 +44,6 @@ tink
- @@ -56,11 +53,30 @@ + + function removeTransition(e) { + // end function if it's not a transform + if(e.propertyName !== 'transform') return; + this.classList.remove('playing'); + } + window.addEventListener('keydown', playSound); + const keys = document.querySelectorAll('.key'); + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-MINE.html similarity index 56% rename from 02 - JS + CSS Clock/index-START.html rename to 02 - JS + CSS Clock/index-MINE.html index 2712384201..5e5fb3ef2b 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-MINE.html @@ -18,7 +18,7 @@ From 499a5a60e6fd4f202619c79b253776c9402167d7 Mon Sep 17 00:00:00 2001 From: Arnaud Weyts Date: Sun, 18 Dec 2016 15:07:46 +0100 Subject: [PATCH 02/30] finsihed course 3 --- .../{index-START.html => index-MINE.html} | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) rename 03 - CSS Variables/{index-START.html => index-MINE.html} (62%) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-MINE.html similarity index 62% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables/index-MINE.html index 7171607a8b..2e747e64ee 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-MINE.html @@ -6,7 +6,6 @@

Update CSS Variables with JS

-
@@ -17,9 +16,7 @@

Update CSS Variables with JS

- - - + const inputs = document.querySelectorAll('.controls input'); + function handleUpdate() { + const suffix = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); + } + + inputs.forEach(input => input.addEventListener('change', handleUpdate)); + inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); + From 28d1315a1182fd71c71ccee35d3c96752ed4fbe3 Mon Sep 17 00:00:00 2001 From: Arnaud Weyts Date: Mon, 19 Dec 2016 20:19:28 +0100 Subject: [PATCH 03/30] finished cours 4 --- .../{index-START.html => index-MINE.html} | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) rename 04 - Array Cardio Day 1/{index-START.html => index-MINE.html} (69%) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-MINE.html similarity index 69% rename from 04 - Array Cardio Day 1/index-START.html rename to 04 - Array Cardio Day 1/index-MINE.html index 4162bce339..f25baa1241 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-MINE.html @@ -33,29 +33,67 @@ // 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 <= 1599)); + 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((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; + }); + 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((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 dbe9a7b8a6163a3f1493630153e3c8457d2edc65 Mon Sep 17 00:00:00 2001 From: Arnaud Weyts Date: Tue, 20 Dec 2016 11:22:31 +0100 Subject: [PATCH 04/30] finished course 5 --- .../{index-START.html => index-MINE.html} | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) rename 05 - Flex Panel Gallery/{index-START.html => index-MINE.html} (74%) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-MINE.html similarity index 74% rename from 05 - Flex Panel Gallery/index-START.html rename to 05 - Flex Panel Gallery/index-MINE.html index e1d643ad5c..4e64fbf648 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-MINE.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; } @@ -74,10 +90,7 @@ color:white; text-decoration: none; } - - -

Hey

@@ -105,12 +118,21 @@

Motion

- - + function toggleOpen() { + this.classList.toggle('open'); + } + function toggleActive(e) { + if(e.propertyName.includes('flex')) { + this.classList.toggle('open-active'); + } + } + panels.forEach(panel => panel.addEventListener('click', toggleOpen)); + panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); + From 2e507d51537db88a8c48ae1a05700ae7a0ce9d4d Mon Sep 17 00:00:00 2001 From: Arnaud Weyts Date: Tue, 20 Dec 2016 11:58:39 +0100 Subject: [PATCH 05/30] finsihed course 6 --- 06 - Type Ahead/index-START.html | 40 ++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..2f39f27129 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -6,7 +6,6 @@ -
    @@ -15,8 +14,45 @@
From 9fa0e1dd08ce61823573cf361560e884ab84e7e4 Mon Sep 17 00:00:00 2001 From: Arnaud Weyts Date: Tue, 20 Dec 2016 11:59:09 +0100 Subject: [PATCH 06/30] changed name --- 06 - Type Ahead/{index-START.html => index-MINE.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename 06 - Type Ahead/{index-START.html => index-MINE.html} (100%) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-MINE.html similarity index 100% rename from 06 - Type Ahead/index-START.html rename to 06 - Type Ahead/index-MINE.html From 7d28725826105e8c7a66ee2d0c1b83f0a8601f7d Mon Sep 17 00:00:00 2001 From: Arnaud Weyts Date: Tue, 20 Dec 2016 15:22:46 +0100 Subject: [PATCH 07/30] finished course 7 --- .../{index-START.html => index-MINE.html} | 13 +++++++++++++ 1 file changed, 13 insertions(+) rename 07 - Array Cardio Day 2/{index-START.html => index-MINE.html} (66%) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-MINE.html similarity index 66% rename from 07 - Array Cardio Day 2/index-START.html rename to 07 - Array Cardio Day 2/index-MINE.html index 206ec31aa0..15bdcc2c5a 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-MINE.html @@ -26,16 +26,29 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + const isAdult = people.some(person => ((new Date()).getFullYear() - person.year >= 19)); + + console.log({isAdult}); // Array.prototype.every() // is everyone 19? + 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); + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ]; + console.table(newComments); From 8aca3a4d3ec470857ebb1a60c0d803af2fdcda2c Mon Sep 17 00:00:00 2001 From: Arnaud Weyts Date: Tue, 20 Dec 2016 15:48:52 +0100 Subject: [PATCH 08/30] finished course 8 --- 08 - Fun with HTML5 Canvas/index-MINE.html | 55 +++++++++++++++++++++ 08 - Fun with HTML5 Canvas/index-START.html | 19 ------- 2 files changed, 55 insertions(+), 19 deletions(-) create mode 100644 08 - Fun with HTML5 Canvas/index-MINE.html delete mode 100644 08 - Fun with HTML5 Canvas/index-START.html diff --git a/08 - Fun with HTML5 Canvas/index-MINE.html b/08 - Fun with HTML5 Canvas/index-MINE.html new file mode 100644 index 0000000000..6e913e1b10 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-MINE.html @@ -0,0 +1,55 @@ + + + + + HTML5 Canvas + + + + + + + + diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html deleted file mode 100644 index 37c148df07..0000000000 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - HTML5 Canvas - - - - - - - - - From fb2e47d46ed2a847ce0a576c247b102a0d4e20d5 Mon Sep 17 00:00:00 2001 From: Arnaud Weyts Date: Tue, 20 Dec 2016 16:04:41 +0100 Subject: [PATCH 09/30] finished course 9 --- 08 - Fun with HTML5 Canvas/index-MINE.html | 3 + 09 - Dev Tools Domination/index-MINE.html | 78 ++++++++++++++++++++++ 09 - Dev Tools Domination/index-START.html | 46 ------------- 3 files changed, 81 insertions(+), 46 deletions(-) create mode 100644 09 - Dev Tools Domination/index-MINE.html delete mode 100644 09 - Dev Tools Domination/index-START.html diff --git a/08 - Fun with HTML5 Canvas/index-MINE.html b/08 - Fun with HTML5 Canvas/index-MINE.html index 6e913e1b10..00915b1fd4 100644 --- a/08 - Fun with HTML5 Canvas/index-MINE.html +++ b/08 - Fun with HTML5 Canvas/index-MINE.html @@ -15,6 +15,7 @@ ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.lineWidth = 50; + ctx.global let isDrawing = false; let lastX = 0; @@ -30,8 +31,10 @@ ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); [lastX, lastY] = [e.offsetX, e.offsetY]; + hue++; if(hue >= 360) hue = 0; + if(ctx.lineWidth >= 100 || ctx.lineWidth <= 1) direction = !direction; direction ? ctx.lineWidth++ : ctx.lineWidth--; } diff --git a/09 - Dev Tools Domination/index-MINE.html b/09 - Dev Tools Domination/index-MINE.html new file mode 100644 index 0000000000..f8b800242b --- /dev/null +++ b/09 - Dev Tools Domination/index-MINE.html @@ -0,0 +1,78 @@ + + + + + Console Tricks! + + + +

Γ—BREAKΓ—DOWNΓ—

+ + + + diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html deleted file mode 100644 index 196fffd719..0000000000 --- a/09 - Dev Tools Domination/index-START.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - Console Tricks! - - - -

Γ—BREAKΓ—DOWNΓ—

- - - - From 99fa1ecf2b4ee8d5fb7dbc14fdebfaf92bfee558 Mon Sep 17 00:00:00 2001 From: Arnaud Weyts Date: Wed, 21 Dec 2016 14:12:08 +0100 Subject: [PATCH 10/30] finsihed course 10 --- .../{index-START.html => index-MINE.html} | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) rename 10 - Hold Shift and Check Checkboxes/{index-START.html => index-MINE.html} (80%) diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-MINE.html similarity index 80% rename from 10 - Hold Shift and Check Checkboxes/index-START.html rename to 10 - Hold Shift and Check Checkboxes/index-MINE.html index eb7ed310bb..f547f11708 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-MINE.html @@ -6,7 +6,6 @@