diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html deleted file mode 100644 index 4070d32767..0000000000 --- a/01 - JavaScript Drum Kit/index-START.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index.html similarity index 88% rename from 01 - JavaScript Drum Kit/index-FINISHED.html rename to 01 - JavaScript Drum Kit/index.html index 1a16d0997c..c301403b16 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index.html @@ -58,24 +58,24 @@ diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css old mode 100644 new mode 100755 index 075578c930..3e0a320b37 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,6 +1,6 @@ html { font-size: 10px; - background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; background-size: cover; } body,html { @@ -10,41 +10,41 @@ body,html { } .keys { - display: flex; - flex: 1; - min-height: 100vh; + display:flex; + flex:1; + min-height:100vh; align-items: center; justify-content: center; } .key { - border: .4rem solid black; - border-radius: .5rem; - margin: 1rem; + border:4px solid black; + border-radius:5px; + margin:1rem; font-size: 1.5rem; - padding: 1rem .5rem; - transition: all .07s ease; - width: 10rem; + padding:1rem .5rem; + transition:all .07s; + width:100px; text-align: center; - color: white; - background: rgba(0,0,0,0.4); - text-shadow: 0 0 .5rem black; + color:white; + background:rgba(0,0,0,0.4); + text-shadow:0 0 5px black; } .playing { - transform: scale(1.1); - border-color: #ffc600; - box-shadow: 0 0 1rem #ffc600; + transform:scale(1.1); + border-color:#ffc600; + box-shadow: 0 0 10px #ffc600; } kbd { display: block; - font-size: 4rem; + font-size: 40px; } .sound { font-size: 1.2rem; text-transform: uppercase; - letter-spacing: .1rem; - color: #ffc600; + letter-spacing: 1px; + color:#ffc600; } diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 2712384201..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - JS + CSS Clock - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index.html similarity index 72% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS + CSS Clock/index.html index ac30c1ef0e..52dd1c546d 100644 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS + CSS Clock/index.html @@ -61,38 +61,37 @@ background:black; position: absolute; top:50%; - transform-origin: 100%; transform: rotate(90deg); - transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + transform-origin: 100%; + transition: all .05s cubic-bezier(0.08, 2.43, 0.54, 1.02); } - - + - + \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html deleted file mode 100644 index ca2b59d077..0000000000 --- a/03 - CSS Variables/index-START.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - - - - - - diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index.html similarity index 76% rename from 03 - CSS Variables/index-FINISHED.html rename to 03 - CSS Variables/index.html index 848a0f95f9..9c1486a4ef 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index.html @@ -63,17 +63,24 @@

Update CSS Variables with JS

+ + + + + - + \ No newline at end of file diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..77d0db56fc 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,28 +31,51 @@ // 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 sortInventors = inventors.sort((a, b) => a.year - b.year); // 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); // 5. Sort the inventors by years lived + const oldest = inventors.sort((a, b) => (a.passed - a.year) - (b.passed - b.year)); // 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 boulevards = document.querySelectorAll(".mw-category-group li"); + var boulevardsArray = [...boulevards]; + boulevardsArray.filter(boulevard => /de/.test(boulevard.innerText)); // 7. sort Exercise // Sort the people alphabetically by last name + const alpha = people.sort((a,b) => { + if(a < b) return -1; + if(a > b) return 1; + return 0; + }); // 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(function(obj, item) { + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + + console.log(transportation); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..1b209e09f3 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; + display: flex; + flex: 1; + justify-content: center; + align-items: center; + flex-direction: column; } @@ -61,12 +67,24 @@ font-family: 'Amatic SC', cursive; text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; + flex: 1 0 auto; + 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.open-active > *:last-child { transform: translateY(0); } + + .panel p:nth-child(2) { font-size: 4em; } .panel.open { + flex: 5; font-size:40px; } @@ -107,7 +125,19 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..f496ea2e68 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -16,7 +16,43 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..b76c6c5a65 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,16 +26,22 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + const currentYear = (new Date()).getFullYear(); + const isAdult = people.some(person => currentYear - person.year >= 18); + // Array.prototype.every() // is everyone 19 or older? + const isEveryAdult = people.every(person => currentYear - person.year >= 18); // 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); // Array.prototype.findIndex() // Find the comment with this ID - // delete the comment with the ID of 823423 - + // delete the comment with the ID of 823423 + const index = comments.findIndex(comment => comment.id === 823423); + const newComments = [...comments.slice(0, index),...comments.slice(index + 1)]; diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..138e84b711 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -5,8 +5,57 @@ HTML5 Canvas + diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index cfaf3e0440..ed7f44b6c1 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -44,8 +44,18 @@ 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/package.json b/19 - Webcam Fun/package.json index 616baf5369..fa77d28e28 100755 --- a/19 - Webcam Fun/package.json +++ b/19 - Webcam Fun/package.json @@ -9,6 +9,6 @@ "author": "", "license": "ISC", "devDependencies": { - "browser-sync": "^2.12.5" + "browser-sync": "~2.18.6" } } diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..0d62c8dc23 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,100 @@ 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.src = window.URL.createObjectURL(localMediaStream); + video.play(); + }) + .catch(err => { + console.error(`OH NO!!!`, err); + }); +} + +function paintToCanavas() { + 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 + // pixels = redEffect(pixels); + + pixels = rgbSplit(pixels); + // ctx.globalAlpha = 0.8; + + // pixels = greenScreen(pixels); + // put them back + ctx.putImageData(pixels, 0, 0); + }, 16); +} + +function takePhoto() { + // played the sound + snap.currentTime = 0; + snap.play(); + + // take the data out of the canvas + 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.firsChild); +} + +function redEffect(pixels) { + for(let i = 0; i < pixels.data.length; i+=4) { + pixels.data[i + 0] = pixels.data[i + 0] + 200; // 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', paintToCanavas); diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html index d3395cca35..f3426fe822 100644 --- a/20 - Speech Detection/index-START.html +++ b/20 - Speech Detection/index-START.html @@ -10,7 +10,33 @@ diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html index a1b981b1cd..ecea9fc6b7 100644 --- a/21 - Geolocation/index-START.html +++ b/21 - Geolocation/index-START.html @@ -13,11 +13,17 @@

0 KM/H

+
+ diff --git a/21 - Geolocation/index-TEST.html b/21 - Geolocation/index-TEST.html new file mode 100644 index 0000000000..d129ff65bf --- /dev/null +++ b/21 - Geolocation/index-TEST.html @@ -0,0 +1,85 @@ + + + + + Document + + + + +
+ + + + diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html deleted file mode 100644 index 8476112b5e..0000000000 --- a/22 - Follow Along Link Highlighter/index-START.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - 👀👀👀Follow Along Nav - - - - - - -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!

-

Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.

-

Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.

-

Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur eveniet sunt quam provident sapiente dicta neque quod.

-

Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio, distinctio magni impedit tempore enim repellendus repudiandae quas!

-
- - - - - diff --git a/22 - Follow Along Link Highlighter/index.html b/22 - Follow Along Link Highlighter/index.html new file mode 100644 index 0000000000..f016e4856a --- /dev/null +++ b/22 - Follow Along Link Highlighter/index.html @@ -0,0 +1,31 @@ + + + + + 👀👀👀Follow Along Nav + + + + + + +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!

+

Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.

+

Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.

+

Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur eveniet sunt quam provident sapiente dicta neque quod.

+

Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio, distinctio magni impedit tempore enim repellendus repudiandae quas!

+
+ + + + + diff --git a/22 - Follow Along Link Highlighter/package.json b/22 - Follow Along Link Highlighter/package.json new file mode 100644 index 0000000000..8faf93b0fc --- /dev/null +++ b/22 - Follow Along Link Highlighter/package.json @@ -0,0 +1,14 @@ +{ + "name": "follow", + "version": "1.0.0", + "description": "", + "main": "scripts.js", + "scripts": { + "start" : "browser-sync start --server --files '*.css, *.html, *.js'" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "browser-sync": "~2.18.6" + } +} diff --git a/22 - Follow Along Link Highlighter/scripts.js b/22 - Follow Along Link Highlighter/scripts.js new file mode 100644 index 0000000000..b4e9592932 --- /dev/null +++ b/22 - Follow Along Link Highlighter/scripts.js @@ -0,0 +1,19 @@ +const triggers = document.querySelectorAll('a'); +const highlight = document.createElement('span'); +highlight.classList.add('highlight'); +document.body.appendChild(highlight); + +function highlightLink () { + const linkCoords = this.getBoundingClientRect(); + const coords = { + width: linkCoords.width, + height: linkCoords.height, + top: linkCoords.top + scrollY, + left: linkCoords.left + scrollX + } + highlight.style.width = `${coords.width}px`; + highlight.style.height = `${coords.height}px`; + highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)` +} + +triggers.forEach( a => a.addEventListener('mouseenter', highlightLink)); \ No newline at end of file diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html index e890008d36..e811186f91 100644 --- a/23 - Speech Synthesis/index-START.html +++ b/23 - Speech Synthesis/index-START.html @@ -35,6 +35,38 @@

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 (startOver = true) { + msg.voice = voices.find(voice => voice.name === this.value); + if (startOver) { + toggle(); + } + } + + function toggle() { + speechSynthesis.cancel(); + 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', () => speechSynthesis.cancel()); diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html index e7bc67e9a5..f904e9a144 100644 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index-START.html @@ -54,7 +54,20 @@

A story about getting lost.

diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index c6d59a31b3..59b24591e7 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; } + +body.fixed-nav nav { + position: fixed; + box-shadow:0 5px 0 rgba(0,0,0,0.1); +} + +.fixed-nav li.logo { + max-width:500px; +} + +body.fixed-nav .site-wrap { + transform: scale(1); +} diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html index 9780d0d1ac..e58d33f44e 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -208,6 +208,38 @@

Cool

diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..69b8b411ac 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -35,6 +35,35 @@ diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html index c4cbd4259a..0abd039adf 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index-START.html @@ -15,6 +15,20 @@ diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index e69de29bb2..716d7ba227 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,54 @@ +/* jshint esversion:6 */ +/* jshint -W087 */ + +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; + displayTimeLeft(seconds); + displayEndTime(then) + + 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 hour = end.getHours(); + const minutes = end.getMinutes(); + endTime.textContent = `Be back at ${hour > 12 ? hour - 12 : hour}:${minutes < 10 ? '0' + minutes : minutes}`; +} + +function startTimer() { + timer(this.dataset.time); +} + +buttons.forEach(button => button.addEventListener('submit', startTimer)); +document.customForm.addEventListener('submit', function(e) { + e.preventDefault(); + const mins = this.minutes.value; + timer(mins * 60); + this.reset(); +}); diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..eac8e2002d 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -7,10 +7,9 @@ - +

High Score:0

Whack-a-mole! 0

- - +
@@ -35,8 +34,64 @@

Whack-a-mole! 0

diff --git a/30 - Whack A Mole/style.css b/30 - Whack A Mole/style.css index 8fec3f5d8e..738c0d5f8f 100644 --- a/30 - Whack A Mole/style.css +++ b/30 - Whack A Mole/style.css @@ -21,6 +21,10 @@ h1 { margin-bottom: 0; } +h3 { + font-size: 3em; +} + .score { background:rgba(255,255,255,0.2); padding:0 3rem;