diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..55e80af721 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,89 @@ + - - Codestin Search App - + + Codestin Search App + + -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - + + + + + + + + + + + + function removeTransition(e) { + if (e.propertyName !== 'transform') return; + + this.classList.remove('playing'); + } + + const keys = document.querySelectorAll('.key'); + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + + xwindow.addEventListener('keydown', playSound); + - + + \ No newline at end of file diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7cbf5f6ba6..5190a7afae 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,95 @@ + - - Codestin Search App + + Codestin Search App +
-
-
-
-
-
+
+
+
+
+
- - .clock { - width: 30rem; - height: 30rem; - border: 20px solid white; - border-radius: 50%; - margin: 50px auto; - position: relative; - padding: 2rem; - box-shadow: - 0 0 0 4px rgba(0,0,0,0.1), - inset 0 0 0 3px #EFEFEF, - inset 0 0 10px black, - 0 0 10px rgba(0,0,0,0.2); - } + + setInterval(setDate, 1000); + - + + \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..7bd900df54 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,11 +21,26 @@

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 eec0ffc31d..9097962f44 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,29 +31,77 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen_l = inventors.filter(function(inventor) { + return inventor.year >= 1500 && inventor.year < 1600 + }); + + const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); + + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + + console.log(fullNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + + console.table(ordered); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year) + }, 0); + + console.log(totalYears); // 5. Sort the inventors by years lived + const oldest = inventors.sort((a, b) => { + const last = a.passed - a.year; + const next = b.passed - b.year; + return last > next ? -1 : 1; + }); + + console.table(oldest); // 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 category = document.querySelector('.mw-category'); + const links = Array.from(category.querySelectorAll('a')); + //const links = [...category.querySelectorAll('a')]; // ES6 spread + 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; + }); + + console.log(alpha); // 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((obj, item) => { + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); // start with empty object + + console.log(transportation); + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 71d1c26f00..246f81ded3 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -26,9 +26,15 @@ .panels { min-height: 100vh; overflow: hidden; + display: flex; } .panel { + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); color: white; @@ -56,6 +62,24 @@ 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.open-active > *:first-child { + transform: translateY(0); + } + .panel.open-active > *:last-child { + transform: translateY(0); } .panel p { @@ -71,6 +95,7 @@ .panel.open { font-size: 40px; + flex: 5; } @@ -105,7 +130,19 @@
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 109c90fb36..398247063b 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -16,6 +16,42 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..5a697b6e83 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,42 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + // const isAdult = people.some(person => { + // const currentYear = (new Date()).getFullYear(); + // return currentYear - person.year >= 19; + // }); + const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); + + console.log({isAdult}); + // Array.prototype.every() // is everyone 19 or older? + const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); + + console.log({allAdults}); // 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(comment => (comment.id === 823423)); + + console.log(comment); + // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 + const index = comments.findIndex(comment => (comment.id === 823423)); + + // comments.splice(index, 1); + // console.table(comments); + + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ]; + + console.table(newComments); + diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 9da9b5b3c5..11e968ae28 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,58 @@ diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index 2b6c9546e9..f09a45c161 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -48,7 +48,15 @@ diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index abdf4c91af..9094250aaf 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -182,6 +182,24 @@ diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..cde168020f 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..8e764dc426 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,97 @@ const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); + +function getVideo() { + navigator.mediaDevices.getUserMedia({ video: true, audio: false }) + .then(localMediaStream => { + console.log(localMediaStream); + video.srcObject = localMediaStream; + video.play(); + }) + .catch(err => { + console.error(`OH NO!!!`, err, err.name + ": " + err.message); + }); +} + +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); + // take the pixels out + let pixels = ctx.getImageData(0, 0, width, height); + // mess with them + // 1. pixels = redEffect(pixels); + // 2. pixels = rgbSplit(pixels); + // ctx.globalAplha = 0.1; + pixels = greenScreen(pixels); + // put them back + ctx.putImageData(pixels, 0, 0); + }, 16) +} + +function takePhoto() { + snap.currentTime = 0; + snap.play(); + + const data = canvas.toDataURL('image/jpeg'); + const link = document.createElement('a'); + link.href = data; + link.setAttribute('download', 'handsome'); + link.innerHTML = `Handsome man`; + strip.insertBefore(link, strip.firstChild); +} + +function redEffect(pixels) { + for (let i = 0; i < pixels.data.length; i+=4) { + pixels.data[i + 0] = pixels.data[i + 0] + 100; // red + pixels.data[i + 1] = pixels.data[i + 1] - 50; // green + pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // blue + } + return pixels; +} + +function rgbSplit(pixels) { + for (let i = 0; i < pixels.data.length; i+=4) { + pixels.data[i - 150] = pixels.data[i + 0]; // red + pixels.data[i + 500] = pixels.data[i + 1]; // green + pixels.data[i - 550] = pixels.data[i + 2]; // blue + } + 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 31b4042563..5698b43160 100644 --- a/20 - Speech Detection/index-START.html +++ b/20 - Speech Detection/index-START.html @@ -12,7 +12,28 @@ diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html index 6d48c7a6d1..62a02b03ea 100644 --- a/21 - Geolocation/index-START.html +++ b/21 - Geolocation/index-START.html @@ -59,6 +59,17 @@

/*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..1dc18fb441 100644 --- a/22 - Follow Along Link Highlighter/index-START.html +++ b/22 - Follow Along Link Highlighter/index-START.html @@ -27,6 +27,27 @@ diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html index e890008d36..8f839ed3fd 100644 --- a/23 - Speech Synthesis/index-START.html +++ b/23 - Speech Synthesis/index-START.html @@ -35,6 +35,41 @@

The Voiceinator 5000

const options = document.querySelectorAll('[type="range"], [name="text"]'); const speakButton = document.querySelector('#speak'); const stopButton = document.querySelector('#stop'); + + msg.text = document.querySelector('[name="text"]').value; + + function populateVoices() { + voices = this.getVoices(); + + voicesDropdown.innerHTML = voices + .filter(voice => voice.lang.includes('en')) + .map(voice => ``) + .join(''); + } + + function setVoice() { + msg.voice = voices.find(voice => voice.name === this.value); + toggle(); + } + + function toggle(startOver = true) { + speechSynthesis.cancel(); + if (startOver) { + speechSynthesis.speak(msg); + } + } + + function setOption() { + msg[this.name] = this.value; + toggle(); + } + + speechSynthesis.addEventListener('voiceschanged', populateVoices); + voicesDropdown.addEventListener('change', setVoice); + options.forEach(option => option.addEventListener('change', setOption)); + speakButton.addEventListener('click', toggle); + stopButton.addEventListener('click', () => toggle(false)); + //stopButton.addEventListener('click', toggle.bind(null, false)); diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html index e7bc67e9a5..b0f3911889 100644 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index-START.html @@ -54,7 +54,19 @@

A story about getting lost.

diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index b83b9c01ae..5b27cb2832 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -25,6 +25,10 @@ body { transition: transform 0.5s; } +.fixed-nav .site-wrap { + transform: scale(1); +} + header { text-align: center; height: 50vh; @@ -50,6 +54,11 @@ nav { z-index: 1; } +.fixed-nav nav { + position: fixed; + box-shadow: 0 5px rbga(0, 0, 0, 0.1); +} + nav ul { margin: 0; padding:0; @@ -74,6 +83,10 @@ li.logo { font-size: 30px; } +.fixed-nav li.logo { + max-width: 500px; +} + li.logo a { color: black; } 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 7bd5931e01..207c040a44 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html @@ -42,7 +42,17 @@ diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html index 608d0a6716..6d77f7c22a 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -218,8 +218,40 @@

Cool

.button[href*=facebook] { background: #3B5998; } .button[href*=courses] { background: #ffc600; } - diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..c47549ac6f 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -35,6 +35,32 @@ diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html index 8bd536b18b..b6e0813c5d 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index-START.html @@ -15,6 +15,23 @@ diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index e69de29bb2..bbec314d6a 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,50 @@ +let countdown; +const timerDisplay = document.querySelector('.display__time-left'); +const endTime = document.querySelector('.display__end-time'); +const buttons = document.querySelectorAll('[data-time]'); + +function timer(seconds) { + clearInterval(countdown); + const now = Date.now(); + const then = now + seconds * 1000; + displayEndTime(then); + displayTimeLeft(seconds); + + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); + if (secondsLeft < 0) { + clearInterval(countdown); + return; + } + displayTimeLeft(secondsLeft); + }, 1000); +} + +function displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); + const remainderSeconds = seconds % 60; + const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`; + + timerDisplay.textContent = display; + document.title = display; +} + +function displayEndTime(timestamp) { + const end = new Date(timestamp); + const hours = end.getHours(); + const minutes = end.getMinutes(); + endTime.textContent = `Be back at ${hours > 12 ? hours - 12 : hour}:${minutes < 10 ? '0' : ''}${minutes}`; +} + +function startTimer() { + const seconds = parseInt(this.dataset.time); + timer(seconds); +} + +buttons.forEach(button => button.addEventListener('click', startTimer)); +document.customForm.addEventListener('submit', function(e) { + e.preventDefault(); + const mins = parseInt(this.minutes.value); + timer(mins * 60); + this.reset(); +}); \ No newline at end of file diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..64c12a6d6f 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -36,6 +36,56 @@

Whack-a-mole! 0

const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); + let lastHole; + let timeUp = false; + let score = 0; + + function randomTime(min, max) { + return Math.round(Math.random() * (max - min) + min); + } + + function randomHole(holes) { + const idx = Math.floor(Math.random() * holes.length); + const hole = holes[idx]; + 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 startGame() { + scoreBoard.textContent = 0; + timeUp = false; + score = 0; + peep(); + setTimeout(() => timeUp = true, 10000); + } + + function bonk(e) { + if (!e.isTrusted) { + console.log('Do not cheat'); + return; + } + score++; + this.classList.remove('up'); + scoreBoard.textContent = score; + } + + moles.forEach(mole => mole.addEventListener('click', bonk));