diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index.html similarity index 76% rename from 01 - JavaScript Drum Kit/index-START.html rename to 01 - JavaScript Drum Kit/index.html index 4070d32767..973da4ace0 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index.html @@ -58,6 +58,25 @@ diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index.html similarity index 59% rename from 02 - JS and CSS Clock/index-START.html rename to 02 - JS and CSS Clock/index.html index 12f721b183..87eb82b577 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index.html @@ -61,13 +61,39 @@ height: 6px; background: black; position: absolute; - top: 50%; + top: 50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.1s; + transition-timing-function: cubic-bezier(0, 2.24, 0.58, 1); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index.html similarity index 64% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables/index.html index 6b9b539c09..cbd505f2cc 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index.html @@ -21,6 +21,17 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index.html similarity index 68% rename from 04 - Array Cardio Day 1/index-START.html rename to 04 - Array Cardio Day 1/index.html index eec0ffc31d..a2897464ad 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index.html @@ -31,28 +31,59 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen = inventors.filter(i => i.year > 1500 && i.year < 1600); + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const names = inventors.map(i => `${i.first} ${i.last}`); + console.log(names); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const bsorted = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + console.table(bsorted); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce((total, i) => total + (i.passed - i.year), 0); + console.log(totalYears); // 5. Sort the inventors by years lived + const lsorted = inventors.sort((a, b) => { + const aLast = a.passed - a.year; + const bLast = b.passed - b.year; + return aLast > bLast ? 1 : -1; + }); + console.table(lsorted); + // 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 links = Array.from(document.querySelector('.mw-category').querySelectorAll('a')); + // const deBoulevards = links.map(i => i.textContent).filter(name => name.indexOf('de') > 0); // 7. sort Exercise // Sort the people alphabetically by last name + const sortedPeople = people.sort((a, b) => { + const [af, al] = a.split(', '); + const [bf, bl] = b.split(', '); + return al > bl ? 1 : -1; + }); + console.log(sortedPeople); // 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 data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pookie pookie' ]; + const freq = data.reduce((acc, item) => { + if (!acc[item]) { + acc[item] = 0; + } + acc[item]++; + return acc; + }, {}); + console.log(freq); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index.html similarity index 74% rename from 05 - Flex Panel Gallery/index-START.html rename to 05 - Flex Panel Gallery/index.html index 71d1c26f00..da05c66387 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index.html @@ -26,6 +26,7 @@ .panels { min-height: 100vh; overflow: hidden; + display: flex; } .panel { @@ -43,6 +44,11 @@ font-size: 20px; background-size: cover; background-position: center; + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } @@ -56,8 +62,17 @@ margin: 0; width: 100%; transition: transform 0.5s; + flex: 1 0 auto; + justify-content: center; + align-items: center; + display: flex; } + .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; @@ -71,6 +86,7 @@ .panel.open { font-size: 40px; + flex: 5; } @@ -105,6 +121,21 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html deleted file mode 100644 index 109c90fb36..0000000000 --- a/06 - Type Ahead/index-START.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - Type Ahead 👀 - - - - -
- - -
- - - diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..2b6ce3a0e7 --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,62 @@ + + + + + Type Ahead 👀 + + + + +
+ + +
+ + + diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index.html similarity index 68% rename from 07 - Array Cardio Day 2/index-START.html rename to 07 - Array Cardio Day 2/index.html index 969566ff78..9bbd5cb141 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index.html @@ -26,12 +26,25 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + const isAdult = people.some(p => (new Date()).getFullYear() - p.year >= 19); + console.log({isAdult}); + + const allAdults = people.every(p => (new Date()).getFullYear() - p.year >= 19); + console.log({allAdults}); // Array.prototype.every() // is everyone 19 or older? // 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 specificId = comments.find(c => c.id === 823423); + console.log({specificId}); + const index = comments.findIndex(comment => comment.id === 823423); + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1), + ]; + console.table(newComments); // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html deleted file mode 100644 index 9da9b5b3c5..0000000000 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - HTML5 Canvas - - - - - - - - - diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html new file mode 100644 index 0000000000..50368edee6 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index.html @@ -0,0 +1,75 @@ + + + + + HTML5 Canvas + + + + + + + + + + + diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index.html similarity index 80% rename from 10 - Hold Shift and Check Checkboxes/index-START.html rename to 10 - Hold Shift and Check Checkboxes/index.html index 4fd2936ddc..aae08ce4ac 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -95,7 +95,31 @@ - diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..4656b218a7 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,55 @@ +/* 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'); + +/* Build out functions */ +function togglePlay() { + const method = video.paused ? 'play' : 'pause'; + video[method](); +} + +function updateButton() { + const icon = this.paused ? '►' : '❚ ❚'; + console.log(icon); + 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; +} + +/* Hook up the event listeners */ +video.addEventListener('click', togglePlay); +video.addEventListener('play', updateButton); +video.addEventListener('pause', updateButton); +video.addEventListener('timeupdate', handleProgress); + +toggle.addEventListener('click', togglePlay); +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); diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html deleted file mode 100644 index dc53c4e9e1..0000000000 --- a/12 - Key Sequence Detection/index-START.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Key Detection - - - - - - diff --git a/12 - Key Sequence Detection/index.html b/12 - Key Sequence Detection/index.html new file mode 100644 index 0000000000..a4da1db68d --- /dev/null +++ b/12 - Key Sequence Detection/index.html @@ -0,0 +1,25 @@ + + + + + Key Detection + + + + + + diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index.html similarity index 95% rename from 13 - Slide in on Scroll/index-START.html rename to 13 - Slide in on Scroll/index.html index ad2f0e580a..d1bc2faab5 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index.html @@ -58,6 +58,26 @@

Slide in on Scroll

}; } + const images = document.querySelectorAll('.slide-in'); + + + function scrollHandler(e) { + images.forEach(image => { + const slideInAt = (window.scrollY + window.innerHeight) - image.height / 2; + const imageBottom = image.offsetTop + image.height; + const isHalfShown = slideInAt > image.offsetTop; + const isNotScrolledPassed = window.scrollY < imageBottom; + if (isHalfShown && isNotScrolledPassed) { + image.classList.add('active'); + } else { + image.classList.remove('active'); + } + }) + + } + + window.addEventListener('scroll', debounce(scrollHandler)); + - - - - diff --git a/16 - Mouse Move Shadow/index.html b/16 - Mouse Move Shadow/index.html new file mode 100644 index 0000000000..08008b086b --- /dev/null +++ b/16 - Mouse Move Shadow/index.html @@ -0,0 +1,65 @@ + + + + + Mouse Shadow + + + +
+

🔥WOAH!

+
+ + + + + + diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index.html similarity index 80% rename from 17 - Sort Without Articles/index-START.html rename to 17 - Sort Without Articles/index.html index 2b6c9546e9..3e4aeb6626 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index.html @@ -48,6 +48,16 @@ diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index.html similarity index 84% rename from 18 - Adding Up Times with Reduce/index-START.html rename to 18 - Adding Up Times with Reduce/index.html index abdf4c91af..3aaf3a75a4 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index.html @@ -177,11 +177,29 @@
  • Video 57
    • -
  • +
  • Video 58
    • diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..7536ca93ce 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -10,6 +10,7 @@
    +