Update CSS Variables with JS

Date: Sun, 11 Dec 2016 10:53:54 -0500 Subject: [PATCH 07/41] Add CSS variables and controls for rounded corners and grayscale --- 03 - CSS Variables/index-START.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 302ce50106..a7f3e495d4 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -16,6 +16,13 @@

Update CSS Variables with JS

Base Color + +
+ Rounded Corners + + + Grayscale +

@@ -26,12 +33,17 @@

Update CSS Variables with JS

--base: #ffc600; --spacing: 10px; --blur: 10px; + --rounded-corners: 0px; + --grayscale: 0%; } img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); + border-radius: var(--rounded-corners); + -webkit-filter: grayscale(var(--grayscale)); + filter: grayscale(var(--grayscale)); } .hl { @@ -74,7 +86,6 @@

Update CSS Variables with JS

${cityName}, ${stateName} ${population}

` - }); + }) suggestions.innerHTML = html; } From a7716fe7a58a67b5c927aed673fcf5435e7d8d4b Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Thu, 15 Dec 2016 08:07:07 -0500 Subject: [PATCH 12/41] Complete array functions --- 07 - Array Cardio Day 2/index-START.html | 41 +++++++++++++++++++++--- 1 file changed, 36 insertions(+), 5 deletions(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index bdf6c44415..38a0d223fb 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -25,6 +25,20 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + // const isAdult = people.some(person => { + // const currentYear = (new Date()).getFullYear(); + // if(currentYear - person.year >= 19) { + // return true; + // } + // }) + + const isAdult = people.some(person => { + let currentYear = (new Date()).getFullYear(); + return currentYear - person.year >= 19; + }) + + console.log({isAdult}); + // const isAdult = people.some(function(person) { // const currentYear = (new Date()).getFullYear(); // if(currentYear - person.year >= 19) { @@ -32,36 +46,53 @@ // } // }); - const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); + // const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); - console.log({isAdult}); + // console.log({isAdult}); // Array.prototype.every() // is everyone 19? - const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); + const allAdults = people.every(person => { + let currentYear = (new Date()).getFullYear(); + return currentYear - person.year >= 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 + ) + ) - const comment = comments.find(comment => comment.id === 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 index = comments.findIndex(comment => comment.id === 823423); + console.log(index); - // comments.splice(index, 1); + comments.splice(index, 1); + // console.table(comments) const newComments = [ ...comments.slice(0, index), ...comments.slice(index + 1) ]; + console.table(newComments); + + From e6b630581fdf8c40b6056430af2e13fa472e1172 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Fri, 16 Dec 2016 09:42:57 -0500 Subject: [PATCH 13/41] Add drawing tool to canvas --- 08 - Fun with HTML5 Canvas/index-START.html | 51 +++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..6e9aaf14dd 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,57 @@

From 2d65e5b9b32b29ade19d133eef5a1a2973058dd0 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Sun, 25 Dec 2016 11:06:22 -0500 Subject: [PATCH 25/41] Sort band names and put them in a list --- 17 - Sort Without Articles/index-START.html | 23 +++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index cfaf3e0440..0065bd97cb 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -44,7 +44,30 @@ From 1aeb404cde75be6d1aa12459cbbf6963a3aeb8cf Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Mon, 26 Dec 2016 06:21:38 -0600 Subject: [PATCH 26/41] Add function to get total time of all videos --- .../index-START.html | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index 3eaee0f3ef..060819798e 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -182,6 +182,36 @@ From f0cb06a6b1b8f5b47ae4fe667b0f0fefef72388a Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Tue, 27 Dec 2016 15:26:31 -0600 Subject: [PATCH 27/41] Add functions to display filters --- 19 - Webcam Fun/index.html | 4 +- 19 - Webcam Fun/scripts.js | 86 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 88 insertions(+), 2 deletions(-) diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..cb2d1b18a4 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..30ee5d9d40 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,89 @@ 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(localMediaStream => { + video.src = window.URL.createObjectURL(localMediaStream); + video.play() + }).catch(error => { + console.error(`Error!`, error); + }) +} + +function paintToCanvas() { + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + // take pixels out + let pixels = ctx.getImageData(0, 0, width, height); + // pixels = redEffect(pixels); + // pixels = rgbSplit(pixels); + // ctx.globalAlpha = 0.8; + pixels = greenScreen(pixels); + ctx.putImageData(pixels, 0, 0); + }, 16); +} + +function takePhoto() { + // sound + snap.currentTime = 0; + snap.play(); + // take data out of canvas + const data = canvas.toDataURL('image/jpeg'); + const link = document.createElement('a'); + link.href = data; + link.setAttribute('download', 'hello'); + link.innerHTML = ` hello

`; + strip.insertBefore(link, strip.firstChild); +} + +function redEffect(pixels) { + for(let i = 0; i < pixels.data.length; i+=4) { + pixels.data[i] = pixels.data[i] + 100 // red + pixels.data[i+1] = pixels.data[i + 1] - 50 // green + pixels.data[i+2] = pixels.data[i + 2] * 0.4 // blue + } + return pixels; +} + +function rgbSplit(pixels) { + for(let i = 0; i < pixels.data.length; i+=4) { + pixels.data[i - 150] = pixels.data[i] // red + pixels.data[i + 100] = pixels.data[i + 1] // green + pixels.data[i - 150] = pixels.data[i + 2] // blue + } + return pixels; +} + +function greenScreen(pixels) { + const levels = {}; + document.querySelectorAll('.rgb input').forEach(input => { + levels[input.name] = input.value; + }); + + for(i=0; i< pixels.data.length; i+=4) { + red = pixels.data[i]; + green = pixels.data[i + 1]; + blue = pixels.data[i + 2]; + alpha = pixels.data[i + 3]; + if (red >= levels.rmin + && green >= levels.gmin + && blue >= levels.bmin + && red <= levels.rmax + && green <= levels.gmax + && blue <= levels.bmax) { + pixels.data[i + 3] = 0; + } + } +} + +getVideo(); + +video.addEventListener('canplay', paintToCanvas); \ No newline at end of file From 06da2b548a133a4ca4082930c62277b3ccf08cb3 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Tue, 27 Dec 2016 16:41:23 -0600 Subject: [PATCH 28/41] Add buttons to toggle filters --- 19 - Webcam Fun/index.html | 7 +++++-- 19 - Webcam Fun/scripts.js | 34 ++++++++++++++++++++++++++++++---- 2 files changed, 35 insertions(+), 6 deletions(-) diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index cb2d1b18a4..65a3758e35 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -10,7 +10,10 @@

+ + + +

diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 30ee5d9d40..5c626bf01e 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -4,6 +4,10 @@ const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); +let redFilterOn = false; +let rgbSplitFilterOn = false; +let blurFilterOn = false; + function getVideo() { navigator.mediaDevices.getUserMedia({ video: true, @@ -25,10 +29,16 @@ function paintToCanvas() { ctx.drawImage(video, 0, 0, width, height); // take pixels out let pixels = ctx.getImageData(0, 0, width, height); - // pixels = redEffect(pixels); - // pixels = rgbSplit(pixels); - // ctx.globalAlpha = 0.8; - pixels = greenScreen(pixels); + if(redFilterOn) { + pixels = redEffect(pixels); + } + if(rgbSplitFilterOn) { + pixels = rgbSplit(pixels); + } + if(blurFilterOn) { + ctx.globalAlpha = 0.1; + } + // pixels = greenScreen(pixels); ctx.putImageData(pixels, 0, 0); }, 16); } @@ -85,6 +95,22 @@ function greenScreen(pixels) { } } } +function toggleRedFilter() { + redFilterOn = !redFilterOn; + console.log(redFilterOn); + getVideo(); +} +function toggleRGBSplitFilter() { + rgbSplitFilterOn = !rgbSplitFilterOn; + console.log(rgbSplitFilterOn); + getVideo(); +} + +function toggleBlurFilter() { + blurFilterOn = !blurFilterOn + console.log(blurFilterOn); + getVideo(); +} getVideo(); From ab47ba651c78080b389829eb557c6890148b0696 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Wed, 28 Dec 2016 23:31:08 -0600 Subject: [PATCH 29/41] Add speech recognition --- 20 - Speech Detection/index-START.html | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html index d3395cca35..f08ad4264a 100644 --- a/20 - Speech Detection/index-START.html +++ b/20 - Speech Detection/index-START.html @@ -12,6 +12,32 @@ From bbdf8aba5a2e2f493431a789e370b40a26988890 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Thu, 29 Dec 2016 10:59:10 -0600 Subject: [PATCH 30/41] Add event listener to update direction and speed --- 21 - Geolocation/index-START.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html index a1b981b1cd..5a11a99067 100644 --- a/21 - Geolocation/index-START.html +++ b/21 - Geolocation/index-START.html @@ -57,6 +57,16 @@

/Compass: https://thenounproject.com/search/?q=compass&i=592352/ From 82a7c8ff437acf96842bbe25d49be6cddff0e129 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Fri, 30 Dec 2016 10:56:37 -0600 Subject: [PATCH 31/41] Add dynamic link highlighting --- .../index-START.html | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html index 8476112b5e..a0c321a3fb 100644 --- a/22 - Follow Along Link Highlighter/index-START.html +++ b/22 - Follow Along Link Highlighter/index-START.html @@ -26,7 +26,27 @@

From 02258b5c29ae41ab9a297f6d00ecf44580b23fdb Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Sat, 31 Dec 2016 08:00:47 -0600 Subject: [PATCH 32/41] Add speech synthesizer to page --- 23 - Speech Synthesis/index-START.html | 36 ++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html index e890008d36..59ced7b71b 100644 --- a/23 - Speech Synthesis/index-START.html +++ b/23 - Speech Synthesis/index-START.html @@ -35,6 +35,42 @@

The Voiceinator 5000

A story about getting lost.

diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index c6d59a31b3..a2e10b9e33 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -23,6 +23,10 @@ body { transition: transform 0.5s; } +.fixed-nav .site-wrap { + transform: scale(1); +} + header { text-align: center; height:50vh; @@ -48,6 +52,11 @@ nav { z-index: 1; } +.fixed-nav nav { + position: fixed; + box-shadow: 0 5px rgba(0,0,0,0.1) +} + nav ul { margin: 0; padding:0; @@ -67,11 +76,16 @@ li.logo { max-width:0; overflow: hidden; background: white; - transition: all .5s; + transition: all 1s; font-weight: 600; font-size: 30px; } +.fixed-nav li.logo { + /*cannot animate a 0 to auto width*/ + max-width: 500px; +} + li.logo a { color:black; } From 8d5eca94f043b3a3781a3f613611903ca7bf9eeb Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Mon, 2 Jan 2017 17:35:34 -0500 Subject: [PATCH 34/41] Add motes on event capturing, propagation and once option --- .../index-START.html | 20 +++++++++++++++++++ 1 file changed, 20 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..469c7d63ff 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,26 @@ From d9c3824271ea8b9fedbb9d1a40ec464c3a3d71b3 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Tue, 3 Jan 2017 09:41:04 -0500 Subject: [PATCH 35/41] Make dropdown menu follow mouse --- 26 - Stripe Follow Along Nav/index-START.html | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html index 9780d0d1ac..a46611e61d 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -208,6 +208,42 @@

Cool

From fa2ee6a6b2384eb3b7d8bf6d5d4058e7b0a11c85 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Wed, 4 Jan 2017 14:55:05 -0500 Subject: [PATCH 36/41] Add clicking and dragging slider --- 27 - Click and Drag/index-START.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..67aeceabfd 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -35,6 +35,34 @@ From 791b64ae0ca988b907a76114dd4164e96ebc213b Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Thu, 5 Jan 2017 10:35:59 -0500 Subject: [PATCH 37/41] Have video playback dependent on speed bar --- 28 - Video Speed Controller/index-START.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html index c4cbd4259a..0d464595fc 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index-START.html @@ -15,6 +15,25 @@ From 9829fb5adaf190fde0307b9fb495860f327ad357 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Thu, 5 Jan 2017 10:39:23 -0500 Subject: [PATCH 38/41] Have speed bar only work when pressed --- 28 - Video Speed Controller/index-START.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html index 0d464595fc..358b458256 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index-START.html @@ -19,8 +19,10 @@ const speed = document.querySelector('.speed'); const bar = speed.querySelector('.speed-bar'); const video = document.querySelector('.flex'); +let isPressed = false function handleMousemove(e) { + if(!isPressed) return; const y = e.pageY - this.offsetTop; const percent = y / this.offsetHeight; const min = 0.5; @@ -32,6 +34,16 @@ video.playbackRate = playbackRate; } +function handleMousedown() { + isPressed = true; +} + +function handleMouseup() { + isPressed = false; +} + +speed.addEventListener('mousedown', handleMousedown); +speed.addEventListener('mouseup', handleMouseup); speed.addEventListener('mousemove', handleMousemove); From 748e75c9e615126aa5143c0a158cb3b16371af61 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Fri, 6 Jan 2017 09:47:27 -0500 Subject: [PATCH 39/41] Add timer to page --- 29 - Countdown Timer/scripts-START.js | 50 +++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index e69de29bb2..54d1cedcac 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,50 @@ +let countdown; +const timerDisplay = document.querySelector('.display__time-left'); +const endTime = document.querySelector('.display__end-time'); +const buttons = document.querySelectorAll('[data-time]'); + +function timer(seconds) { + clearInterval(countdown); + const now = Date.now(); + const then = now + seconds * 1000; + displayTimeLeft(seconds) + displayEndTime(then); + + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); + if(secondsLeft < 0) { + clearInterval(countdown); + return; + } + displayTimeLeft(secondsLeft); + }, 1000); +} + +function displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); + const remainderSeconds = seconds % 60; + const display = `${minutes}:${remainderSeconds<10 ? '0' : ''}${remainderSeconds}`; + timerDisplay.textContent = display; + document.title = display; +} + +function displayEndTime(timestamp) { + const end = new Date(timestamp); + const hour = end.getHours(); + // hour > 12 ? hour - 12 : hour (to get the 12 hour time) + const minutes = end.getMinutes(); + endTime.textContent = `Be back at ${hour}:${minutes<10 ? '0' : ''}${minutes}`; +} + +function startTimer() { + const seconds = parseInt(this.dataset.time); + timer(seconds); +} + +buttons.forEach(button => button.addEventListener('click', startTimer)) +document.customForm.addEventListener('submit', function(event) { + event.preventDefault(); + const mins = this.minutes.value; + timer(mins * 60); + this.reset(); +}) \ No newline at end of file From 2389c38b7ae0408f18f6c9587cbcd90adeaaeb3d Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Fri, 6 Jan 2017 09:49:29 -0500 Subject: [PATCH 40/41] Show that time is up --- 29 - Countdown Timer/scripts-START.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index 54d1cedcac..1c13f6545a 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -14,6 +14,7 @@ function timer(seconds) { const secondsLeft = Math.round((then - Date.now()) / 1000); if(secondsLeft < 0) { clearInterval(countdown); + showTimeUp(); return; } displayTimeLeft(secondsLeft); @@ -47,4 +48,8 @@ document.customForm.addEventListener('submit', function(event) { const mins = this.minutes.value; timer(mins * 60); this.reset(); -}) \ No newline at end of file +}) + +function showTimeUp() { + timerDisplay.textContent = 'TIME UP'; +} \ No newline at end of file From be9204fa48f3022b3a1ecfd6af04d32ada5db1f4 Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Sat, 7 Jan 2017 12:58:39 -0500 Subject: [PATCH 41/41] Make whack a mole game --- 30 - Whack A Mole/index-START.html | 45 ++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..d146eedd55 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -36,6 +36,51 @@

Whack-a-mole! 0