From 7b5567e52af4b1c4f549337b819dc00b9ab0f293 Mon Sep 17 00:00:00 2001 From: Rob Andrews Date: Tue, 13 Dec 2016 09:47:07 -0500 Subject: [PATCH 01/12] Adds Day 1 Finished Code. --- 01 - JavaScript Drum Kit/index-START.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..964d7ab10e 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,30 @@ From 5c5bce86ecbb122da1fe308e73d5499d575866e8 Mon Sep 17 00:00:00 2001 From: Rob Andrews Date: Fri, 16 Dec 2016 10:38:44 -0500 Subject: [PATCH 02/12] Adds Day 2 finished code. --- 02 - JS + CSS Clock/index-START.html | 53 ++++++++++++++++++++-------- 1 file changed, 39 insertions(+), 14 deletions(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..be09e9cbf5 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -6,7 +6,6 @@ -
@@ -18,17 +17,17 @@ From e51bd7cf4966e2c2fd25d104a53bedf5ebcb68b1 Mon Sep 17 00:00:00 2001 From: Rob Andrews Date: Fri, 16 Dec 2016 11:10:17 -0500 Subject: [PATCH 03/12] Adds Day 3 Finished Code. --- 03 - CSS Variables/index-START.html | 30 +++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..0e7ad3f863 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -9,7 +9,7 @@

Update CSS Variables with JS

- + @@ -21,6 +21,21 @@

Update CSS Variables with JS

From b04182cf810f286e866f6465233b9d675b2ed9a3 Mon Sep 17 00:00:00 2001 From: Rob Andrews Date: Mon, 19 Dec 2016 10:54:52 -0500 Subject: [PATCH 04/12] Adds Day 4 Finished Code. --- 04 - Array Cardio Day 1/index-START.html | 28 ++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..d9767ce0f0 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,29 +33,53 @@ // 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 < 1600); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sortedByBirthDate = inventors.sort((a, b) => a.year > b.year ? 1 : -1); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0); // 5. Sort the inventors by years lived + const oldest = inventors.sort((a, b) => { + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -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 - + // Note: Run this code below on the wikipedia page... + // 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; + }); // 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((result, vehicle) => { + result[vehicle] = result[vehicle] || 0; + result[vehicle] += 1; + return result; + }, {}); + console.log(transportation); From 4e2cdb864b17a786843cf8e6758b088c8babe755 Mon Sep 17 00:00:00 2001 From: Rob Andrews Date: Tue, 20 Dec 2016 15:36:15 -0500 Subject: [PATCH 05/12] Adds Day 5 Finished Code. --- 05 - Flex Panel Gallery/index-START.html | 58 +++++++++++++++++------- 1 file changed, 42 insertions(+), 16 deletions(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..0af0b3cb70 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -9,8 +9,8 @@ From b74d6f3b5bc6802a3b32e8e96f39f5527f627161 Mon Sep 17 00:00:00 2001 From: Rob Andrews Date: Wed, 11 Jan 2017 10:13:27 -0500 Subject: [PATCH 09/12] Adds finished code day 10. --- .../index-START.html | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index eb7ed310bb..9cdefcbc37 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -104,6 +104,28 @@
From 6ff8618927df6503fb2a32299336563ae23a0287 Mon Sep 17 00:00:00 2001 From: Rob Andrews Date: Fri, 13 Jan 2017 15:41:35 -0500 Subject: [PATCH 10/12] Adds Day 11 Finished Code. --- 11 - Custom Video Player/index.html | 1 + 11 - Custom Video Player/scripts-FINISHED.js | 1 - 11 - Custom Video Player/scripts.js | 59 ++++++++++++++++++++ 11 - Custom Video Player/style.css | 13 +++++ 4 files changed, 73 insertions(+), 1 deletion(-) diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html index fe2b55b394..a706bb4ac1 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -19,6 +19,7 @@ +
diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11 - Custom Video Player/scripts-FINISHED.js index cedacf2f68..5cd60638cb 100644 --- a/11 - Custom Video Player/scripts-FINISHED.js +++ b/11 - Custom Video Player/scripts-FINISHED.js @@ -15,7 +15,6 @@ function togglePlay() { function updateButton() { const icon = this.paused ? '►' : '❚ ❚'; - console.log(icon); toggle.textContent = icon; } diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..16a8f933e9 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,59 @@ +/* Get Our Elements */ +const player = document.querySelector('.player'); +const video = player.querySelector('.viewer'); +const progress = player.querySelector('.progress'); +const progressBar = player.querySelector('.progress__filled'); +const toggle = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]'); +const ranges = player.querySelectorAll('.player__slider'); +const fullscreen = player.querySelector('.fullscreen'); + +/* Build out functions */ +function togglePlay() { + const method = video.paused ? 'play' : 'pause'; + video[method](); +} + +function updateButton() { + const icon = this.paused ? '►' : '❚ ❚'; + toggle.textContent = icon; +} + +function skip() { + video.currentTime += parseFloat(this.dataset.skip); +} + +function handleRangeUpdate() { + video[this.name] = this.value; +} + +function handleProgress() { + const percent = (video.currentTime / video.duration) * 100; + progressBar.style.flexBasis = `${percent}%`; +} + +function scrub(e) { + const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; + video.currentTime = scrubTime; +} + +function toggleFullScreen() { + player.classList.toggle('player--fullscreen'); +} + +/* Hook up event listeners */ +video.addEventListener('click', togglePlay); +toggle.addEventListener('click', togglePlay); +video.addEventListener('play', updateButton); +video.addEventListener('pause', updateButton); +video.addEventListener('timeupdate', handleProgress); +skipButtons.forEach(button => button.addEventListener('click', skip)); +ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); +ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); + +let mousedown = false; +progress.addEventListener('click', scrub); +progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); +progress.addEventListener('mousedown', () => mousedown = true); +progress.addEventListener('mouseup', () => mousedown = false); +fullscreen.addEventListener('click', toggleFullScreen); diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index c07581c1c0..0b080832db 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -26,6 +26,19 @@ body { overflow: hidden; } +.player--fullscreen { + position: absolute; + width: 100%; + max-width: 100%; + left: 0; + right: 0; + top: 0; + bottom: 0; + border: none; + box-shadow: none; + transition: 200ms all ease-in; +} + .player__video { width: 100%; } From f6fcc65c845c1c9b10834f6d3cd82289e040be1c Mon Sep 17 00:00:00 2001 From: Rob Andrews Date: Fri, 13 Jan 2017 16:03:25 -0500 Subject: [PATCH 11/12] Adds Day 12 Finished Code. --- 12 - Key Sequence Detection/index-START.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html index 8cab786140..f5089db2de 100644 --- a/12 - Key Sequence Detection/index-START.html +++ b/12 - Key Sequence Detection/index-START.html @@ -7,6 +7,16 @@ From 08f2e4b16d9a544ba1cd19b0f5d8856bb2365e5f Mon Sep 17 00:00:00 2001 From: Rob Andrews Date: Fri, 3 Feb 2017 09:04:08 -0500 Subject: [PATCH 12/12] Adds Day 16 Fini6 Fini6 Fini6 Fini6 Fini6 Finished Code. --- 16 - Mouse Move Shadow/index-start.html | 26 ++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html index 58a9bba861..324a0ecf5f 100644 --- a/16 - Mouse Move Shadow/index-start.html +++ b/16 - Mouse Move Shadow/index-start.html @@ -25,12 +25,36 @@

🔥WOAH!

} h1 { - text-shadow: 10px 10px 0 rgba(0,0,0,1); font-size: 100px; }