From fd62ffa33a67690b38e297ac3fb0ec1fa90bd500 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Fri, 9 Dec 2016 11:36:10 +0000 Subject: [PATCH 01/28] drumkit 1st try - blind --- 01 - JavaScript Drum Kit/index-START.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..86d57fa521 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,13 @@

From c102671345bce394043db4ead8e92d17debcfe78 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Sat, 10 Dec 2016 18:10:47 +0000 Subject: [PATCH 02/28] day 2 first attempt --- 01 - JavaScript Drum Kit/index-START.html | 7 +++++- 02 - JS + CSS Clock/index-START.html | 28 +++++++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 86d57fa521..f8425f35ee 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,9 +59,14 @@ From 2c9ae693d635d4a26aabc30ff009908ae7d232f2 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Sun, 11 Dec 2016 18:00:13 +0000 Subject: [PATCH 03/28] css vars first attempt --- 03 - CSS Variables/index-START.html | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index bf0f33e3ba..0ab2daf06f 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,10 +21,21 @@

Update CSS Variables with JS

From db4836780a62f94517eb3514ee8a21e2e727bb82 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Mon, 12 Dec 2016 14:28:45 +0000 Subject: [PATCH 04/28] arrays first bash --- 04 - Array Cardio Day 1/index-START.html | 33 ++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 089352c8a6..8ff6a6a7a0 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,28 +27,61 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + console.log('Filter the list of inventors for those who were born in the 1500s') + console.table(inventors.filter(x => x.year >= 1500 && x.year <= 1599)) // Array.prototype.map() // 2. Give us an array of the inventory first and last names + console.log('Give us an array of the inventory first and last names') + console.table(inventors.map(x => { + return {first: x.first, last: x.last} + })) // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + console.log('Sort the inventors by birthdate, oldest to youngest') + console.table(inventors.sort((x, y) => x.year > y.year ? 1 : -1)) // Array.prototype.reduce() // 4. How many years did all the inventors live? + console.log('How many years did all the inventors live?') + console.log(inventors.reduce((acc, current) => { + return acc + (current.passed - current.year) + }, 0)) // 5. Sort the inventors by years lived + console.log('Sort the inventors by years lived') + console.table(inventors.sort((x, y) => (x.passed - x.year) < (y.passed -y.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 boulevards = ["Boulevards of Paris","City walls of Paris","Thiers wall","Wall of Charles V","Wall of Philip II Augustus","City gates of Paris","Haussmann's renovation of Paris","Boulevards of the Marshals","Boulevard Auguste-Blanqui","Boulevard Barbès","Boulevard Beaumarchais","Boulevard de l'Amiral-Bruix","Boulevard de Strasbourg","Boulevard des Capucines","Boulevard de la Chapelle","Boulevard de Clichy","Boulevard du Crime","Boulevard Haussmann","Boulevard de l'Hôpital","Boulevard des Italiens","Boulevard de la Madeleine","Boulevard de Magenta","Boulevard Montmartre","Boulevard du Montparnasse","Boulevard Raspail","Boulevard Richard-Lenoir","Boulevard de Rochechouart","Boulevard Saint-Germain","Boulevard Saint-Michel","Boulevard de Sébastopol","Boulevard du Temple","Boulevard Voltaire","Boulevard de la Zone"] + console.log('create a list of Boulevards in Paris that contain de anywhere in the name') + console.table(boulevards.filter(x => x.includes('de'))) + // 7. sort Exercise // Sort the people alphabetically by last name + console.log('Sort the people alphabetically by last name') + console.table(people.sort((x, y) => { + return x.split(', ')[0] > y.split(', ')[0] ? 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' ]; + console.log('Sum up the instances of each of these') + console.table( + data.reduce((acc, current, index, all) => { + if (acc[current]) { + acc[current] = acc[current] + 1 + } else { + acc[current] = 1 + } + return acc + }, {}) + ) From 8e1e7e6db10898a2e7b9da5d06a84dec51eaa08a Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Mon, 12 Dec 2016 17:33:54 +0000 Subject: [PATCH 05/28] first crack at flex panel gallery --- 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 e1d643ad5c..4364be33b5 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; + display: flex; + flex: 1; + justify-content: center; + align-items: center; + flex-direction: column; } @@ -54,8 +60,17 @@ margin:0; width: 100%; transition:transform 0.5s; + display: flex; + flex: 1 0 auto; + 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; @@ -68,6 +83,7 @@ .panel.open { font-size:40px; + flex: 5; } .cta { @@ -107,7 +123,20 @@ From b17b9326837dac9af7b31261898d294d8d659622 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Mon, 12 Dec 2016 17:44:59 +0000 Subject: [PATCH 06/28] WIP fetch cities --- 06 - Type Ahead/index-START.html | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..1f1897b104 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -14,9 +14,14 @@

or a state

- + From 477540d1b259b12c92cf13548cfbaa403b4dd322 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Tue, 13 Dec 2016 10:57:58 +0000 Subject: [PATCH 07/28] filter list working --- 06 - Type Ahead/index-START.html | 39 ++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1f1897b104..fa8e9a6b28 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -18,6 +18,45 @@ From 4fd3c67b2da36e4c3db711fae26f97d7189d6769 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Wed, 14 Dec 2016 13:47:04 +0000 Subject: [PATCH 09/28] Fun with canvas --- 08 - Fun with HTML5 Canvas/index-START.html | 42 +++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..46c7fcabc6 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,48 @@

From cd33b41466b4e485a25e8459b7842e6e85fc7585 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Thu, 22 Dec 2016 11:27:36 +0000 Subject: [PATCH 19/28] sorting using a regex --- 17 - Sort Without Articles/index-START.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index cfaf3e0440..c8784f2e29 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -43,8 +43,24 @@

From a0c83c30aa61096596bd56c5bc8bd1b870dd2b24 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Thu, 22 Dec 2016 11:32:39 +0000 Subject: [PATCH 20/28] clean up sort code --- 17 - Sort Without Articles/index-START.html | 20 ++++---------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index c8784f2e29..61063a5910 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -44,23 +44,11 @@ From 90f14d0a5177e4d6b5dd31670c9933c3a2ec3350 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Thu, 22 Dec 2016 11:59:23 +0000 Subject: [PATCH 21/28] reduce time --- 17 - Sort Without Articles/index-START.html | 2 -- .../index-START.html | 22 ++++++++++++++++++- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index 61063a5910..430efc8ee9 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -47,9 +47,7 @@ const clean = (text) => text.replace(/a |the |an /gi, '') const sortedBands = bands.sort((a,b) => clean(a) > clean(b) ? 1 : -1) const list = sortedBands.map(band => `

${band}

`).join('') - document.querySelector('#bands').innerHTML = list - diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index 3eaee0f3ef..7a930673a9 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -1,4 +1,4 @@ - + @@ -182,6 +182,26 @@ From 29de0e04a1a3197ff0f930162517a824bec96a69 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Fri, 30 Dec 2016 20:16:52 +0000 Subject: [PATCH 22/28] webcam --- 19 - Webcam Fun/index.html | 4 +- 19 - Webcam Fun/scripts.js | 89 +++++++++++++++++++++++++++++++++++--- 2 files changed, 86 insertions(+), 7 deletions(-) diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..a2c66ca55a 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -10,7 +10,7 @@

- +

diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..120225b98f 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -1,5 +1,84 @@ -const video = document.querySelector('.player'); -const canvas = document.querySelector('.photo'); -const ctx = canvas.getContext('2d'); -const strip = document.querySelector('.strip'); -const snap = document.querySelector('.snap'); +const video = document.querySelector('.player') +const canvas = document.querySelector('.photo') +const ctx = canvas.getContext('2d') +const strip = document.querySelector('.strip') +const snap = document.querySelector('.snap') + +function getVideo () { + navigator.mediaDevices.getUserMedia({video: true, audio: false}) + .then(stream => { + video.src = window.URL.createObjectURL(stream) + video.play() + }) + .catch(error => { + console.error(error) + }) +} + +function paintCanvas () { + canvas.width = video.videoWidth + canvas.height = video.videoHeight + + return setInterval(() => { + ctx.drawImage(video, 0, 0) + + let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height) + // pixels = rgbSplit(pixels) + // pixels = redEffect(pixels) + // pixels = greenScreen(pixels) + ctx.putImageData(pixels, 0, 0) + }, 16) +} + +function takePhoto () { + snap.currentTime = 0 + snap.play() + const photo = canvas.toDataURL('image/jpeg') + const link = document.createElement('a') + link.href = photo + link.setAttribute('download', 'heygoodlooking') + link.innerHTML = `

` + strip.insertBefore(link, strip.firstChild) +} + +function redEffect (pixels) { + for (let i = 0; i < pixels.data.length; i = i + 4) { + pixels.data[i + 0] = pixels.data[i + 0] + 100 + pixels.data[i + 1] = pixels.data[i + 1] - 50 + pixels.data[i + 2] = pixels.data[i + 2] * 0.5 + } + return pixels +} + +function rgbSplit (pixels) { + for (let i = 0; i < pixels.data.length; i = i + 4) { + pixels.data[i - 150] = pixels.data[i + 0] + pixels.data[i + 100] = pixels.data[i + 1] + pixels.data[i + 150] = pixels.data[i + 2] + } + return pixels +} + +function greenScreen (pixels) { + const levels = {} + + document.querySelectorAll('.rgb input').forEach((input) => { + levels[input.name] = input.value + }) + + for (let i = 0; i < pixels.data.length; i = i + 4) { + let red = pixels.data[i + 0] + let green = pixels.data[i + 1] + let blue = pixels.data[i + 2] + + if (red >= levels.rmin && green >= levels.gmin && blue >= levels.bmin && red <= levels.rmax && green <= levels.gmax && blue <= levels.bmax) { + // take it out! + pixels.data[i + 3] = 0 + } + } + + return pixels +} +getVideo() + +video.addEventListener('canplay', paintCanvas) From 0c851cfd67e829c0723a0da7f9e2eaa6eda1ff76 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Wed, 4 Jan 2017 12:00:33 +0000 Subject: [PATCH 23/28] speech --- 20 - Speech Detection/index-START.html | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html index d3395cca35..7bd478af06 100644 --- a/20 - Speech Detection/index-START.html +++ b/20 - Speech Detection/index-START.html @@ -10,9 +10,30 @@ From 48e2a15208c13ce89dcd868b88a086d4c46ba60e Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Wed, 4 Jan 2017 12:58:48 +0000 Subject: [PATCH 24/28] geo-location --- 21 - Geolocation/index-START.html | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html index d794c144ba..6906d368bb 100644 --- a/21 - Geolocation/index-START.html +++ b/21 - Geolocation/index-START.html @@ -57,18 +57,14 @@

/Compass: https://thenounproject.com/search/?q=compass&i=592352/ From a410621ade68c7c378c822dea46419204f3015d0 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Wed, 4 Jan 2017 18:45:01 +0000 Subject: [PATCH 25/28] speech --- .../index-START.html | 14 +++++- 23 - Speech Synthesis/index-START.html | 44 ++++++++++++++++--- 2 files changed, 51 insertions(+), 7 deletions(-) diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html index 8476112b5e..bcfbe90b8f 100644 --- a/22 - Follow Along Link Highlighter/index-START.html +++ b/22 - Follow Along Link Highlighter/index-START.html @@ -26,7 +26,19 @@ diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html index e890008d36..c7baf5ddd7 100644 --- a/23 - Speech Synthesis/index-START.html +++ b/23 - Speech Synthesis/index-START.html @@ -29,12 +29,44 @@
The Voiceinator 5000
From dacc2fe21092be5ac2d14b341256876301dc83fc Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Sat, 7 Jan 2017 16:33:38 +0000 Subject: [PATCH 26/28] sticky nav --- 24 - Sticky Nav/index-START.html | 15 ++++++++++++++- 24 - Sticky Nav/style-START.css | 13 +++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html index e7bc67e9a5..1dee90169b 100644 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index-START.html @@ -54,7 +54,20 @@
A story about getting lost.
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index c6d59a31b3..7556c7e26e 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -84,3 +84,16 @@ nav a { transition:all 0.2s; text-transform: uppercase; } + +.fixed-nav nav { + position: fixed; + box-shadow: 0 5px rgba(0,0,0,0.1) +} + +.fixed-nav li.logo { + max-width: 500px +} + +body.fixed-nav .site-wrap { + transform: scale(1); +} From 25ada332b794416265fae96bbca3876fbba49c83 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Sat, 7 Jan 2017 22:00:34 +0000 Subject: [PATCH 27/28] strip menu --- .../index-START.html | 8 +++++ 26 - Stripe Follow Along Nav/index-START.html | 31 +++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html index 98f5e070c4..62d62c7d73 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html @@ -39,6 +39,14 @@ diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html index 9780d0d1ac..6e1acbf090 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -208,6 +208,37 @@
Cool
From fdbcad38f0f1884d17cf60b1ac2c8269001c1c02 Mon Sep 17 00:00:00 2001 From: Justin Ramel Date: Fri, 20 Jan 2017 13:35:14 +0000 Subject: [PATCH 28/28] events and drag --- 27 - Click and Drag/index-START.html | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..e5b71be6ec 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -35,6 +35,33 @@