From 66aff4d715fccce922a16008bb04e39cb6e5dc6b Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Sat, 10 Dec 2016 16:26:17 -0600 Subject: [PATCH 01/40] Completed Day 1 of Javascript30 --- 01 - JavaScript Drum Kit/index-START.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..7412878d14 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,23 @@ From 4736272925a3d4c16d9d6018419a16912bae672e Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Sat, 10 Dec 2016 16:42:51 -0600 Subject: [PATCH 02/40] Completed Day 1 of JavaScript30 --- 01 - JavaScript Drum Kit/index-START.html | 87 ++++++++++++----------- 1 file changed, 44 insertions(+), 43 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 7412878d14..bc64649a3b 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,80 +1,81 @@ - + - + JS Drum Kit - + -
-
+
+
A - clap + clap
-
+
S - hihat + hihat
-
+
D - kick + kick
-
+
F - openhat + openhat
-
+
G - boom + boom
-
+
H - ride + ride
-
+
J - snare + snare
-
+
K - tom + tom
-
+
L - tink + tink
- - - - - - - - - + + + + + + + + + From af3ebefa6e032ed57b7965c69587eaf8bc75e258 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Sun, 11 Dec 2016 19:06:12 -0600 Subject: [PATCH 03/40] Completed Day 2 of JavaScript30 --- 01 - JavaScript Drum Kit/index-START.html | 2 ++ 02 - JS + CSS Clock/index-START.html | 23 +++++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index bc64649a3b..8f4ea28ac4 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,6 +58,8 @@ From 7e60b32bd79b840ad93d4298e674a13dd60f268b Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Sun, 11 Dec 2016 19:07:06 -0600 Subject: [PATCH 04/40] Completed Day 1 of JavaScript30 --- 01 - JavaScript Drum Kit/index-START.html | 1 + 1 file changed, 1 insertion(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8f4ea28ac4..e0f640d41d 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -72,6 +72,7 @@ key.classList.add('playing'); audio.currentTime = 0; + audio.play(); }; From 9cd855e7e166a9e9af739909cc12306b736149c9 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Mon, 12 Dec 2016 21:31:19 -0600 Subject: [PATCH 05/40] Completed Day 3 of JavaScript30 --- 03 - CSS Variables/index-START.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index bf0f33e3ba..9401d7b339 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,6 +21,21 @@

Update CSS Variables with JS

+ From b47dfd7196d0feae2cf99044cf729462c42bead2 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Tue, 13 Dec 2016 20:13:32 -0600 Subject: [PATCH 06/40] Completed Day 4 of JavaScript40 --- 04 - Array Cardio Day 1/index-START.html | 47 ++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 6e28e357d0..a8b186bc44 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,28 +27,75 @@ // 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 <= 1599); + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventory 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(function(firstPerson, secondPerson) { + // if(firstPerson.year > secondPerson.year) { + // return 1; + // } else { + // return -1; + // } + // }); + // OR: + + 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); // 5. Sort the inventors by years lived + const oldest = inventors.sort(function(a, b) { + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -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 + // inspect whatever contains + // const category = document.querySelector('.mw-category'); + // const links = Arry.from(category.querySelectorAll('a')); + + + // 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(function(obj, item){ + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); From b94e609799c0790f6a9e8ca16708f3be5228b751 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Sun, 18 Dec 2016 19:09:06 -0600 Subject: [PATCH 07/40] Completed Day 5 of 5 of JavaScript30 --- 05 - Flex Panel Gallery/index-START.html | 42 ++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..fe85f51a4e 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,26 @@ 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.open-active > *:first-child { + transform: translateY(0); + } + + .panel > *:last-child { + transform: translateY(100%); + } + + .panel.open-active > *:last-child { + transform: translateY(0); } .panel p { @@ -67,6 +93,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -108,6 +135,21 @@ From db2f178f50af28596f0af8eb3ad8ab4373144846 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Sun, 18 Dec 2016 19:10:18 -0600 Subject: [PATCH 08/40] Completed Day 3 of JavaScript30 --- 04 - Array Cardio Day 1/index-START.html | 2 +- 05 - Flex Panel Gallery/index-START.html | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index a8b186bc44..294b1445dc 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -9,7 +9,7 @@ // Get your shorts on - this is an array workout! // ## Array Cardio Day 1 - // Some data we can work with + // Some data we can work with here const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index fe85f51a4e..d042f9053a 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -147,6 +147,8 @@ } } + // event listeners + panels.forEach(panel => panel.addEventListener('click', toggleOpen)); panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); From 90d4b77001644d371d828a50ec351192a820a099 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Sun, 18 Dec 2016 19:10:51 -0600 Subject: [PATCH 09/40] Completed Day 5 of JavaScript 30 --- 05 - Flex Panel Gallery/index-START.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index d042f9053a..fe85f51a4e 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -147,8 +147,6 @@ } } - // event listeners - panels.forEach(panel => panel.addEventListener('click', toggleOpen)); panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); From 320a5b1ff88e97b4e81f10e117650197a2bf52c2 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Sun, 18 Dec 2016 19:11:25 -0600 Subject: [PATCH 10/40] Completed Day 4 of JavaScript30 --- 04 - Array Cardio Day 1/index-START.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 294b1445dc..a8b186bc44 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -9,7 +9,7 @@ // Get your shorts on - this is an array workout! // ## Array Cardio Day 1 - // Some data we can work with here + // Some data we can work with const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, From 0dcae90ce63b5f8fb33d9e2256fab614010dcf69 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Tue, 20 Dec 2016 14:51:00 -0600 Subject: [PATCH 11/40] Completed Day 6 of JavaScript30 --- 06 - Type Ahead/index-START.html | 40 ++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..f1869d9927 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,46 @@ From 7052bbd106d3f457fd7ba9a21bcf9ac8c52a763e Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Tue, 20 Dec 2016 14:51:43 -0600 Subject: [PATCH 12/40] Completed Day 5 of JavaScript30 --- 05 - Flex Panel Gallery/index-START.html | 1 - 1 file changed, 1 deletion(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index fe85f51a4e..9411a09b06 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -149,7 +149,6 @@ panels.forEach(panel => panel.addEventListener('click', toggleOpen)); panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); - From 546fd870f0642b4ac0650af3fc4c474770dd7ad8 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Fri, 23 Dec 2016 16:35:08 -0600 Subject: [PATCH 13/40] Completed Day 7 of JavaScript30 --- 07 - Array Cardio Day 2/index-START.html | 62 +++++++++++++++++++----- 1 file changed, 49 insertions(+), 13 deletions(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index bdf6c44415..fae25734bb 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -23,8 +23,10 @@ { text: 'Nice Nice Nice!', id: 542328 } ]; - // Some and Every Checks + // 1. Some and Every Checks // Array.prototype.some() // is at least one person 19? + + // Complicated way of doing it. // const isAdult = people.some(function(person) { // const currentYear = (new Date()).getFullYear(); // if(currentYear - person.year >= 19) { @@ -32,36 +34,70 @@ // } // }); - const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); + // Less complicated way of doing it + // const isAdult = people.some(person => { + // const currentYear = (new Date()).getFullYear(); + // return currentYear - person.year >= 19; + // }); + // EVEN LESS COMPLIDATED WAY OF DOING IT: + const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); console.log({isAdult}); - // Array.prototype.every() // is everyone 19? - const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); - console.log({allAdults}); + // 2. const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); + + const allAdult = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); + console.log({allAdult}); - // Array.prototype.find() + // 3. 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 + // COMPLICATED SOLUTION: + // find the comment with the ID of 823423 + // const comment = comments.find(function(comment) { + // if(comment.id === 823423) { + // return true; + // } + // }) 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 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 + // this first step gives us just the index location within the array with that id const index = comments.findIndex(comment => comment.id === 823423); console.log(index); - // comments.splice(index, 1); - + // now, to delete the object from the array: const newComments = [ ...comments.slice(0, index), - ...comments.slice(index + 1) + ...comments.slice(index + 1), ]; + + + + + + + + // const index = comments.findIndex(comment => comment.id === 823423); + // console.log(index); + + // // comments.splice(index, 1); + + // const newComments = [ + // ...comments.slice(0, index), + // ...comments.slice(index + 1) + // ]; + From 7159b2a1504c7ef6717cf620a1b9cdd273795334 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Wed, 8 Feb 2017 16:07:42 -0600 Subject: [PATCH 14/40] Completed Day 8 of JavaScript30 --- 08 - Fun with HTML5 Canvas/index-START.html | 52 +++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..a5cb59c79f 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,58 @@ - + \ No newline at end of file From 75d260e0a268210169444730f89960e15166ec73 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Tue, 14 Feb 2017 11:27:15 -0600 Subject: [PATCH 21/40] Completed Day 14 of JavaScript30 --- .../index-START.html | 76 ++++++++++++++++--- 1 file changed, 65 insertions(+), 11 deletions(-) diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html index 4da1bac2ea..e0669e3da8 100644 --- a/14 - JavaScript References VS Copying/index-START.html +++ b/14 - JavaScript References VS Copying/index-START.html @@ -8,44 +8,98 @@ From 68151ecedb494be35eeed09a67f31c574771e254 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Wed, 15 Feb 2017 10:27:28 -0600 Subject: [PATCH 22/40] Completed Day 15 of JavaScript30 --- 15 - LocalStorage/index-START.html | 39 +++++++++++++++++++++++++++++- 15 - LocalStorage/style.css | 4 +-- 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html index d444f1d68b..4cfe6977b2 100644 --- a/15 - LocalStorage/index-START.html +++ b/15 - LocalStorage/index-START.html @@ -28,7 +28,44 @@

LOCAL TAPAS

diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css index ea5bab179c..fa719e7e37 100644 --- a/15 - LocalStorage/style.css +++ b/15 - LocalStorage/style.css @@ -1,7 +1,7 @@ html { box-sizing: border-box; - background:url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat; + background:url('https://d3vv6lp55qjaqc.cloudfront.net/items/26432Y0U0G3l0P3N1C1I/restaurant-691397_1280.jpg') center no-repeat; background-size:cover; min-height:100vh; display:flex; @@ -64,7 +64,7 @@ } .plates input:checked + label:before { - content: '🌮'; + content: '🍇'; } .add-items { From c49f0867550e1fb78425fa2141fc675a5dda6b2d Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Wed, 15 Feb 2017 11:04:29 -0600 Subject: [PATCH 23/40] Completed Day 16 of JavaScript 30 --- 16 - Mouse Move Shadow/index-start.html | 26 +++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html index 58a9bba861..cb6b9f0f54 100644 --- a/16 - Mouse Move Shadow/index-start.html +++ b/16 - Mouse Move Shadow/index-start.html @@ -31,6 +31,32 @@

🔥WOAH!

From ee001d95cd7f19786a5fccca814f0a8cf51867c9 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Thu, 16 Feb 2017 10:22:13 -0600 Subject: [PATCH 24/40] Completed Day 17 of JavaScript30 --- 17 - Sort Without Articles/index-START.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index cfaf3e0440..4fe4ee2825 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -45,6 +45,19 @@ From 6927046bd1c73a2201e9912bcbd427cbd8cfc016 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Fri, 24 Feb 2017 14:09:11 -0600 Subject: [PATCH 25/40] Completed Day 18 of JavaScript30 --- .../index-START.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index 3eaee0f3ef..e10f97e204 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 @@ From 7d6f4aa968841e39217d81f4ff22f30e14eaadd5 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Thu, 2 Mar 2017 16:55:39 -0600 Subject: [PATCH 26/40] Completed Day 19 of JavaScript30 --- 19 - Webcam Fun/index.html | 4 +- 19 - Webcam Fun/scripts.js | 103 +++++++++++++++++++++++++++++++++++-- 2 files changed, 101 insertions(+), 6 deletions(-) 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..3b80c7f77d 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -1,5 +1,100 @@ -const video = document.querySelector('.player'); +const video = document.querySelector('.player'); const canvas = document.querySelector('.photo'); -const ctx = canvas.getContext('2d'); -const strip = document.querySelector('.strip'); -const snap = document.querySelector('.snap'); +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 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 + // pixels = redEffect(pixels); + // pixels = rgbSplit(pixels); + pixels = greenScreen(pixels); + ctx.globalAlpha = 0.1; + // 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('images/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; // 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 + 0] + 100; // r + pixels.data[i + 500] = pixels.data[i + 1] - 50; // g + pixels.data[i - 550] = pixels.data[i + 2] * 0.5; // 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 From 20fb76f2bc56156e16f485850c2c98e8c2b0be6b Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Mon, 6 Mar 2017 09:05:46 -0600 Subject: [PATCH 27/40] Completed Day 20 of JavaScript30 --- 05 - Flex Panel Gallery/index-START.html | 2 +- 20 - Speech Detection/index-START.html | 25 ++++++++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 9411a09b06..bb332ec4fa 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -135,7 +135,7 @@ From c771e4308aa1f0faedfca9be783b6f66d0b06048 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Wed, 8 Mar 2017 14:26:02 -0600 Subject: [PATCH 28/40] Completed Day 21 of JavaScript30 --- 21 - Geolocation/index-START.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html index d794c144ba..0f2ddecf2a 100644 --- a/21 - Geolocation/index-START.html +++ b/21 - Geolocation/index-START.html @@ -65,10 +65,8 @@

speed.textContent = data.coords.speed; arrow.style.transform = `rotate(${data.coords.heading}deg)`; }, (err) => { - console.err(err); - alert('HEY! YOU GOTTA ALLOW THAT TO HAPPEN!!!'); + console.error(err); }); - From 30bc0cdee1674fa03df3bc21522e657c76235cfc Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Wed, 8 Mar 2017 14:42:59 -0600 Subject: [PATCH 29/40] Completed Day 22 of JavaScript30 --- .../index-START.html | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html index 8476112b5e..ae91a73d7f 100644 --- a/22 - Follow Along Link Highlighter/index-START.html +++ b/22 - Follow Along Link Highlighter/index-START.html @@ -26,7 +26,28 @@

From eb191083473cdef443917efb7da9cdb60bf0e068 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Thu, 9 Mar 2017 09:19:36 -0600 Subject: [PATCH 30/40] Completed Day 23 of JavaScript30 --- 23 - Speech Synthesis/index-START.html | 34 ++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html index e890008d36..1b73b944c5 100644 --- a/23 - Speech Synthesis/index-START.html +++ b/23 - Speech Synthesis/index-START.html @@ -35,6 +35,40 @@

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() { + console.log(this.name, this.value); + 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)); From 756c6f3033031c348294bcaf53cbde96c9c99245 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Thu, 9 Mar 2017 09:53:46 -0600 Subject: [PATCH 31/40] Completed Day 24 of JavaScript30 --- 24 - Sticky Nav/index-START.html | 45 ++++++++++++++------------------ 24 - Sticky Nav/style-START.css | 17 ++++++------ 2 files changed, 28 insertions(+), 34 deletions(-) diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html index 4982537eea..2e5961192c 100644 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index-START.html @@ -2,8 +2,8 @@ - Sticky Nav - + Document + @@ -23,7 +23,6 @@

A story about getting lost.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

@@ -34,41 +33,35 @@

A story about getting lost.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

- -

at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

- - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

- + window.addEventListener('scroll', fixNav); + + + diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index 19961112b4..b551473357 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -23,10 +23,11 @@ body { transition: transform 0.5s; } -.fixed-nav .site-wrap { +body.fixed-nav .site-wrap { transform: scale(1); } + header { text-align: center; height:50vh; @@ -52,9 +53,9 @@ nav { z-index: 1; } -.fixed-nav nav { +body.fixed-nav nav { position: fixed; - box-shadow: 0 5px rgba(0,0,0,0.1) + box-shadow:0 5px 0 rgba(0,0,0,0.1); } nav ul { @@ -76,19 +77,19 @@ li.logo { max-width:0; overflow: hidden; background: white; - transition: all .5s; + transition: all 0.5s; font-weight: 600; font-size: 30px; } -.fixed-nav li.logo { - max-width:500px; -} - li.logo a { color:black; } +.fixed-nav li.logo { + max-width:500px; +} + nav a { text-decoration: none; padding:20px; From 4362a2064b0a4c820b453a759bb3f61b57131293 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Mon, 13 Mar 2017 09:16:54 -0500 Subject: [PATCH 32/40] Completed Day 25 of JavaScript30 --- .../index-START.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) 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..e89ede40d5 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html @@ -39,7 +39,23 @@ From 031132082a6a278d02b6ebbb8f2863efdecad046 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Tue, 14 Mar 2017 16:24:25 -0500 Subject: [PATCH 33/40] Completed Day 26 of JavaScript30 --- 26 - Stripe Follow Along Nav/index-START.html | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html index 9780d0d1ac..f895629784 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -208,6 +208,38 @@

Cool

From 53004acc306c078183e1e023f4bf3b6d64090709 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Tue, 14 Mar 2017 17:27:43 -0500 Subject: [PATCH 34/40] Completed Day 16 of JavaScript30 --- 16 - Mouse Move Shadow/index-start.html | 1 + 1 file changed, 1 insertion(+) diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html index cb6b9f0f54..0b3a34ec9f 100644 --- a/16 - Mouse Move Shadow/index-start.html +++ b/16 - Mouse Move Shadow/index-start.html @@ -57,6 +57,7 @@

🔥WOAH!

}; hero.addEventListener('mousemove', shadow); + From 1a07bb16685bebf974fef1df8ece5b757d7fe46b Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Tue, 14 Mar 2017 17:28:24 -0500 Subject: [PATCH 35/40] Completed Day 5 of JavaScript30 --- 05 - Flex Panel Gallery/index-START.html | 1 + 1 file changed, 1 insertion(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index bb332ec4fa..a4b46bf517 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -146,6 +146,7 @@ this.classList.toggle('open-active'); } } + panels.forEach(panel => panel.addEventListener('click', toggleOpen)); panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); From 7cb5166a5a3609f246a6a98512fd8f5d2b85b2ec Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Wed, 15 Mar 2017 09:40:55 -0500 Subject: [PATCH 36/40] Completed Day 27 of JavaScript30 --- 27 - Click and Drag/index-START.html | 31 +++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..c0bcd162a9 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -6,7 +6,7 @@ -
+
01
02
03
@@ -35,6 +35,35 @@
From aca8d93fd3c4289a0af49402bef5f6aa6474eea3 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Wed, 15 Mar 2017 10:00:22 -0500 Subject: [PATCH 37/40] Completed Day 28 of JavaScript30 --- 28 - Video Speed Controller/index-START.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html index c4cbd4259a..8f0ad750c0 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index-START.html @@ -15,6 +15,21 @@
From 603bbc195747d7244752b316a71fc93eccb341d5 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Mon, 20 Mar 2017 10:05:23 -0500 Subject: [PATCH 38/40] Completed Day 29 of JavaScript30 --- 29 - Countown Timer/scripts-START.js | 55 ++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/29 - Countown Timer/scripts-START.js b/29 - Countown Timer/scripts-START.js index e69de29bb2..1cd5e77b47 100644 --- a/29 - Countown Timer/scripts-START.js +++ b/29 - Countown Timer/scripts-START.js @@ -0,0 +1,55 @@ +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) { + // Clear any existing timers + 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); + // Check if we should stop it! + if (secondsLeft < 0) { + clearInterval(countdown); + return; + } + + // Display it + displayTimeLeft(secondsLeft); + }, 1000); +} + +function displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); + const remainderSeconds = seconds % 60; + const display = `${minutes}: ${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`; + document.title = display; + timerDisplay.textContent = display; + console.log({minutes}); +} + +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}`; +} + +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 = this.minutes.value; + timer(mins * 60); + this.reset(); +}); \ No newline at end of file From 553f11bdef68f361bb2a85bce0a7ae65e496876f Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Mon, 20 Mar 2017 10:25:43 -0500 Subject: [PATCH 39/40] Completed Day 30 ofJavaScript30 --- 30 - Whack A Mole/index-START.html | 48 ++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..0f179b1b1e 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -36,6 +36,54 @@

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) { + console.log('Ah nah thats the same one bud'); + 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; + peep(); + setTimeout(() => timeUp = true, 10000); + score = 0; + } + + function bonk(e) { + if(!e.isTrusted) return; // cheater! + score++; + this.classList.remove('up'); + scoreBoard.textContent = score; + } + + moles.forEach(mole => mole.addEventListener('click', bonk)); From 5a1ae84e6a4cd235de71c8e7a0d0aeb43aba29c4 Mon Sep 17 00:00:00 2001 From: Joey Reyes Date: Mon, 20 Mar 2017 10:26:36 -0500 Subject: [PATCH 40/40] Completed Day 30 of JavaScript30 --- 30 - Whack A Mole/index-START.html | 1 + 1 file changed, 1 insertion(+) diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 0f179b1b1e..797dd990ad 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -83,6 +83,7 @@

Whack-a-mole! 0

scoreBoard.textContent = score; } + moles.forEach(mole => mole.addEventListener('click', bonk));