diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..894d769fed 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,99 @@ diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..9b7ac9a3f6 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,12 +61,40 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + /*transition-timing-function: cubic-bezier(0, 2.68, 0.98, 1.04);*/ } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..b13edc6320 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,7 +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..c95d82974e 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,29 +33,82 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + let filter = inventors.filter((element, index) => { + return element.year < 1600 && element.year >= 1500 + }) + console.log(filter) // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + let result = inventors.map(inventor => `${inventor.first}, ${inventor.last}`) + console.log(result) // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + inventors.sort((inventor1, inventor2) => { + if (inventor1.year < inventor2.year) return -1; + if (inventor1.year > inventor2.year) return 1; + return 0; + }) + + console.log(inventors) // Array.prototype.reduce() // 4. How many years did all the inventors live? - + let yearCount = inventors.reduce((initialVal, currentVal) => { + return initialVal += (currentVal.passed - currentVal.year) + },0) + console.log(yearCount) // 5. Sort the inventors by years lived + inventors.sort((inventor, inventor2) => { + if (inventor.passed - inventor.year > inventor2.passed-inventor2.year) { + return -1; + } + if (inventor.passed - inventor.year < inventor2.passed-inventor2.year) { + return 1; + } + }) + console.log(inventors) // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + // Boulevards.map(index => { + // if (index.indexOf('de') > -1) { + // return index; + // } + // }) // 7. sort Exercise // Sort the people alphabetically by last name + people.sort((person1, person2) => { + let lastNameIndex = person1.indexOf(',') + 2; + let lastNameIndex2 = person2.indexOf(',') + 2; + if (person1[lastNameIndex] < person2[lastNameIndex2]) { + return -1; + } + if (person1[lastNameIndex] > person2[lastNameIndex2]) { + return 1; + } + // console.log(person1[lastNameIndex]) + }) + console.log(people) + // 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' ]; + let redResult = data.reduce((obj, word) => { + if (!obj[word]) { + obj[word] = 0; + } + obj[word] ++; + return obj; + },{}) + + console.log(redResult) + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..cca12893d9 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 { @@ -41,6 +42,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -54,6 +60,18 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; + } + + .panel > *:first-child { + transform: translateY(-100%); + } + + .panel > *:last-child { + transform: translateY(100%); } .panel p { @@ -62,12 +80,22 @@ text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; } + + .panel.open-active > *:first-child { + transform: translateY(0); + } + + .panel.open-active > *:last-child { + transform: translateY(0); + } + .panel p:nth-child(2) { font-size: 4em; } .panel.open { font-size:40px; + flex: 5; } .cta { @@ -108,6 +136,22 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..86784e1f70 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,48 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..30b7940136 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,26 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + let someCheck = people.some(person => 2016 - person.year >= 19) + console.log(someCheck) + // Array.prototype.every() // is everyone 19? + let everyCheck = people.every(person => 2016 - person.year === 19) + console.log(everyCheck) + // 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 + let findResult = comments.find(comment => comment.id === 823423) + console.log(findResult) // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 + let result = comments.findIndex(comment => comment.id === 823423) + comments.splice(result, 1) + console.log(comments) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..0cfc6bc2f9 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,41 @@ diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index cfaf3e0440..a1ccffe159 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -45,6 +45,37 @@ diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index 3eaee0f3ef..c05400d7e2 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -182,6 +182,29 @@ diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..cb2d1b18a4 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -10,7 +10,7 @@
- +
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..5183c4b6e6 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,98 @@ const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); + +// video comes off webcame (video element) and we pipe it into the canvas. strip is where we put images + +function getVideo() { + navigator.mediaDevices.getUserMedia({video: true, audio: false}) + .then(localMediaStream => { + video.src = window.URL.createObjectURL(localMediaStream); + video.play(); + }) + .catch(err => console.error("Webcam access was denied", err)); +} + +function paintToCanvas() { + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + // retrieve the pixels + let pixels = ctx.getImageData(0,0, width, height); + // add effect to pixels + // pixels = redEffect(pixels); + // pixels = rgbSplit(pixels); + // ctx.globalAlpha = 0.1; + pixels = greenScreen(pixels); + + // put pixels back + ctx.putImageData(pixels, 0, 0); + }, 16); +} + +function takePhoto() { + // play camera snap audio + snap.currentTime = 0; + snap.play(); + + //take data out of canvas + const data = canvas.toDataURL('image/jpeg'); + const link = document.createElement('a'); + link.href = data; + link.setAttribute('download', 'handsome'); + link.innerHTML = `handsome person` + strip.insertBefore(link, strip.firstChild) +} + +function redEffect(pixels) { + for (let i = 0; i < pixels.data.length; i += 4) { + pixels.data[i] = pixels.data[i] + 100; // r + pixels.data[i + 1] = pixels.data[i + 1] - 50; // g + pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // b + } + return pixels +} + +function rgbSplit(pixels) { + for (let i = 0; i < pixels.data.length; i += 4) { + pixels.data[i - 150] = pixels.data[i]; // r + pixels.data[i + 400] = pixels.data[i + 1]; // g + pixels.data[i - 550] = pixels.data[i + 2]; // b + } + return pixels +} + +function greenScreen(pixels) { + const levels = {}; + + document.querySelectorAll('.rgb input').forEach((input) => { + levels[input.name] = input.value; + }); + + for (i = 0; i < pixels.data.length; i = i + 4) { + red = pixels.data[i + 0]; + green = pixels.data[i + 1]; + blue = pixels.data[i + 2]; + alpha = pixels.data[i + 3]; + + if (red >= levels.rmin + && green >= levels.gmin + && blue >= levels.bmin + && red <= levels.rmax + && green <= levels.gmax + && blue <= levels.bmax) { + // take it out! + pixels.data[i + 3] = 0; + } + } + + return pixels; +} + +getVideo(); + +video.addEventListener('canplay', paintToCanvas); \ No newline at end of file diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html index d3395cca35..3728745ff5 100644 --- a/20 - Speech Detection/index-START.html +++ b/20 - Speech Detection/index-START.html @@ -12,6 +12,27 @@ diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html index d794c144ba..2c4236ef44 100644 --- a/21 - Geolocation/index-START.html +++ b/21 - Geolocation/index-START.html @@ -57,17 +57,19 @@

/*Compass: https://thenounproject.com/search/?q=compass&i=592352*/ diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html index 8476112b5e..1527dec258 100644 --- a/22 - Follow Along Link Highlighter/index-START.html +++ b/22 - Follow Along Link Highlighter/index-START.html @@ -26,7 +26,26 @@ diff --git a/22 - Follow Along Link Highlighter/style.css b/22 - Follow Along Link Highlighter/style.css index 222e27ae68..598671fff5 100644 --- a/22 - Follow Along Link Highlighter/style.css +++ b/22 - Follow Along Link Highlighter/style.css @@ -57,3 +57,7 @@ a { margin:0 20px; color:black; } + +.hidden { + visibility: hidden; +} diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html index e890008d36..6f7fb042c5 100644 --- a/23 - Speech Synthesis/index-START.html +++ b/23 - Speech Synthesis/index-START.html @@ -35,6 +35,58 @@

The Voiceinator 5000

const options = document.querySelectorAll('[type="range"], [name="text"]'); const speakButton = document.querySelector('#speak'); const stopButton = document.querySelector('#stop'); + const synth = window.speechSynthesis; + const form = document.querySelector('textarea'); + + function speakFn() { + msg.text = form.value; + synth.speak(msg) + } + + function stopSpeaking() { + synth.cancel(); + } + + function handleChange() { + let name = this.name; + msg[`${name}`] = this.value; + synth.cancel(); + speakFn() + } + + speakButton.addEventListener('click', speakFn) + stopButton.addEventListener('click', stopSpeaking) + options.forEach(option => { + option.addEventListener('change', handleChange) + }) + + let item = document.createElement('option'); + + let timer = setInterval(function() { + voices = synth.getVoices(); + voices = voices.filter(voice => { + return voice.lang.includes('en') + }) + + if (voices.length !== 0) { + voices.map((voice, index) => { + item = document.createElement('option'); + item.value = index; + item.textContent = voice.name; + voicesDropdown.appendChild(item) + }) + clearInterval(timer); + } +}, 200); + + function selectVoice() { + msg.voice = voices[this.value]; + synth.cancel(); + speakFn(); + } + + voicesDropdown.addEventListener('change', selectVoice) + diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html index e7bc67e9a5..06a7c64f54 100644 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index-START.html @@ -55,6 +55,24 @@

A story about getting lost.

diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index c6d59a31b3..b772633214 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -84,3 +84,16 @@ nav a { transition:all 0.2s; text-transform: uppercase; } + +.fixed-nav nav { + position: fixed; + box-shadow: 0 5px rgba(0,0,0,0.1); +} + +.fixed-nav li.logo { + max-width: 500px; +} + +.fixed-nav .site-wrap { + transform: scale(1); +} diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html index 98f5e070c4..619afc5b04 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html @@ -39,6 +39,14 @@ diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html index 9780d0d1ac..75c964fee0 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -208,6 +208,34 @@

Cool

diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..c16c593455 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -35,6 +35,43 @@ diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html index c4cbd4259a..d85f9d7b29 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index-START.html @@ -15,6 +15,24 @@ diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index e69de29bb2..106362e432 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,55 @@ +let timeLeftElement = document.querySelector('.display__time-left'); +let endTimeElement = document.querySelector('.display__end-time'); +let buttons = document.querySelectorAll('button'); +let form = document.querySelector('[name=customForm'); +let input = form.querySelector('input'); +let countdown; + +function startTimer() { + timer(this.dataset.time); +} + +function timer(seconds) { + clearInterval(countdown); + let now = Date.now(); + let then = now + seconds * 1000; + displayTimeLeft(seconds); + displayEndTime(then); + + countdown = setInterval(() => { + let secondsLeft = Math.round((then - Date.now()) / 1000); + + if (secondsLeft < 1) { + clearInterval(countdown); + } + + displayTimeLeft(secondsLeft); + }, 1000); + +} + +function displayTimeLeft(seconds) { + let minutes = Math.floor(seconds / 60); + let remainingSeconds = seconds % 60; + timeLeftElement.innerHTML = `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; + document.title = timeLeftElement.innerHTML; +} + +function displayEndTime(timestamp) { + const endTime = new Date(timestamp); + let hours = endTime.getHours(); + const minutes = endTime.getMinutes(); + endTimeElement.innerHTML = `Be back at ${hours > 12 ? hours-= 12 : hours}:${minutes < 10 ? '0' : ''}${minutes}`; +} + + +buttons.forEach(button => { + button.addEventListener('click', startTimer); +}) + +form.addEventListener('submit', (e) => { + e.preventDefault(); + let minutes = input.value; + form.reset(); + timer(minutes * 60); +}); diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..8733e804fc 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -36,6 +36,51 @@

Whack-a-mole! 0

const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); + let lastHole; + let timeUp = false; + + function randomTime(min, max) { + return Math.round(Math.random() * (max-min) + min); + } + + function randomHole(holes) { + let index = Math.floor(Math.random() * holes.length); + let hole = holes[index]; + if (hole === lastHole) return randomHole(holes); + lastHole = hole; + return hole; + } + + function peep() { + const time = randomTime(200, 1000); + const hole = randomHole(holes); + hole.classList.add('up'); + + setTimeout(() => { + hole.classList.remove('up'); + if (!timeUp) peep(); + }, time); + + } + + function addPoint(e) { + // will exit if detects fake click + if (!e.isTrusted) return; + scoreBoard.textContent = Number(scoreBoard.textContent) + 1; + this.classList.remove('up'); + } + + + function startGame() { + scoreBoard.textContent = 0; + timeUp = false; + peep(); + setTimeout(() => timeUp = true, 10000); + + } + moles.forEach(mole => { + mole.addEventListener('click', addPoint); + })