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 @@ 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 @@ 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

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); 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 @@ 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 @@
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%; } 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 @@ 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; }