diff --git a/.gitignore b/.gitignore index 6e1a3738b8..620be2d256 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules/ *.log haters/ +.vscode diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..e8d7c9abb5 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -6,8 +6,6 @@ - -
A @@ -58,9 +56,27 @@ + function playSound(e) { + var audio = document.querySelector('audio[data-key="'+e.keyCode+'"]'); + if(!audio) return; + audio.currentTime = 0; + audio.play(); + var key = document.querySelector('div[data-key="'+e.keyCode+'"]'); + console.log(key); + key.classList.add('playing'); + } + var keys = document.querySelectorAll('div.key') + keys.forEach(key => key.addEventListener('transitionend', removeButtonColor)) + + function removeButtonColor(e) { + if(e.propertyName == 'transform') { + e.target.classList.remove('playing'); + } + } + diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html index db653a5340..2419f0c6b2 100644 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS + CSS Clock/index-FINISHED.html @@ -63,7 +63,7 @@ top:50%; transform-origin: 100%; transform: rotate(90deg); - transition: all 0.05s; + transition: all 0.5s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..ba9138be27 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -3,7 +3,7 @@ JS + CSS Clock - + @@ -36,7 +36,7 @@ .clock { width: 30rem; height: 30rem; - border:20px solid white; + border:20px solid black; border-radius:50%; margin:50px auto; position: relative; @@ -58,16 +58,36 @@ .hand { width:50%; height:6px; - background:black; + background:white; position: absolute; top:50%; + transition: 0.05s; + transform: rotate(90deg); + transform-origin: 100%; } diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 317883a4c1..61ca76b3b2 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,28 +31,75 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + var filteredInventors = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); + console.table(filteredInventors); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + var lastNameArr = inventors.map(function(item) { + return item.first + ' ' + item.last; + }); + console.log(lastNameArr); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + var sortedByBirth = inventors.sort(function(a,b) { + if (a.year < b.year) { + return -1; + } + else { + return 1; + } + }); + console.table(sortedByBirth); // Array.prototype.reduce() // 4. How many years did all the inventors live? + var totalYears = inventors.reduce((total, item) => { + return total + (item.passed - item.year); + },0); + + console.log(totalYears); // 5. Sort the inventors by years lived + var yearsLived = inventors.sort((a,b) => { + ayearslived = a.passed - a.year; + byearslived = b.passed - b.year; + + if(ayearslived > byearslived) { + return 1; + } + else { + return -1; + } + }); + console.table(yearsLived); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris - // 7. sort Exercise // Sort the people alphabetically by last name + var sortedByLastName = people.sort((a,b) => { + var [aLast, aFirst] = a.split(', '); + var [bLast, bFirst] = b.split(', '); + + return aLast > bLast ? 1 : -1; + }); + console.log(sortedByLastName); // 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' ]; + var tojo = data.reduce((obj, item) => { + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++; + + return obj; + },{}); + console.log(tojo); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..981f3e700b 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -32,6 +33,7 @@ color:white; text-align: center; align-items:center; + flex-grow: 1; /* Safari transitionend event.propertyName === flex */ /* Chrome + FF transitionend event.propertyName === flex-grow */ transition: @@ -41,6 +43,9 @@ font-size: 20px; background-size:cover; background-position:center; + display: flex; + flex-direction: column; + justify-content: center; } @@ -54,6 +59,26 @@ margin:0; width: 100%; transition:transform 0.5s; + flex-grow:1; + display: flex; + justify-content: center; + align-items: center; + } + + .panel > *:first-child { + transform: translateY(-100%); + } + + .panel.open-active > *:first-child { + transform: translateY(0); + } + + .panel > *:last-child { + transform: translateY(100%); + } + + .panel.panel.open-active > *:last-child { + transform: translateY(0); } .panel p { @@ -68,6 +93,7 @@ .panel.open { font-size:40px; + flex-grow: 2; } .cta { @@ -107,7 +133,19 @@
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..5e567d4066 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -16,6 +16,44 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..5503cd8d2b 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,11 +26,22 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + function isPerson19(currVal) { + const personAge = new Date().getFullYear() - currVal.year; + if(personAge >= 19) return true; + } + + const isAdult = people.some(isPerson19); + console.log({isAdult}); // Array.prototype.every() // is everyone 19 or older? + const everyOneAdult = people.every(isPerson19); + console.log(everyOneAdult); // 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(currElem => (currElem.id == 823423)) + console.log(comment); // Array.prototype.findIndex() // Find the comment with this ID diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index eb7ed310bb..a83fcc5251 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -104,6 +104,27 @@
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html index 281a15eaa8..fb7f2d16ff 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -6,7 +6,6 @@ -
@@ -19,9 +18,9 @@ +
- - + diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..b4bbf6d37a 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,67 @@ +const player = document.querySelector('.player'); +const video = player.querySelector('video'); +const progressBar = player.querySelector('.progress__filled'); +const playButton = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]'); +const ranges = player.querySelectorAll('.player__slider'); +const fullscreen = player.querySelector('.fullscreen'); + + +//Functions defined from here +function togglePlay() { + if(video.paused) { + video.play(); + } + else { + video.pause(); + } +} + +function handlePlayButton(e) { + const paused = (e.type=='pause')?true:false; + if(paused) { + playButton.textContent = '►'; + } + else { + playButton.textContent = '❚ ❚'; + } +} + +function updateRange() { + //update the volume and the playback rate + video[this.name] = this.value; +} + +function videoSkip() { + console.log(video.currentTime); + video.currentTime += parseFloat(this.dataset.skip) + console.log(video.currentTime); +} + +function handleProgress() { + const percent = (video.currentTime/video.duration) * 100; + progressBar.style.flexBasis = `${percent}%`; +} + +function handleFullScreen() { + if (video.requestFullscreen) { + video.requestFullscreen(); + } + else if (video.mozRequestFullScreen) { + video.mozRequestFullScreen(); + } + else if (video.webkitRequestFullscreen) { + video.webkitRequestFullscreen(); + } +} + +//Events defined here +playButton.addEventListener('click', togglePlay); +video.addEventListener('click', togglePlay); +video.addEventListener('play', handlePlayButton); +video.addEventListener('pause', handlePlayButton); +video.addEventListener('timeupdate', handleProgress); + +ranges.forEach(range => range.addEventListener('change', updateRange)); +skipButtons.forEach(button => button.addEventListener('click', videoSkip)); +fullscreen.addEventListener('click', handleFullScreen); diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index c07581c1c0..5cd592fa63 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -89,7 +89,7 @@ body { width:50%; background:#ffc600; flex:0; - flex-basis:50%; + flex-basis:0%; } /* unholy css to style input type="range" */ @@ -143,3 +143,6 @@ input[type=range]::-moz-range-thumb { background: #ffc600; cursor: pointer; } +video::-webkit-media-controls { + display:none; +} diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html index 0b9fb8fccb..834867b211 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index-START.html @@ -58,6 +58,45 @@

Slide in on Scroll

}; } + //image is halfscrolled it should be active + //image is scrolled past it should be hidden + + + /* + how do you get if image is half scrolled + * check for the image offsetTop and calculate if the scroll postion is past that offsetTop + * scroll position is calculated by checking the ScrollY position of the window + the window height + * and the image half position + + */ + + /* + how do you get if image is scrolled past + * get the image bottom position + * check if the window scrollY is past that image bottom position + + */ + + + const sliderImages = document.querySelectorAll('.slide-in'); + window.addEventListener('scroll', debounce(checkSlide)); + + function checkSlide(e) { + sliderImages.forEach(sliderImage => { + const slideInAt = (window.scrollY + window.innerHeight) - (sliderImage.height/2); + const isHalfScrolled = slideInAt > sliderImage.offsetTop; + + const imageBottom = sliderImage.offsetTop + sliderImage.height; + const isScrolledPast = window.scrollY > imageBottom; + if(isHalfScrolled && !isScrolledPast) { + sliderImage.classList.add('active'); + } + else { + sliderImage.classList.remove('active'); + } + }); + } +