From 39c9238f42f185ba2de04bef3d45d6f71afd121d Mon Sep 17 00:00:00 2001 From: jefrailey Date: Tue, 13 Dec 2016 07:04:10 -0800 Subject: [PATCH 01/44] Add durm kit solution --- 01 - JavaScript Drum Kit/my-index.html | 95 ++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 01 - JavaScript Drum Kit/my-index.html diff --git a/01 - JavaScript Drum Kit/my-index.html b/01 - JavaScript Drum Kit/my-index.html new file mode 100644 index 0000000000..1184b4b946 --- /dev/null +++ b/01 - JavaScript Drum Kit/my-index.html @@ -0,0 +1,95 @@ + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + From 66388e18e46ffd9390b26c1c47cdf8fe2348bb5c Mon Sep 17 00:00:00 2001 From: jefrailey Date: Tue, 13 Dec 2016 07:05:59 -0800 Subject: [PATCH 02/44] Add clock solution --- 02 - JS + CSS Clock/my-index.html | 100 ++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 02 - JS + CSS Clock/my-index.html diff --git a/02 - JS + CSS Clock/my-index.html b/02 - JS + CSS Clock/my-index.html new file mode 100644 index 0000000000..c69954109f --- /dev/null +++ b/02 - JS + CSS Clock/my-index.html @@ -0,0 +1,100 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + From 658c9a0643a802426da7b5a1ccd468bf4783c6b3 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Thu, 22 Dec 2016 07:16:41 -0800 Subject: [PATCH 03/44] Play with CSS variables --- 03 - CSS Variables/my-index.html | 87 ++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 03 - CSS Variables/my-index.html diff --git a/03 - CSS Variables/my-index.html b/03 - CSS Variables/my-index.html new file mode 100644 index 0000000000..7750b567c0 --- /dev/null +++ b/03 - CSS Variables/my-index.html @@ -0,0 +1,87 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + From 050161026e7310f4ab1bd5af36de0c70caa647e6 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Thu, 22 Dec 2016 07:17:03 -0800 Subject: [PATCH 04/44] First pass at Array Cardio 1 --- 04 - Array Cardio Day 1/my-index.html | 97 +++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 04 - Array Cardio Day 1/my-index.html diff --git a/04 - Array Cardio Day 1/my-index.html b/04 - Array Cardio Day 1/my-index.html new file mode 100644 index 0000000000..ac7faf0967 --- /dev/null +++ b/04 - Array Cardio Day 1/my-index.html @@ -0,0 +1,97 @@ + + + + + Array Cardio 💪 + + + + + From b69c88a668d89f812d02701b33b1f6b5ad10a2a9 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Wed, 4 Jan 2017 08:04:53 -0800 Subject: [PATCH 05/44] First pass at Flex Panel Gallery --- 05 - Flex Panel Gallery/my-index.html | 158 ++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 05 - Flex Panel Gallery/my-index.html diff --git a/05 - Flex Panel Gallery/my-index.html b/05 - Flex Panel Gallery/my-index.html new file mode 100644 index 0000000000..28b3d1a2a9 --- /dev/null +++ b/05 - Flex Panel Gallery/my-index.html @@ -0,0 +1,158 @@ + + + + + Flex Panels 💪 + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + From fda4e8d63ab8e32a4cb0143c8690aee825656cfe Mon Sep 17 00:00:00 2001 From: jefrailey Date: Sat, 14 Jan 2017 09:09:02 -0800 Subject: [PATCH 06/44] Completed Type Ahead --- 06 - Type Ahead/my-index.html | 61 +++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 06 - Type Ahead/my-index.html diff --git a/06 - Type Ahead/my-index.html b/06 - Type Ahead/my-index.html new file mode 100644 index 0000000000..efcfe0c892 --- /dev/null +++ b/06 - Type Ahead/my-index.html @@ -0,0 +1,61 @@ + + + + + Type Ahead 👀 + + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + + From 157b1618bf27bec58f22db40e29030c61137ca2c Mon Sep 17 00:00:00 2001 From: jefrailey Date: Sat, 14 Jan 2017 09:50:39 -0800 Subject: [PATCH 07/44] Completed 07 - Array Cardio Day 2 --- 07 - Array Cardio Day 2/my-index.html | 62 +++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 07 - Array Cardio Day 2/my-index.html diff --git a/07 - Array Cardio Day 2/my-index.html b/07 - Array Cardio Day 2/my-index.html new file mode 100644 index 0000000000..b901299de6 --- /dev/null +++ b/07 - Array Cardio Day 2/my-index.html @@ -0,0 +1,62 @@ + + + + + Document + + + + + From b81ff18a1bb666c3eaced9a48e6c18c4d5150a50 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Sat, 14 Jan 2017 10:49:33 -0800 Subject: [PATCH 08/44] Pre-video attempt at 08 - Fun with HTML5 Canvas --- 08 - Fun with HTML5 Canvas/my-index.html | 51 ++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 08 - Fun with HTML5 Canvas/my-index.html diff --git a/08 - Fun with HTML5 Canvas/my-index.html b/08 - Fun with HTML5 Canvas/my-index.html new file mode 100644 index 0000000000..50bed3822e --- /dev/null +++ b/08 - Fun with HTML5 Canvas/my-index.html @@ -0,0 +1,51 @@ + + + + + HTML5 Canvas + + + + + + + + + From 53dfbcff5c5b233469c032cf29f9474d4313298a Mon Sep 17 00:00:00 2001 From: jefrailey Date: Sat, 14 Jan 2017 11:01:09 -0800 Subject: [PATCH 09/44] Use arcTo instead of lineTo; stroke instead of fill --- 08 - Fun with HTML5 Canvas/my-index.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/08 - Fun with HTML5 Canvas/my-index.html b/08 - Fun with HTML5 Canvas/my-index.html index 50bed3822e..e9bea58f60 100644 --- a/08 - Fun with HTML5 Canvas/my-index.html +++ b/08 - Fun with HTML5 Canvas/my-index.html @@ -10,12 +10,18 @@ const canvas = document.querySelector('#draw'); const context = canvas.getContext('2d'); let isMouseDown = false; +let position = {x: 0, y: 0} +function updatePosition(event) { + position.x = event.x; + position.y = event.y; +} function startDrawing(event) { console.log('Start drawing.'); context.beginPath(); isMouseDown = true; + updatePosition(event); } function stopDrawing(event) { @@ -27,8 +33,9 @@ function draw(event) { if (isMouseDown) { console.log(`drawing to (${event.x}, ${event.y})`) - context.lineTo(event.x, event.y); - context.fill() + context.arcTo(position.x, position.y, event.x, event.y, 1); + context.stroke() + updatePosition(event); } } From c8a9e35784be9730b7a123ceff84f852469ecbe5 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Sun, 15 Jan 2017 09:44:38 -0800 Subject: [PATCH 10/44] Remove unused getMousePosition (unused) --- 08 - Fun with HTML5 Canvas/my-index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/08 - Fun with HTML5 Canvas/my-index.html b/08 - Fun with HTML5 Canvas/my-index.html index e9bea58f60..1ca91299ed 100644 --- a/08 - Fun with HTML5 Canvas/my-index.html +++ b/08 - Fun with HTML5 Canvas/my-index.html @@ -39,9 +39,6 @@ } } -function getMousePosition(event) { - return {x: event.movementX, y: event.movementY}; -} canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); From 038329133eee7d256012b62ac1b25cc2840b77a8 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Sun, 15 Jan 2017 09:44:59 -0800 Subject: [PATCH 11/44] Stop drawing on mouse out --- 08 - Fun with HTML5 Canvas/my-index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/08 - Fun with HTML5 Canvas/my-index.html b/08 - Fun with HTML5 Canvas/my-index.html index 1ca91299ed..8e8054d96e 100644 --- a/08 - Fun with HTML5 Canvas/my-index.html +++ b/08 - Fun with HTML5 Canvas/my-index.html @@ -42,7 +42,7 @@ canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); - +canvas.addEventListener('mouseout', stopDrawing); + +
+
+ +

This is an inbox layout.

+
+
+ +

Check one item

+
+
+ +

Hold down your Shift key

+
+
+ +

Check a lower item

+
+
+ +

Everything inbetween should also be set to checked

+
+
+ +

Try do it with out any libraries

+
+
+ +

Just regular JavaScript

+
+
+ +

Good Luck!

+
+
+ +

Don't forget to tweet your result!

+
+
+ + + + From f383a36faaeebb10ace011000deb897f03d7e247 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Mon, 16 Jan 2017 09:39:07 -0800 Subject: [PATCH 15/44] Track last clicked box even if not shift clicked --- 10 - Hold Shift and Check Checkboxes/my-index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/10 - Hold Shift and Check Checkboxes/my-index.html b/10 - Hold Shift and Check Checkboxes/my-index.html index 670378b8d7..e2c4d98cdf 100644 --- a/10 - Hold Shift and Check Checkboxes/my-index.html +++ b/10 - Hold Shift and Check Checkboxes/my-index.html @@ -109,9 +109,8 @@ checkboxes.forEach(checkbox => checkbox.addEventListener('click', bulkCheck)); function bulkCheck(event) { - if (!lastClicked) {lastClicked = this;} + if (!lastClicked || !event.shiftKey) {lastClicked = this; return;} // console.log(event.shiftKey); - if (!event.shiftKey) {return} const lastClickedIdx = checkboxes.indexOf(lastClicked); const currentIdx = checkboxes.indexOf(this); const boxesToCheck = checkboxes.slice( From 437f7ff0dbf38f9aa555d7321f66f2bd6f06974d Mon Sep 17 00:00:00 2001 From: jefrailey Date: Mon, 16 Jan 2017 09:47:00 -0800 Subject: [PATCH 16/44] Don't check in between boxes when un checking --- 10 - Hold Shift and Check Checkboxes/my-index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/10 - Hold Shift and Check Checkboxes/my-index.html b/10 - Hold Shift and Check Checkboxes/my-index.html index e2c4d98cdf..2e36c2307c 100644 --- a/10 - Hold Shift and Check Checkboxes/my-index.html +++ b/10 - Hold Shift and Check Checkboxes/my-index.html @@ -109,6 +109,7 @@ checkboxes.forEach(checkbox => checkbox.addEventListener('click', bulkCheck)); function bulkCheck(event) { + if (!this.checked) {return} if (!lastClicked || !event.shiftKey) {lastClicked = this; return;} // console.log(event.shiftKey); const lastClickedIdx = checkboxes.indexOf(lastClicked); From d516b081bf2d5e535819cbe29fdfd2325c93b732 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Mon, 16 Jan 2017 12:51:43 -0800 Subject: [PATCH 17/44] Pre-video attempt at 11 - Custom Video Player --- 11 - Custom Video Player/my-index.html | 27 ++++++++++++++++++++ 11 - Custom Video Player/my-scripts.js | 35 ++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 11 - Custom Video Player/my-index.html create mode 100644 11 - Custom Video Player/my-scripts.js diff --git a/11 - Custom Video Player/my-index.html b/11 - Custom Video Player/my-index.html new file mode 100644 index 0000000000..67bdad12be --- /dev/null +++ b/11 - Custom Video Player/my-index.html @@ -0,0 +1,27 @@ + + + + + HTML Video Player + + + + +
+ + +
+
+
+
+ + + + + +
+
+ + + + diff --git a/11 - Custom Video Player/my-scripts.js b/11 - Custom Video Player/my-scripts.js new file mode 100644 index 0000000000..182c3a81c5 --- /dev/null +++ b/11 - Custom Video Player/my-scripts.js @@ -0,0 +1,35 @@ +const video = document.querySelector('video'); +const playerControls = document.querySelector('div.player__controls'); +const playButton = playerControls.querySelector('.player__button.toggle'); +const volume = playerControls.querySelector('input[name="volume"]'); +const playbackRate = playerControls.querySelector('input[name="playbackRate"]'); +const skips = playerControls.querySelectorAll('button[data-skip]'); +const totalProgress = playerControls.querySelector('.progress'); +const filled = playerControls.querySelector('.progress__filled'); +filled.style.flexBasis = '0%'; +function togglePlay() { + if (video.paused) {video.play();} + else {video.pause();} +} +function changeRate() { + video.playbackRate = this.value; +} +function changeVolume() { + video.volume = this.value; +} +function skip() { + video.currentTime = video.currentTime + Number(this.dataset.skip); +} +function updateProgress() { + filled.style.flexBasis = `${(video.currentTime / video.duration) * 100}%`; +} +function jumpToPercent(event) { + video.currentTime = (event.offsetX / video.clientWidth) * video.duration; +} +video.addEventListener('click', togglePlay); +video.addEventListener('timeupdate', updateProgress); +playButton.addEventListener('click', togglePlay); +playbackRate.addEventListener('change', changeRate); +volume.addEventListener('change', changeVolume); +skips.forEach(button => button.addEventListener('click', skip)); +totalProgress.addEventListener('click', jumpToPercent); \ No newline at end of file From a841e182e0036218367f82f2552ff6b4cb1c5165 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Mon, 16 Jan 2017 15:25:35 -0800 Subject: [PATCH 18/44] Toggle play/pause icon --- 11 - Custom Video Player/my-scripts.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/11 - Custom Video Player/my-scripts.js b/11 - Custom Video Player/my-scripts.js index 182c3a81c5..7cfb26288b 100644 --- a/11 - Custom Video Player/my-scripts.js +++ b/11 - Custom Video Player/my-scripts.js @@ -26,10 +26,16 @@ function updateProgress() { function jumpToPercent(event) { video.currentTime = (event.offsetX / video.clientWidth) * video.duration; } +function toggleButtonIcon() { + const icon = this.paused ? '►' : '❚ ❚'; + playButton.textContent = icon; +} video.addEventListener('click', togglePlay); video.addEventListener('timeupdate', updateProgress); playButton.addEventListener('click', togglePlay); playbackRate.addEventListener('change', changeRate); volume.addEventListener('change', changeVolume); skips.forEach(button => button.addEventListener('click', skip)); -totalProgress.addEventListener('click', jumpToPercent); \ No newline at end of file +totalProgress.addEventListener('click', jumpToPercent); +video.addEventListener('pause', toggleButtonIcon); +video.addEventListener('play', toggleButtonIcon); From 272dcf93d2b5c6a930177881eb57d5e4c16f3aad Mon Sep 17 00:00:00 2001 From: jefrailey Date: Mon, 16 Jan 2017 15:37:26 -0800 Subject: [PATCH 19/44] Use one function for rate and volume --- 11 - Custom Video Player/my-scripts.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/11 - Custom Video Player/my-scripts.js b/11 - Custom Video Player/my-scripts.js index 7cfb26288b..0d5b167c33 100644 --- a/11 - Custom Video Player/my-scripts.js +++ b/11 - Custom Video Player/my-scripts.js @@ -1,21 +1,17 @@ const video = document.querySelector('video'); const playerControls = document.querySelector('div.player__controls'); const playButton = playerControls.querySelector('.player__button.toggle'); -const volume = playerControls.querySelector('input[name="volume"]'); -const playbackRate = playerControls.querySelector('input[name="playbackRate"]'); const skips = playerControls.querySelectorAll('button[data-skip]'); const totalProgress = playerControls.querySelector('.progress'); const filled = playerControls.querySelector('.progress__filled'); +const ranges = playerControls.querySelectorAll('.player__slider'); filled.style.flexBasis = '0%'; function togglePlay() { if (video.paused) {video.play();} else {video.pause();} } -function changeRate() { - video.playbackRate = this.value; -} -function changeVolume() { - video.volume = this.value; +function handleRangeUpdate() { + video[this.name] = this.value; } function skip() { video.currentTime = video.currentTime + Number(this.dataset.skip); @@ -33,9 +29,8 @@ function toggleButtonIcon() { video.addEventListener('click', togglePlay); video.addEventListener('timeupdate', updateProgress); playButton.addEventListener('click', togglePlay); -playbackRate.addEventListener('change', changeRate); -volume.addEventListener('change', changeVolume); skips.forEach(button => button.addEventListener('click', skip)); totalProgress.addEventListener('click', jumpToPercent); video.addEventListener('pause', toggleButtonIcon); video.addEventListener('play', toggleButtonIcon); +ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); \ No newline at end of file From 1c502bb56d8cfdfea4c33765ae3808565bc971a8 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Tue, 17 Jan 2017 20:01:01 -0800 Subject: [PATCH 20/44] Skeleton for 12 - Key Sequence Detection --- 12 - Key Sequence Detection/my-index.html | 29 +++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 12 - Key Sequence Detection/my-index.html diff --git a/12 - Key Sequence Detection/my-index.html b/12 - Key Sequence Detection/my-index.html new file mode 100644 index 0000000000..61ac1f2dae --- /dev/null +++ b/12 - Key Sequence Detection/my-index.html @@ -0,0 +1,29 @@ + + + + + Key Detection + + + + + + From 65f2f783cba65717f42b3ec50cfaf76fedc485ef Mon Sep 17 00:00:00 2001 From: jefrailey Date: Tue, 17 Jan 2017 20:08:24 -0800 Subject: [PATCH 21/44] Change secret code; use [].join() in comparison --- 12 - Key Sequence Detection/my-index.html | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/12 - Key Sequence Detection/my-index.html b/12 - Key Sequence Detection/my-index.html index 61ac1f2dae..91f30219e0 100644 --- a/12 - Key Sequence Detection/my-index.html +++ b/12 - Key Sequence Detection/my-index.html @@ -7,22 +7,18 @@ From 4bc9c2b24f4134614e9bcc5d23c924d0955f56ee Mon Sep 17 00:00:00 2001 From: jefrailey Date: Sun, 19 Feb 2017 11:05:12 -0800 Subject: [PATCH 22/44] Remove solution to 13/my-index.html --- 13 - Slide in on Scroll/my-index.html | 121 ++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 13 - Slide in on Scroll/my-index.html diff --git a/13 - Slide in on Scroll/my-index.html b/13 - Slide in on Scroll/my-index.html new file mode 100644 index 0000000000..baca58634e --- /dev/null +++ b/13 - Slide in on Scroll/my-index.html @@ -0,0 +1,121 @@ + + + + + Document + + + +
+ +

Slide in on Scroll

+ +

Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.

+

Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Adipisicing elit. Tempore tempora rerum..

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

+ + + +

at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis

+ + +

laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + + +
+ + + + + + + From e716ee3b2492801c24af13f9717a472ce151b84d Mon Sep 17 00:00:00 2001 From: jefrailey Date: Sun, 19 Feb 2017 12:20:28 -0800 Subject: [PATCH 23/44] Finished 13 Slide in on Scroll --- 13 - Slide in on Scroll/my-index.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/13 - Slide in on Scroll/my-index.html b/13 - Slide in on Scroll/my-index.html index baca58634e..5c31e089a1 100644 --- a/13 - Slide in on Scroll/my-index.html +++ b/13 - Slide in on Scroll/my-index.html @@ -58,6 +58,26 @@

Slide in on Scroll

}; } + const images = document.querySelectorAll('.slide-in'); + + function checkSlide(event) { + const windowBottom = window.scrollY + window.innerHeight; + images.forEach(image => { + const imageCenter = (image.height / 2) + image.offsetTop; + const imageBottom = image.height + image.offsetTop; + const scrolledPast = imageBottom < window.scrollY; + const centerVisible = imageCenter < windowBottom; + // Show if > 50% of image is visible + const show = centerVisible && !scrolledPast; + if (show) { + image.classList.add('active'); + } else { + image.classList.remove('active'); + } + }); + } + + window.addEventListener('scroll', debounce(checkSlide)); From 75476848a32e0eb6d3188d073780ba5edd8609c8 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Mon, 20 Feb 2017 16:58:12 -0800 Subject: [PATCH 24/44] Add start file for 14 --- .../my-index.html | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 14 - JavaScript References VS Copying/my-index.html diff --git a/14 - JavaScript References VS Copying/my-index.html b/14 - JavaScript References VS Copying/my-index.html new file mode 100644 index 0000000000..4da1bac2ea --- /dev/null +++ b/14 - JavaScript References VS Copying/my-index.html @@ -0,0 +1,52 @@ + + + + + JS Reference VS Copy + + + + + + + From cee3088b883b1f3703b9586d56bacd20aecca237 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Mon, 20 Feb 2017 17:12:46 -0800 Subject: [PATCH 25/44] Followed along on 14 --- .../my-index.html | 29 +++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/14 - JavaScript References VS Copying/my-index.html b/14 - JavaScript References VS Copying/my-index.html index 4da1bac2ea..71e9f60acb 100644 --- a/14 - JavaScript References VS Copying/my-index.html +++ b/14 - JavaScript References VS Copying/my-index.html @@ -8,16 +8,23 @@ + + + + + From f14abefa86196b1a1e3a607825b79c22bd742498 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Mon, 20 Feb 2017 18:14:45 -0800 Subject: [PATCH 27/44] WIP 15 - LocalStorage Adding an item adds it to local storage. Items are loaded from local storage on page load. Need to figure out why the checkboxes are not working as expected and to add a listener to update the storage when the box is clicked. --- 15 - LocalStorage/my-index.html | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/15 - LocalStorage/my-index.html b/15 - LocalStorage/my-index.html index d444f1d68b..a1be04c8ed 100644 --- a/15 - LocalStorage/my-index.html +++ b/15 - LocalStorage/my-index.html @@ -19,7 +19,7 @@

LOCAL TAPAS

  • Loading Tapas...
-
+
@@ -28,7 +28,26 @@

LOCAL TAPAS

From 388a06d243f04fdc0181cdac7b86ad72061c81d5 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Wed, 22 Feb 2017 18:18:59 -0800 Subject: [PATCH 28/44] Remove addTapas --- 15 - LocalStorage/my-index.html | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/15 - LocalStorage/my-index.html b/15 - LocalStorage/my-index.html index a1be04c8ed..a3ea8269c9 100644 --- a/15 - LocalStorage/my-index.html +++ b/15 - LocalStorage/my-index.html @@ -19,7 +19,7 @@

LOCAL TAPAS

  • Loading Tapas...
-
+
@@ -30,10 +30,6 @@

LOCAL TAPAS

const itemsList = document.querySelector('.plates'); const items = localStorage.items ? JSON.parse(localStorage.items) : []; - function addTapas() { - const name = addItems.querySelector('input[name="item"]').value - items.push({text: name, done: false}); - localStorage.setItem('items', JSON.stringify(items)); } function loadTapas() { From 1aa4473eda329d970af51e20dc7461e050745d32 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Wed, 22 Feb 2017 18:29:00 -0800 Subject: [PATCH 29/44] Rename loadTapas -> listToHTML & add parameters --- 15 - LocalStorage/my-index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/15 - LocalStorage/my-index.html b/15 - LocalStorage/my-index.html index a3ea8269c9..e9fc4d3668 100644 --- a/15 - LocalStorage/my-index.html +++ b/15 - LocalStorage/my-index.html @@ -32,15 +32,15 @@

LOCAL TAPAS

} - function loadTapas() { - const html = items.map((item, index) => { + function listToHTML(list = [], parentElement) { + const html = list.map((item, index) => { const checked = (item.done ? "checked" : ""); return `
  • - - + +
    • `; }).join('') - itemsList.innerHTML = html; + parentElement.innerHTML = html; } document.addEventListener('DOMContentLoaded', loadTapas); From fce0b92aaeeb4e1e4011a866f55b234018b45460 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Wed, 22 Feb 2017 18:30:16 -0800 Subject: [PATCH 30/44] Add, load, and save tapas --- 15 - LocalStorage/my-index.html | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/15 - LocalStorage/my-index.html b/15 - LocalStorage/my-index.html index e9fc4d3668..d28fd68145 100644 --- a/15 - LocalStorage/my-index.html +++ b/15 - LocalStorage/my-index.html @@ -28,8 +28,28 @@

    LOCAL TAPAS

    From 056e74561947da7cf3993ab2fa65f37258301d47 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Wed, 22 Feb 2017 18:58:57 -0800 Subject: [PATCH 31/44] Persist checked items in local stoarge --- 15 - LocalStorage/my-index.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/15 - LocalStorage/my-index.html b/15 - LocalStorage/my-index.html index d28fd68145..b6f0410e27 100644 --- a/15 - LocalStorage/my-index.html +++ b/15 - LocalStorage/my-index.html @@ -63,7 +63,16 @@

    LOCAL TAPAS

    parentElement.innerHTML = html; } + function toggleDone(event) { + if (!event.target.matches('input')) { return; } + const items = JSON.parse(localStorage.getItem('items')); + const index = event.target.getAttribute('data-index') + items[index].done = !items[index].done + localStorage.setItem('items', JSON.stringify(items)) + } + addItems.addEventListener('submit', addItem); + itemsList.addEventListener('click', toggleDone); document.addEventListener('DOMContentLoaded', loadTapas); From 7b805363f674f56180c8dccec4b307a70488075a Mon Sep 17 00:00:00 2001 From: jefrailey Date: Thu, 23 Feb 2017 07:42:21 -0800 Subject: [PATCH 32/44] Add function to clear all tapas plates --- 15 - LocalStorage/my-index.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/15 - LocalStorage/my-index.html b/15 - LocalStorage/my-index.html index b6f0410e27..f122206797 100644 --- a/15 - LocalStorage/my-index.html +++ b/15 - LocalStorage/my-index.html @@ -23,12 +23,14 @@

    LOCAL TAPAS

    + From b54981de33411c282561006a7f9c6469ca6f338b Mon Sep 17 00:00:00 2001 From: jefrailey Date: Mon, 27 Feb 2017 20:34:31 -0800 Subject: [PATCH 33/44] Add check all checkbox --- 15 - LocalStorage/my-index.html | 37 ++++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/15 - LocalStorage/my-index.html b/15 - LocalStorage/my-index.html index f122206797..c8663e67f9 100644 --- a/15 - LocalStorage/my-index.html +++ b/15 - LocalStorage/my-index.html @@ -29,11 +29,11 @@

    LOCAL TAPAS

    + + From b273ebe5a0e6b02bfb2fb17a200b17ba47736304 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Wed, 1 Mar 2017 20:57:38 -0800 Subject: [PATCH 35/44] Remove CSS variables; update all shadows at once --- 16 - Mouse Move Shadow/my-index.html | 44 +++++----------------------- 1 file changed, 8 insertions(+), 36 deletions(-) diff --git a/16 - Mouse Move Shadow/my-index.html b/16 - Mouse Move Shadow/my-index.html index 7ea126baf2..6b935c41dc 100644 --- a/16 - Mouse Move Shadow/my-index.html +++ b/16 - Mouse Move Shadow/my-index.html @@ -12,17 +12,6 @@

    🔥WOAH!

    + + + From e3d3de79ef2ba1db71aa659dfe2d9ba1d311147f Mon Sep 17 00:00:00 2001 From: jefrailey Date: Wed, 8 Mar 2017 20:44:56 -0800 Subject: [PATCH 39/44] Add pre-video attempt at 17 - Sort Without Articles --- 17 - Sort Without Articles/my-index.html | 31 ++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/17 - Sort Without Articles/my-index.html b/17 - Sort Without Articles/my-index.html index cfaf3e0440..5d0baaa68a 100644 --- a/17 - Sort Without Articles/my-index.html +++ b/17 - Sort Without Articles/my-index.html @@ -45,6 +45,37 @@ From 7348056b4b4b199ae8b363b8b8a2d0ddc1388d4d Mon Sep 17 00:00:00 2001 From: jefrailey Date: Thu, 9 Mar 2017 07:40:04 -0800 Subject: [PATCH 40/44] Display sorted bands for 17 --- 17 - Sort Without Articles/my-index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/17 - Sort Without Articles/my-index.html b/17 - Sort Without Articles/my-index.html index 5d0baaa68a..151ad3aa6d 100644 --- a/17 - Sort Without Articles/my-index.html +++ b/17 - Sort Without Articles/my-index.html @@ -46,6 +46,7 @@ const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog']; const articles = ['The', 'A', 'An'] +const bandList = document.querySelector('#bands'); function getFirstWord(phrase) { return phrase.split(' ')[0] @@ -77,6 +78,9 @@ bands.sort(compare); +bandList.innerHTML = bands.map(band => { + return `
  • ${band}
    • ` +}).join(''); From 0ee607ca508c27c4bbd26db62c89cfc9b29a21f1 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Thu, 9 Mar 2017 20:16:35 -0800 Subject: [PATCH 41/44] Add skeleton for 18 Adding Up Times with Reduce --- .../my-index.html | 187 ++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 18 - Adding Up Times with Reduce/my-index.html diff --git a/18 - Adding Up Times with Reduce/my-index.html b/18 - Adding Up Times with Reduce/my-index.html new file mode 100644 index 0000000000..3eaee0f3ef --- /dev/null +++ b/18 - Adding Up Times with Reduce/my-index.html @@ -0,0 +1,187 @@ + + + + + Videos + + +
      +
    • + Video 1 +
      • +
    • + Video 2 +
      • +
    • + Video 3 +
      • +
    • + Video 4 +
      • +
    • + Video 5 +
      • +
    • + Video 6 +
      • +
    • + Video 7 +
      • +
    • + Video 8 +
      • +
    • + Video 9 +
      • +
    • + Video 10 +
      • +
    • + Video 11 +
      • +
    • + Video 12 +
      • +
    • + Video 13 +
      • +
    • + Video 14 +
      • +
    • + Video 15 +
      • +
    • + Video 16 +
      • +
    • + Video 17 +
      • +
    • + Video 18 +
      • +
    • + Video 19 +
      • +
    • + Video 20 +
      • +
    • + Video 21 +
      • +
    • + Video 22 +
      • +
    • + Video 23 +
      • +
    • + Video 24 +
      • +
    • + Video 25 +
      • +
    • + Video 26 +
      • +
    • + Video 27 +
      • +
    • + Video 28 +
      • +
    • + Video 29 +
      • +
    • + Video 30 +
      • +
    • + Video 31 +
      • +
    • + Video 32 +
      • +
    • + Video 33 +
      • +
    • + Video 34 +
      • +
    • + Video 35 +
      • +
    • + Video 36 +
      • +
    • + Video 37 +
      • +
    • + Video 38 +
      • +
    • + Video 39 +
      • +
    • + Video 40 +
      • +
    • + Video 41 +
      • +
    • + Video 42 +
      • +
    • + Video 43 +
      • +
    • + Video 44 +
      • +
    • + Video 45 +
      • +
    • + Video 46 +
      • +
    • + Video 47 +
      • +
    • + Video 48 +
      • +
    • + Video 49 +
      • +
    • + Video 50 +
      • +
    • + Video 51 +
      • +
    • + Video 52 +
      • +
    • + Video 53 +
      • +
    • + Video 54 +
      • +
    • + Video 55 +
      • +
    • + Video 56 +
      • +
    • + Video 57 +
      • +
    • + Video 58 +
      • + + + + From 0ee3639c361d6f2d92adef2ef08ea418c2781982 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Thu, 9 Mar 2017 20:44:47 -0800 Subject: [PATCH 42/44] Pre-video attempt at 18 Adding Up Times w/ Reduce --- .../my-index.html | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/18 - Adding Up Times with Reduce/my-index.html b/18 - Adding Up Times with Reduce/my-index.html index 3eaee0f3ef..40f59e601c 100644 --- a/18 - Adding Up Times with Reduce/my-index.html +++ b/18 - Adding Up Times with Reduce/my-index.html @@ -180,8 +180,33 @@
    • Video 58
      • - +
    + + From 01103a9fd27c9cf4566b227900aa619030a18435 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Thu, 9 Mar 2017 20:56:57 -0800 Subject: [PATCH 43/44] Map parseFloat instead of Number --- 18 - Adding Up Times with Reduce/my-index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/18 - Adding Up Times with Reduce/my-index.html b/18 - Adding Up Times with Reduce/my-index.html index 40f59e601c..23e35faa3f 100644 --- a/18 - Adding Up Times with Reduce/my-index.html +++ b/18 - Adding Up Times with Reduce/my-index.html @@ -188,8 +188,8 @@ function timeStringToSeconds(timeString) { // "5:43" -> 5 * 60 + 43 - const [minutes, seconds] = timeString.split(':'); - return Number(minutes) * 60 + Number(seconds); + const [minutes, seconds] = timeString.split(':').map(parseFloat); + return minutes * 60 + seconds; } function secondsToTimeString(seconds) { From b0fa6fdaff3751ad070507c6371287af870c7680 Mon Sep 17 00:00:00 2001 From: jefrailey Date: Thu, 30 Mar 2017 20:57:41 -0700 Subject: [PATCH 44/44] Start 19 Webcam Fun with getVideo; paintToCanvas --- 19 - Webcam Fun/scripts.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..a8c7e57c21 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,25 @@ 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(err => console.error('Danger Will', err)); +} + +function paintToCanvas() { + const {videoWidth: width, videoHeight: height} = video; + console.log(width, height); + canvas.width = width; + canvas.height = height; + + setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + }, 16); +} \ No newline at end of file