From 04ae1b870deb6a29e6179e9054622277399508b9 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 16 Dec 2016 12:36:15 -0600 Subject: [PATCH 01/58] Cloning START file into index.html for Day 1 --- 01 - JavaScript Drum Kit/index.html | 66 +++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index.html diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..4070d32767 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,66 @@ + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + From 065bf2003ebda314dc0bdd9fdee8b02baca4bb38 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 16 Dec 2016 12:36:58 -0600 Subject: [PATCH 02/58] Day 1 script written --- 01 - JavaScript Drum Kit/index.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 4070d32767..2ac5602361 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -58,6 +58,30 @@ From 802d90d49664fcd22902daecad88adda47044db0 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 16 Dec 2016 12:37:35 -0600 Subject: [PATCH 03/58] Day 2 index.html creation --- 02 - JS + CSS Clock/index.html | 73 ++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 02 - JS + CSS Clock/index.html diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html new file mode 100644 index 0000000000..2712384201 --- /dev/null +++ b/02 - JS + CSS Clock/index.html @@ -0,0 +1,73 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + From 62b27224fe16e57f123e4fbccaf23637a00d329c Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 16 Dec 2016 13:07:53 -0600 Subject: [PATCH 04/58] Day 2 solution --- 02 - JS + CSS Clock/index.html | 99 ++++++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 2712384201..edf5c3e625 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -61,13 +61,112 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0,1.73,.21,1.24); + } + + .hour-hand { + width: 30%; + left: 20%; } From 3e5fc65d434ee9c21e7c4b6039c70eacbd0cddec Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 16 Dec 2016 13:08:17 -0600 Subject: [PATCH 05/58] Day 3 clone START file into index.html --- 03 - CSS Variables/index.html | 54 +++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 03 - CSS Variables/index.html diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..7171607a8b --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,54 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + From 6ace8679d1cf0128b4baabf43b3057da1d846221 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 16 Dec 2016 13:09:30 -0600 Subject: [PATCH 06/58] Day 3 solution --- 03 - CSS Variables/index.html | 43 +++++++++++++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html index 7171607a8b..4bd0e6cc1b 100644 --- a/03 - CSS Variables/index.html +++ b/03 - CSS Variables/index.html @@ -5,7 +5,7 @@ Scoped CSS Variables and JS -

Update CSS Variables with JS

+

Update CSS Variables with JS

@@ -22,10 +22,28 @@

Update CSS Variables with JS

From 1d19fa3ef131e881b1a994791e8dda6977785ae7 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 16 Dec 2016 13:09:55 -0600 Subject: [PATCH 07/58] Day 4 START file copied to index.html --- 04 - Array Cardio Day 1/index.html | 59 ++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 04 - Array Cardio Day 1/index.html diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..317883a4c1 --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,59 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From 115c1f681aa497a4a8b5ccc0355f4ab742c6a712 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 16 Dec 2016 13:10:56 -0600 Subject: [PATCH 08/58] Day 4 solution --- 04 - Array Cardio Day 1/index.html | 84 +++++++++++++++++++++++++++--- 1 file changed, 77 insertions(+), 7 deletions(-) diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html index 317883a4c1..fbda117486 100644 --- a/04 - Array Cardio Day 1/index.html +++ b/04 - Array Cardio Day 1/index.html @@ -31,29 +31,99 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's - + console.log( + "1. Filter the list of inventors for those who were born in the 1500's" + ); + const filtered = inventors.filter(function (item) { + return (1500 <= item.year && item.year < 1600); + }) + console.table(filtered); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names - + console.log( + "2. Give us an array of the inventors' first and last names" + ); + const inventor_names = inventors.map(function (item) { + return { first: item.first, last: item.last }; + }); + console.table(inventor_names); + // Having watched the video now I realize what is meant here is an array of + // full names as strings. Not first and last names as keys in an object. + console.log( + "Full names as single strings." + ); + const fullnames = inventors.map(i => i.first + " " + i.last); + console.log(fullnames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest - + console.log( + "3. Sort the inventors by birthdate, oldest to youngest" + ); + const birth_sorted = inventors.sort((a, b) => a.year - b.year); + console.table(birth_sorted); // Array.prototype.reduce() // 4. How many years did all the inventors live? - + console.log( + "4. How many years did all the inventors live?" + ); + const total_years = inventors.reduce( + function (accumulator, currentValue, currentIndex, self) { + return (accumulator + (currentValue.passed - currentValue.year)); + }, + 0); + console.log(total_years); // 5. Sort the inventors by years lived - + console.log( + "5. Sort the inventors by years lived" + ); + const age_sorted = inventors.sort(function (a, b) { + return (b.passed - b.year) - (a.passed - a.year); + }); + console.table(age_sorted); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + console.log( + "6. create a list of Boulevards in Paris that contain 'de' anywhere in the name" + ); +// Array.from( +// document.querySelector('.mw-category').querySelectorAll('a') +// ).map(link => link.textContent) +// .filter(name => name.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name - + console.log( + "7. Sort the people alphabetically by last name" + ); + console.log( + `It's already sorted alphabetically by last name. What he actually wants + is to sort by first name, so we gotta split the individual strings at the + commas.` + ); + const what_wes_wants = people.sort((a, b) => { + const [al, af] = a.split(', '); + const [bl, bf] = b.split(', '); + return af > bf ? 1 : -1; + }); + console.log(what_wes_wants); // 8. Reduce Exercise // Sum up the instances of each of these +// console.log( +// "8. 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 word_counts = data.reduce( + function (accumulator, currentValue, currentIndex, self) { + if (accumulator.hasOwnProperty(currentValue)) { + accumulator[currentValue] += 1; + } else { + accumulator[currentValue] = 1; + } + return accumulator; + }, + {}); + console.log(word_counts); From 73d06835dc31b8865e1572dcf5ca9e7d9ae5c481 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 16 Dec 2016 13:11:19 -0600 Subject: [PATCH 09/58] Day 5 START file copied to index.html --- 05 - Flex Panel Gallery/index.html | 116 +++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 05 - Flex Panel Gallery/index.html diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html new file mode 100644 index 0000000000..e1d643ad5c --- /dev/null +++ b/05 - Flex Panel Gallery/index.html @@ -0,0 +1,116 @@ + + + + + Flex Panels 💪 + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + From ba4f72bd6215f057a033537ba96891802438b96f Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 16 Dec 2016 14:15:22 -0600 Subject: [PATCH 10/58] Day 5 solution --- 05 - Flex Panel Gallery/index.html | 37 +++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html index e1d643ad5c..7435d617f1 100644 --- a/05 - Flex Panel Gallery/index.html +++ b/05 - Flex Panel Gallery/index.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,10 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + display: flex; /* nested flexbox! */ + flex-direction: column; } @@ -50,12 +55,25 @@ .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } + /* Flex Children */ .panel > * { margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; /* MOAR flexeption! */ + justify-content: center; + align-items: center; } + /* top div within each panel exist stage top */ + .panel > *:first-child { transform: translateY(-100%); } + /* bottom div within each panel exist stage bottom */ + .panel > *:last-child { transform: translateY(100%); } + /* class for JS trickery */ + .panel.open-active > *:first-child, + .panel.open-active > *:last-child { transform: translateY(0); } + .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; @@ -68,6 +86,7 @@ .panel.open { font-size:40px; + flex: 5; } .cta { @@ -107,7 +126,23 @@
From 92df783f139c63b01ab8eaaec4e7636d5b93458f Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 19 Dec 2016 10:41:25 -0600 Subject: [PATCH 11/58] Day 6 index file created from START file --- 06 - Type Ahead/index.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 06 - Type Ahead/index.html diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..1436886918 --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,22 @@ + + + + + Type Ahead 👀 + + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + + From 6cc9b85826a6bd9b068ad11dc0c87dc4ddd3692f Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 19 Dec 2016 13:12:04 -0600 Subject: [PATCH 12/58] Day 6 complete MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://cdn.meme.am/instances/500x/61515567.jpg This solution _looks_ huge but it’s mostly due to verbose comment blocks on each function. Ignoring comments, I’m within a handful of lines of Wes’s solution. --- 06 - Type Ahead/index.html | 97 +++++++++++++++++++++++++++++++++++++- 1 file changed, 95 insertions(+), 2 deletions(-) diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html index 1436886918..07a48457ca 100644 --- a/06 - Type Ahead/index.html +++ b/06 - Type Ahead/index.html @@ -15,8 +15,101 @@ From a6d169e99cd195dc6d88cf4256506ade57e6d978 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 19 Dec 2016 13:45:44 -0600 Subject: [PATCH 13/58] Day 7 index file created from START file --- 07 - Array Cardio Day 2/index.html | 41 ++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 07 - Array Cardio Day 2/index.html diff --git a/07 - Array Cardio Day 2/index.html b/07 - Array Cardio Day 2/index.html new file mode 100644 index 0000000000..206ec31aa0 --- /dev/null +++ b/07 - Array Cardio Day 2/index.html @@ -0,0 +1,41 @@ + + + + + Array Cardio 💪💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From 346587a3eb265a293965effb5552133a3ff0fc6e Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 19 Dec 2016 14:37:08 -0600 Subject: [PATCH 14/58] Day 7 complete --- 07 - Array Cardio Day 2/index.html | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/07 - Array Cardio Day 2/index.html b/07 - Array Cardio Day 2/index.html index 206ec31aa0..9472e5c732 100644 --- a/07 - Array Cardio Day 2/index.html +++ b/07 - Array Cardio Day 2/index.html @@ -24,18 +24,32 @@ { text: 'Nice Nice Nice!', id: 542328 } ]; + age = person => (new Date().getFullYear() - person.year); + idCheck = (obj, num) => obj.id === num; // Some and Every Checks // Array.prototype.some() // is at least one person 19? + console.log('Both some() and every() are special applications of reduce()'); + const someAdults = people.some(person => (age(person) >= 19)); + console.log({someAdults}); + const rSomeAdults = people.reduce((acc, p) => acc || (age(p) >= 19), false); + console.log({rSomeAdults}); // Array.prototype.every() // is everyone 19? - + const everyAdults = people.every(person => (age(person) >= 19)); + console.log({everyAdults}); + const rEveryAdults = people.reduce((acc, p) => acc && (age(p) >= 19), true); + console.log({rEveryAdults}); // 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 myComment = comments.find(c => idCheck(c, 823423)); + console.log({myComment}); // Array.prototype.findIndex() + const myIndex = comments.findIndex(c => idCheck(c, 823423)); + console.log({myIndex}); // Find the comment with this ID // delete the comment with the ID of 823423 - + const deletedComment = comments.filter(c => ! idCheck(c, 823423)); + console.log(deletedComment); From 695c4c125887e01c825b074750080a94710df75a Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 19 Dec 2016 14:37:45 -0600 Subject: [PATCH 15/58] Day 8 index created from START file --- 08 - Fun with HTML5 Canvas/index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 08 - Fun with HTML5 Canvas/index.html diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html new file mode 100644 index 0000000000..37c148df07 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index.html @@ -0,0 +1,19 @@ + + + + + HTML5 Canvas + + + + + + + + + From 91dd3827dc8bd7ae4139000edacc02f4e5faa276 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Tue, 20 Dec 2016 15:32:54 -0600 Subject: [PATCH 16/58] Day 8 complete --- 08 - Fun with HTML5 Canvas/index.html | 81 +++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html index 37c148df07..4576634854 100644 --- a/08 - Fun with HTML5 Canvas/index.html +++ b/08 - Fun with HTML5 Canvas/index.html @@ -7,6 +7,87 @@ + +
+
+ +

This is an inbox layout.

+
+
+ +

Check one item

+
+
+ +

Hold down your Shift key

+
+
+ +

Check a lower item

+
+
+ +

Everything inbetween should also be set to checked

+
+
+ +

Try do it with out any libraries

+
+
+ +

Just regular JavaScript

+
+
+ +

Good Luck!

+
+
+ +

Don't forget to tweet your result!

+
+
+ + + + From e272af730792c65d63078b8d794bc98fbef486ab Mon Sep 17 00:00:00 2001 From: dap6000 Date: Wed, 21 Dec 2016 15:12:59 -0600 Subject: [PATCH 20/58] Day 10 complete MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I didn’t use Event.shiftKey (because I didn’t know it was a thing) and I swapped out the divs for labels. However, shift + clicking on a label doesn’t seem to work the same as shift + clicking on a checkbox directly. Even if I totally remove the JS from this file. Odd. --- .../index.html | 58 +++++++++++++------ 1 file changed, 39 insertions(+), 19 deletions(-) diff --git a/10 - Hold Shift and Check Checkboxes/index.html b/10 - Hold Shift and Check Checkboxes/index.html index eb7ed310bb..731c201df4 100644 --- a/10 - Hold Shift and Check Checkboxes/index.html +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -65,45 +65,65 @@ -->
-
+
-
+ +
-
+ +
-
+ +
-
+ +
-
+ +
-
+ +
-
+ +
-
+ +
-
+ + From fa172b66f8c921c720de6b2e11f62c71f1938a64 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Thu, 22 Dec 2016 12:32:14 -0600 Subject: [PATCH 21/58] Day 11 complete --- 11 - Custom Video Player/scripts.js | 49 +++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..ea7746a542 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,49 @@ +/* We have a query selector, climbing in your DOM, snatching your elements up*/ +const player = document.querySelector('.player'); +const video = player.querySelector('.viewer'); +const progress = player.querySelector('.progress'); +const pgBar = player.querySelector('.progress__filled'); +const toggle = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]'); +const ranges = player.querySelectorAll('.player__slider'); + +/* Fun functions to call and invoke */ +function togglePlay() { + video.paused ? video.play() : video.pause(); +} +function toggleButton() { + video.paused ? toggle.textContent = '►' : toggle.textContent = '❚ ❚'; +} +function skip() { video.currentTime += parseFloat(this.dataset.skip); } +function handleRangeUpdate() { video[this.name] = this.value; } +function handleProgress() { + pgBar.style.flexBasis = ((video.currentTime / video.duration) * 100) + '%'; +} +function scrub(event) { + const scrubTime = (event.offsetX / progress.offsetWidth) * video.duration; + video.currentTime = scrubTime; +} +function moveScrub(event) { if (mousedown) { scrub(event); } } +function md(event) { mousedown = true; } +function mu(event) { mousedown = false; } + +/* Be vewwy vewwy quiet, I'm hunting events */ +video.addEventListener('click', togglePlay); +video.addEventListener('play', toggleButton); +video.addEventListener('pause', toggleButton); +video.addEventListener('timeupdate', handleProgress); + +toggle.addEventListener('click', togglePlay); + +skipButtons.forEach(button => button.addEventListener('click', skip)); + +ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); +// In the video Wes also calls handleRangeUpdate on mousemove but I don't think +// that's the behavior we want for the sliders. Only on change. + +let mousedown = false; +progress.addEventListener('click', scrub); +progress.addEventListener('mousemove', moveScrub); +progress.addEventListener('mousedown', md); +// We need to listen for our mouseup event _anywhere_ in the window. +window.addEventListener('mouseup', mu); From 60f636411aa5e130432bf103a67ef9d76ec80cec Mon Sep 17 00:00:00 2001 From: dap6000 Date: Thu, 22 Dec 2016 13:43:41 -0600 Subject: [PATCH 22/58] Day 12 complete --- 12 - Key Sequence Detection/index.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 12 - Key Sequence Detection/index.html diff --git a/12 - Key Sequence Detection/index.html b/12 - Key Sequence Detection/index.html new file mode 100644 index 0000000000..2a01357cdd --- /dev/null +++ b/12 - Key Sequence Detection/index.html @@ -0,0 +1,24 @@ + + + + + Key Detection + + + + + + From 0f3666126d1860fce0c3fc28d450216dc2bf29c3 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Thu, 22 Dec 2016 13:57:56 -0600 Subject: [PATCH 23/58] Day 12 update, secrete is now an array Arguably easier to deal with keys with multi-character values this wahy. Interestingly, the cornify.js script has a check for the Konami code baked in. And it uses keycodes. *But* it concats those into a string. That section of code is in turn based on another project, hosted on GitHub here: https://github.com/snaptortoise/konami-js --- 12 - Key Sequence Detection/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/12 - Key Sequence Detection/index.html b/12 - Key Sequence Detection/index.html index 2a01357cdd..51bc3256be 100644 --- a/12 - Key Sequence Detection/index.html +++ b/12 - Key Sequence Detection/index.html @@ -8,13 +8,14 @@ + + + + + From 34ee0388adb4d88af31c3cbcf4b9d701a373621f Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 30 Dec 2016 07:59:22 -0600 Subject: [PATCH 25/58] Day 13 Complete I wrote a first pass following similar logic to Wes. Then I wanted to challenge myself to rewrite it using one liner arrow functions and filter. Maybe I should have committed both versions. --- 13 - Slide in on Scroll/index.html | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/13 - Slide in on Scroll/index.html b/13 - Slide in on Scroll/index.html index 0b9fb8fccb..8ac7b3f2f7 100644 --- a/13 - Slide in on Scroll/index.html +++ b/13 - Slide in on Scroll/index.html @@ -58,6 +58,33 @@

Slide in on Scroll

}; } + const sliders = Array.from(document.querySelectorAll('.slide-in')); + + // image has active class + isActive = img => img.classList.contains('active'); + // bottom of image is higher than top of window + isOffTop = img => (img.offsetTop + img.height < window.scrollY); + // top of image is below bottom of window + isOffBottom = img => (img.offsetTop > window.scrollY + window.innerHeight); + // no part of the image is within the viewport + isOffScreen = img => (isOffTop(img) || isOffBottom(img)); + // some part of the image is within the viewport + isOnScreen = img => (! isOffScreen(img)); + // image currently in a state we don't wanna allow + needsClassChange = img => ( + (isActive(img) && isOffScreen(img)) + || + (isOnScreen(img) && ! isActive(img)) + ); + // just a bit shorter + activeToggle = img => img.classList.toggle('active'); + + function scrollHandler() { + sliders.filter(needsClassChange).forEach(activeToggle); + } + + window.addEventListener('scroll', debounce(scrollHandler)); + + + + + From ba7cb7e99a9a6e2dcdea3c91d25f5233fab34266 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 13 Jan 2017 09:39:27 -0600 Subject: [PATCH 30/58] Adding some notes to day 14 --- 14 - JavaScript References VS Copying/index.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/14 - JavaScript References VS Copying/index.html b/14 - JavaScript References VS Copying/index.html index f3c33ff0e8..adfc6ef68a 100644 --- a/14 - JavaScript References VS Copying/index.html +++ b/14 - JavaScript References VS Copying/index.html @@ -86,16 +86,21 @@ facebook: 'wesbos.developer' } }; - console.log(wes); const dev = Object.assign({}, wes); dev.social.twitter = '@Pencilvestyr' console.log(wes, dev); + console.log('Shallow but performant'); const dev2 = JSON.parse(JSON.stringify(wes)); - dev2.social.twitter = '@Hamurai' + dev2.social.twitter = '@Hamurai'; console.log(wes, dev2); + console.log('Double encoding via JSON is super ineffcient.'); + console.log('But you get deep cloning of attributes out of it.'); + console.log('However, if your object has any methods on it, your SOL.'); + console.log('JSON doesn\'t grok methods.'); + From 5e027ac0a4a759dbfa4ddac95eee14d4a457d4da Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 13 Jan 2017 10:15:20 -0600 Subject: [PATCH 31/58] Day 16 complete --- 16 - Mouse Move Shadow/index.html | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/16 - Mouse Move Shadow/index.html b/16 - Mouse Move Shadow/index.html index 58a9bba861..e53cea2097 100644 --- a/16 - Mouse Move Shadow/index.html +++ b/16 - Mouse Move Shadow/index.html @@ -31,6 +31,37 @@

🔥WOAH!

From ceb0a8d706180fb58a3cd18dc9645f6b7dc49746 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 13 Jan 2017 11:09:33 -0600 Subject: [PATCH 32/58] Day 15 complete with bonus --- 15 - LocalStorage/index.html | 84 +++++++++++++++++++++++++++++++++++- 1 file changed, 82 insertions(+), 2 deletions(-) diff --git a/15 - LocalStorage/index.html b/15 - LocalStorage/index.html index d444f1d68b..f51dcf47c3 100644 --- a/15 - LocalStorage/index.html +++ b/15 - LocalStorage/index.html @@ -28,11 +28,91 @@

LOCAL TAPAS

- From 9354b828b52ec0042018efcbdf19155091e96220 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 13 Jan 2017 11:10:05 -0600 Subject: [PATCH 33/58] Day 17 index file created from start file --- 17 - Sort Without Articles/index.html | 52 +++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 17 - Sort Without Articles/index.html diff --git a/17 - Sort Without Articles/index.html b/17 - Sort Without Articles/index.html new file mode 100644 index 0000000000..cfaf3e0440 --- /dev/null +++ b/17 - Sort Without Articles/index.html @@ -0,0 +1,52 @@ + + + + + Sort Without Articles + + + + + +
    + + + + + From 043c4cc7d107e5e2a77051a4446268ce0f553fca Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 13 Jan 2017 11:38:38 -0600 Subject: [PATCH 34/58] Day 17 done --- 17 - Sort Without Articles/index.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/17 - Sort Without Articles/index.html b/17 - Sort Without Articles/index.html index cfaf3e0440..c08c50fead 100644 --- a/17 - Sort Without Articles/index.html +++ b/17 - Sort Without Articles/index.html @@ -45,6 +45,22 @@ From 975e4f97dba50539e94587a8a93dfb0b8e6d726a Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 13 Jan 2017 11:40:09 -0600 Subject: [PATCH 35/58] Day 18 index file created from start file --- 18 - Adding Up Times with Reduce/index.html | 187 ++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 18 - Adding Up Times with Reduce/index.html diff --git a/18 - Adding Up Times with Reduce/index.html b/18 - Adding Up Times with Reduce/index.html new file mode 100644 index 0000000000..3eaee0f3ef --- /dev/null +++ b/18 - Adding Up Times with Reduce/index.html @@ -0,0 +1,187 @@ + + + + + Videos + + +
      +
    • + Video 1 +
      • +
    • + Video 2 +
      • +
    • + Video 3 +
      • +
    • + Video 4 +
      • +
    • + Video 5 +
      • +
    • + Video 6 +
      • +
    • + Video 7 +
      • +
    • + Video 8 +
      • +
    • + Video 9 +
      • +
    • + Video 10 +
      • +
    • + Video 11 +
      • +
    • + Video 12 +
      • +
    • + Video 13 +
      • +
    • + Video 14 +
      • +
    • + Video 15 +
      • +
    • + Video 16 +
      • +
    • + Video 17 +
      • +
    • + Video 18 +
      • +
    • + Video 19 +
      • +
    • + Video 20 +
      • +
    • + Video 21 +
      • +
    • + Video 22 +
      • +
    • + Video 23 +
      • +
    • + Video 24 +
      • +
    • + Video 25 +
      • +
    • + Video 26 +
      • +
    • + Video 27 +
      • +
    • + Video 28 +
      • +
    • + Video 29 +
      • +
    • + Video 30 +
      • +
    • + Video 31 +
      • +
    • + Video 32 +
      • +
    • + Video 33 +
      • +
    • + Video 34 +
      • +
    • + Video 35 +
      • +
    • + Video 36 +
      • +
    • + Video 37 +
      • +
    • + Video 38 +
      • +
    • + Video 39 +
      • +
    • + Video 40 +
      • +
    • + Video 41 +
      • +
    • + Video 42 +
      • +
    • + Video 43 +
      • +
    • + Video 44 +
      • +
    • + Video 45 +
      • +
    • + Video 46 +
      • +
    • + Video 47 +
      • +
    • + Video 48 +
      • +
    • + Video 49 +
      • +
    • + Video 50 +
      • +
    • + Video 51 +
      • +
    • + Video 52 +
      • +
    • + Video 53 +
      • +
    • + Video 54 +
      • +
    • + Video 55 +
      • +
    • + Video 56 +
      • +
    • + Video 57 +
      • +
    • + Video 58 +
      • + + + + From e60b330c252b0d232fbeafe096be90fb5b5c3113 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 13 Jan 2017 12:18:59 -0600 Subject: [PATCH 36/58] Day 18 complete --- 18 - Adding Up Times with Reduce/index.html | 36 +++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/18 - Adding Up Times with Reduce/index.html b/18 - Adding Up Times with Reduce/index.html index 3eaee0f3ef..e446b62519 100644 --- a/18 - Adding Up Times with Reduce/index.html +++ b/18 - Adding Up Times with Reduce/index.html @@ -182,6 +182,42 @@ From 0cbc3c3b05c0d67fffa4ab12618f45c079f000fc Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 13 Jan 2017 14:38:59 -0600 Subject: [PATCH 37/58] Day 19 complete --- 19 - Webcam Fun/index.html | 11 ++- 19 - Webcam Fun/scripts.js | 161 +++++++++++++++++++++++++++++++++++++ 2 files changed, 169 insertions(+), 3 deletions(-) diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..6c566df3f2 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -9,8 +9,13 @@
      - - +
      diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..b88dbabfa0 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,164 @@ const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); +const rgb = document.querySelector('.rgb'); +const booth = document.querySelector('.photobooth'); + +let videoFilter = noFilter; +const ghostingValue = 1.0; + +function getVideo() { + navigator.mediaDevices.getUserMedia({ video: true, audio: false }) + .then(stream => { + video.src = window.URL.createObjectURL(stream); + video.play(); + }) + .catch(error => console.error("Oh snap!", error)); +} + +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 = videoFilter(pixels); + ctx.globalAlpha = ghostingValue; + // 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 dataURI = canvas.toDataURL('image/jpeg'); + const link = document.createElement('a'); + link.href = dataURI; + link.setAttribute('download', 'handsome'); + link.innerHTML = `Video still`; + strip.insertBefore(link, strip.firsChild); +} + +function noFilter(pixels) { return me(pixels); } +me = i => i; +plus = x => i => i + x; +minus = x => i => i - x; +multiply = x => i => i * x; +divide = x => i => i / x; +redIndex = me; +greenIndex = plus(1); +blueIndex = plus(2); +alphaIndex = plus(3); +/** + * pixels - our pixels for the video filter effect + * all other params are functions + * params beginning with r deal with the Red channel + * params beginning with g deal with the Green channel + * params beginning with g deal with the Blue channel + * params beginning with a deal with the Alpha channel + * params ending in i take the iterator from the for loop as a param and return + * an index number for use in the pixel data array + * params ending in t are transformation functions meant to consume a value from + * the pixel data array and transform it into some new value + * the middle letter for the 3 letter params deal with direction + * r for Right and l for Left + * the line for the Red channel can be read as: + * Choose a value from the pixel data array using the index from our Red Right + * Index function + * Calcualte a new value from the selected value using the Red Transformation + * function + * Store the newly calculated value in our pixel data array at the index + * indicated by our Red Left Index function + */ +function simpleFilter(pixels, rli, rri, rt, gli, gri, gt, bli, bri, bt, ali, ari, at) { + for(let i = 0; i < pixels.data.length; i+=4) { + pixels.data[rli(i)] = rt(pixels.data[rri(i)]); // Red + pixels.data[gli(i)] = gt(pixels.data[gri(i)]); // Green + pixels.data[bli(i)] = bt(pixels.data[bri(i)]); // Blue + pixels.data[ali(i)] = at(pixels.data[ari(i)]); // Alpha + } + return pixels; +} + +function redEffect(pixels) { + return simpleFilter( + pixels, + redIndex, redIndex, plus(200), + greenIndex, greenIndex, minus(50), + blueIndex, blueIndex, multiply(0.5), + alphaIndex, alphaIndex, me + ); +} +function rgbSplit(pixels) { + return simpleFilter( + pixels, + minus(150), redIndex, me, + plus(500), greenIndex, me, + minus(550), blueIndex, me, + alphaIndex, alphaIndex, me + ); +} +function myFilter(pixels) { + return simpleFilter( + pixels, + redIndex, greenIndex, me, + greenIndex, blueIndex, me, + blueIndex, redIndex, me, + alphaIndex, alphaIndex, me + ); +} +function greenScreen(pixels) { + const levels = {}; + + rgb.querySelectorAll('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; +} + +function handleButtons(event) { + if (event.target.matches('#TakePhoto')) { + takePhoto(); + } else if (event.target.matches('#RedEffect')) { + videoFilter = redEffect; + } else if (event.target.matches('#SplitEffect')) { + videoFilter = rgbSplit; + } else if (event.target.matches('#GreenscreenEffect')) { + videoFilter = greenScreen; + } else if (event.target.matches('#ClearEffect')) { + videoFilter = noFilter; + } else if (event.target.matches('#MyEffect')) { + videoFilter = myFilter; + } // else do nothing +} + +getVideo(); +video.addEventListener('canplay', paintToCanavas); +booth.addEventListener('click', handleButtons); From 621c16eecd9abeb54b5406049755a463131b9da1 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 13 Jan 2017 14:58:44 -0600 Subject: [PATCH 38/58] Day 20 index file created --- 20 - Speech Detection/index.html | 60 ++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 20 - Speech Detection/index.html diff --git a/20 - Speech Detection/index.html b/20 - Speech Detection/index.html new file mode 100644 index 0000000000..d3395cca35 --- /dev/null +++ b/20 - Speech Detection/index.html @@ -0,0 +1,60 @@ + + + + + Speech Detection + + + +
      +
      + + + + + + + + From 9182847ff0d9e11218884ffe8f5c4e6234c71781 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Fri, 13 Jan 2017 15:18:17 -0600 Subject: [PATCH 39/58] Day 20 complete --- 20 - Speech Detection/index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/20 - Speech Detection/index.html b/20 - Speech Detection/index.html index d3395cca35..d668d6e82d 100644 --- a/20 - Speech Detection/index.html +++ b/20 - Speech Detection/index.html @@ -11,8 +11,27 @@ From 25e0b116db114ec018adbe6e935cf88e775715d7 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 14:42:37 -0600 Subject: [PATCH 40/58] Day 21 index file created --- 21 - Geolocation/index.html | 62 +++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 21 - Geolocation/index.html diff --git a/21 - Geolocation/index.html b/21 - Geolocation/index.html new file mode 100644 index 0000000000..a1b981b1cd --- /dev/null +++ b/21 - Geolocation/index.html @@ -0,0 +1,62 @@ + + + + + Document + + + + + + +

      + 0 + KM/H +

      + + + + + From 38f5e2ae3ad3f9e57ca1383ab171f46f8c65a1ff Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 14:58:43 -0600 Subject: [PATCH 41/58] Day 21 complete MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I haven’t actually tested this yet since I’ll have to go through xCode. --- 21 - Geolocation/index.html | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/21 - Geolocation/index.html b/21 - Geolocation/index.html index a1b981b1cd..61d619bc23 100644 --- a/21 - Geolocation/index.html +++ b/21 - Geolocation/index.html @@ -11,7 +11,7 @@

      0 - KM/H + MPH

      From 028c7191026f09b2fd46b83eb76f9a1656a3b1fb Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 14:59:02 -0600 Subject: [PATCH 42/58] Day 22 index file created --- 22 - Follow Along Link Highlighter/index.html | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 22 - Follow Along Link Highlighter/index.html diff --git a/22 - Follow Along Link Highlighter/index.html b/22 - Follow Along Link Highlighter/index.html new file mode 100644 index 0000000000..8476112b5e --- /dev/null +++ b/22 - Follow Along Link Highlighter/index.html @@ -0,0 +1,33 @@ + + + + + 👀👀👀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!

      +
      + + + + + From 68ddc55cb5e3819408110c47a2bdb8128c08e1cf Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 15:07:32 -0600 Subject: [PATCH 43/58] Day 22 complete --- 22 - Follow Along Link Highlighter/index.html | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/22 - Follow Along Link Highlighter/index.html b/22 - Follow Along Link Highlighter/index.html index 8476112b5e..19f13627fa 100644 --- a/22 - Follow Along Link Highlighter/index.html +++ b/22 - Follow Along Link Highlighter/index.html @@ -26,8 +26,29 @@ - From 872c2b0957abce5eab8dc4273a51b23242d9bcb8 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 15:09:18 -0600 Subject: [PATCH 44/58] Day 23 index file created --- 23 - Speech Synthesis/index.html | 41 ++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 23 - Speech Synthesis/index.html diff --git a/23 - Speech Synthesis/index.html b/23 - Speech Synthesis/index.html new file mode 100644 index 0000000000..e890008d36 --- /dev/null +++ b/23 - Speech Synthesis/index.html @@ -0,0 +1,41 @@ + + + + + Speech Synthesis + + + + + +
      + +

      The Voiceinator 5000

      + + + + + + + + + + + + + +
      + + + + + From 551877fac87c63ee769443b5e417685624233589 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 15:27:31 -0600 Subject: [PATCH 45/58] Day 23 complete --- 23 - Speech Synthesis/index.html | 37 ++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/23 - Speech Synthesis/index.html b/23 - Speech Synthesis/index.html index e890008d36..79062d22d4 100644 --- a/23 - Speech Synthesis/index.html +++ b/23 - Speech Synthesis/index.html @@ -35,6 +35,43 @@

      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 voiceTempalte(v) { + return ``; + } + + function populateVoices() { + voices = this.getVoices(); + voicesDropdown.innerHTML = voices.filter(v => v.lang.includes('en')) + .reduce((acc, voice) => { + return acc + voiceTempalte(voice); + }, ''); + } + + function setVoice() { + msg.voice = voices.find(v => v.name === this.value); + toggleSpeech(); + } + + function toggleSpeech(startOver = true) { + console.log(msg); + speechSynthesis.cancel(); + if (startOver) { speechSynthesis.speak(msg); } + } + + function setOption() { + msg[this.name] = this.value; + toggleSpeech(); + } + + speechSynthesis.addEventListener('voiceschanged', populateVoices); + voicesDropdown.addEventListener('change', setVoice); + options.forEach(option => option.addEventListener('change', setOption)); + speakButton.addEventListener('click', toggleSpeech); + stopButton.addEventListener('click', () => toggleSpeech(false)); + From 3bb8c7e1fc3ce8610f6f6cf3582b9c8219c943f3 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 15:28:26 -0600 Subject: [PATCH 46/58] Day 24 index and style files created --- 24 - Sticky Nav/index.html | 61 +++++++++++++++++++++++++++ 24 - Sticky Nav/style.css | 86 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 147 insertions(+) create mode 100644 24 - Sticky Nav/index.html create mode 100644 24 - Sticky Nav/style.css diff --git a/24 - Sticky Nav/index.html b/24 - Sticky Nav/index.html new file mode 100644 index 0000000000..27ecf6c2b4 --- /dev/null +++ b/24 - Sticky Nav/index.html @@ -0,0 +1,61 @@ + + + + + Sticky Nav + + + + +
      +

      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. 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. 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. 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.

      +
      + + + + + diff --git a/24 - Sticky Nav/style.css b/24 - Sticky Nav/style.css new file mode 100644 index 0000000000..c6d59a31b3 --- /dev/null +++ b/24 - Sticky Nav/style.css @@ -0,0 +1,86 @@ +html { + box-sizing: border-box; + background:#eeeeee; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; +} +body { + margin: 0; +} +*, *:before, *:after { + box-sizing: inherit; +} + +.site-wrap { + max-width: 700px; + margin: 70px auto; + background:white; + padding:40px; + text-align: justify; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); + transform: scale(0.98); + transition: transform 0.5s; +} + +header { + text-align: center; + height:50vh; + background:url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat; + background-size:cover; + display:flex; + align-items:center; + justify-content: center; +} + +h1 { + color:white; + font-size: 7vw; + text-shadow: 3px 4px 0 rgba(0,0,0,0.2) +} + +nav { + background:black; + top:0; + width: 100%; + transition:all 0.5s; + position: relative; + z-index: 1; +} + +nav ul { + margin: 0; + padding:0; + list-style: none; + display:flex; +} + +nav li { + flex:1; + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} + +li.logo { + max-width:0; + overflow: hidden; + background: white; + transition: all .5s; + font-weight: 600; + font-size: 30px; +} + +li.logo a { + color:black; +} + +nav a { + text-decoration: none; + padding:20px; + display: inline-block; + color:white; + transition:all 0.2s; + text-transform: uppercase; +} From 4395b33f6f5140680586259d87e1352cba0112eb Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 15:43:16 -0600 Subject: [PATCH 47/58] Day 24 complete --- 24 - Sticky Nav/index.html | 18 ++++++++++++++++++ 24 - Sticky Nav/style.css | 15 +++++++++++++-- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/24 - Sticky Nav/index.html b/24 - Sticky Nav/index.html index 27ecf6c2b4..fe30df4ed7 100644 --- a/24 - Sticky Nav/index.html +++ b/24 - Sticky Nav/index.html @@ -54,6 +54,24 @@

      A story about getting lost.

      diff --git a/24 - Sticky Nav/style.css b/24 - Sticky Nav/style.css index c6d59a31b3..0051947218 100644 --- a/24 - Sticky Nav/style.css +++ b/24 - Sticky Nav/style.css @@ -19,10 +19,14 @@ body { padding:40px; text-align: justify; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); - transform: scale(0.98); + transform: scale(0.8); transition: transform 0.5s; } +body.fixed-nav .site-wrap { + transform: scale(1); +} + header { text-align: center; height:50vh; @@ -38,7 +42,10 @@ h1 { font-size: 7vw; text-shadow: 3px 4px 0 rgba(0,0,0,0.2) } - +.fixed-nav nav { + position: fixed; + box-shadow: 0 5px rgba(0,0,0,0.1); +} nav { background:black; top:0; @@ -76,6 +83,10 @@ li.logo a { color:black; } +.fixed-nav li.logo { + max-width:500px; +} + nav a { text-decoration: none; padding:20px; From c88afe151659af3d9d59628770e4e7a766d8f4e4 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 15:43:38 -0600 Subject: [PATCH 48/58] Day 25 index file created --- .../index.html | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 25 - Event Capture, Propagation, Bubbling and Once/index.html diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index.html b/25 - Event Capture, Propagation, Bubbling and Once/index.html new file mode 100644 index 0000000000..98f5e070c4 --- /dev/null +++ b/25 - Event Capture, Propagation, Bubbling and Once/index.html @@ -0,0 +1,45 @@ + + + + + Understanding JavaScript's Capture + + + +
      +
      +
      +
      +
      +
      + + + + + + + From b2c43dd668693c192f57e2d14f6fffafa9dbd1e8 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 15:50:39 -0600 Subject: [PATCH 49/58] Day 25 complete --- .../index.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index.html b/25 - Event Capture, Propagation, Bubbling and Once/index.html index 98f5e070c4..e297d24cd1 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index.html @@ -39,6 +39,22 @@ From 00a492cd4bea7e9cb1d746bf28614e244494751b Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 18:08:51 -0600 Subject: [PATCH 50/58] Day 26 index file created --- 26 - Stripe Follow Along Nav/index.html | 216 ++++++++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 26 - Stripe Follow Along Nav/index.html diff --git a/26 - Stripe Follow Along Nav/index.html b/26 - Stripe Follow Along Nav/index.html new file mode 100644 index 0000000000..692ed5b886 --- /dev/null +++ b/26 - Stripe Follow Along Nav/index.html @@ -0,0 +1,216 @@ + + + + + Follow Along Nav + + +

      Cool

      + + + + + + + + From 038a120f389cbad7b922af7fbd452f18d21567da Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 18:32:06 -0600 Subject: [PATCH 51/58] Day 26 complete --- 26 - Stripe Follow Along Nav/index.html | 44 ++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/26 - Stripe Follow Along Nav/index.html b/26 - Stripe Follow Along Nav/index.html index 692ed5b886..6e9800d2d7 100644 --- a/26 - Stripe Follow Along Nav/index.html +++ b/26 - Stripe Follow Along Nav/index.html @@ -208,7 +208,49 @@

      Cool

      From 56a9511238c5518b7cb1b6c43c48d26351bfd538 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 18:53:03 -0600 Subject: [PATCH 52/58] Day 27 complete --- 27 - Click and Drag/index.html | 72 ++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 27 - Click and Drag/index.html diff --git a/27 - Click and Drag/index.html b/27 - Click and Drag/index.html new file mode 100644 index 0000000000..e261012e63 --- /dev/null +++ b/27 - Click and Drag/index.html @@ -0,0 +1,72 @@ + + + + + Click and Drag + + + +
      +
      01
      +
      02
      +
      03
      +
      04
      +
      05
      +
      06
      +
      07
      +
      08
      +
      09
      +
      10
      +
      11
      +
      12
      +
      13
      +
      14
      +
      15
      +
      16
      +
      17
      +
      18
      +
      19
      +
      20
      +
      21
      +
      22
      +
      23
      +
      24
      +
      25
      +
      + + + + + From 72f4cad49e3c616ad8d683e32739e839bad0cf3d Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 18:53:52 -0600 Subject: [PATCH 53/58] Day 28 index file created --- 28 - Video Speed Controller/index.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 28 - Video Speed Controller/index.html diff --git a/28 - Video Speed Controller/index.html b/28 - Video Speed Controller/index.html new file mode 100644 index 0000000000..c4cbd4259a --- /dev/null +++ b/28 - Video Speed Controller/index.html @@ -0,0 +1,20 @@ + + + + + Video Speed Scrubber + + + + +
      + +
      +
      1×
      +
      +
      + + + + From d4b651197c2a415a9b844e6d297faf057ec3a7f8 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 19:16:05 -0600 Subject: [PATCH 54/58] Day 28 complete --- 28 - Video Speed Controller/index.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/28 - Video Speed Controller/index.html b/28 - Video Speed Controller/index.html index c4cbd4259a..ef2cbb77b1 100644 --- a/28 - Video Speed Controller/index.html +++ b/28 - Video Speed Controller/index.html @@ -15,6 +15,22 @@ From 8e62a58cc4702028f26fadab7b49835b7d5cbcef Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 19:17:11 -0600 Subject: [PATCH 55/58] Day 29 Starting files created --- 29 - Countdown Timer/index.html | 2 +- 29 - Countdown Timer/scripts.js | 0 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 29 - Countdown Timer/scripts.js diff --git a/29 - Countdown Timer/index.html b/29 - Countdown Timer/index.html index d54f447dd9..95a0f895a2 100644 --- a/29 - Countdown Timer/index.html +++ b/29 - Countdown Timer/index.html @@ -24,6 +24,6 @@

      - + diff --git a/29 - Countdown Timer/scripts.js b/29 - Countdown Timer/scripts.js new file mode 100644 index 0000000000..e69de29bb2 From 87eda84fb6049dec9141e22a91257a7e7b416481 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 19:38:40 -0600 Subject: [PATCH 56/58] Day 29 complete --- 29 - Countdown Timer/scripts.js | 60 +++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/29 - Countdown Timer/scripts.js b/29 - Countdown Timer/scripts.js index e69de29bb2..3e263aa17e 100644 --- a/29 - Countdown Timer/scripts.js +++ b/29 - Countdown Timer/scripts.js @@ -0,0 +1,60 @@ +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); + } else { + displayTimeLeft(secondsLeft); + } + }, 1000); +} + +function secondsToTime(sec) { + const H = Math.floor(sec / 3600); + const m = Math.floor((sec % 3600) / 60); + const s = sec % 60; + + return H + ':' + twoDigitNum(m) + ':' + twoDigitNum(s); +} + +function twoDigitNum(num) { + const pad = (num < 10) ? '0' : ''; + return pad + num; +} + +function displayTimeLeft(seconds) { + const display = secondsToTime(seconds); + document.title = display; + timerDisplay.textContent = display; +} +function displayEndTime(timestamp) { + const end = new Date(timestamp); + const hour = end.getHours(); + const adjustedHour = hour > 12 ? hour - 12 : hour; + const minutes = end.getMinutes(); + endTime.textContent = `Be Back At ${adjustedHour}:${twoDigitNum(minutes)}`; +} + +function startTimer(event) { timer(event.target.dataset.time); } + +function handleForm(event) { + event.preventDefault(); + timer(document.customForm.minutes.value * 60); + document.customForm.reset(); +} + +buttons.forEach(button => button.addEventListener('click', startTimer)); +document.customForm.addEventListener('submit', handleForm); From 44403c918d59de7514bb0b27dbce64658d9efdb4 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 19:39:48 -0600 Subject: [PATCH 57/58] Day 30 index file created --- 30 - Whack A Mole/index.html | 42 ++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 30 - Whack A Mole/index.html diff --git a/30 - Whack A Mole/index.html b/30 - Whack A Mole/index.html new file mode 100644 index 0000000000..2014ff458c --- /dev/null +++ b/30 - Whack A Mole/index.html @@ -0,0 +1,42 @@ + + + + + Whack A Mole! + + + + + +

      Whack-a-mole! 0

      + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + + From 67a792cf3e58ef33f2e588929c7054bdc8dfe949 Mon Sep 17 00:00:00 2001 From: dap6000 Date: Mon, 16 Jan 2017 20:12:14 -0600 Subject: [PATCH 58/58] Da7 30 complete --- 30 - Whack A Mole/index.html | 53 ++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/30 - Whack A Mole/index.html b/30 - Whack A Mole/index.html index 2014ff458c..eb19f53112 100644 --- a/30 - Whack A Mole/index.html +++ b/30 - Whack A Mole/index.html @@ -36,6 +36,59 @@

      Whack-a-mole! 0

      const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); + let lastHole = 0; + let timeUp = false; + let score = 0; + + function rand(min, max) { + return Math.round(Math.random() * (max - min) + min); + } + + function randomHole(holes) { + let top = holes.length - 1; + let bottom = 0; + if (lastHole === top) { + top--; + } else if (lastHole === bottom) { + bottom++; + } else if (rand(0, 1)) { + top = lastHole - 1; + } else { + bottom = lastHole + 1; + } + const index = rand(bottom, top); + lastHole = index; + return holes[index]; + } + + function prairiedog() { + const time = rand(200, 1000); + const hole = randomHole(holes); + console.log({time}); + hole.classList.add('up'); + setTimeout(() => { + hole.classList.remove('up'); + if (! timeUp) { prairiedog(); } + }, time); + } + + function startGame() { + scoreBoard.textContent = 0; + timeUp = false; + score = 0; + prairiedog(); + setTimeout(() => timeUp = true, 10000) + } + + function bonk(event) { + if(event.isTrusted) { + score++; + event.target.classList.remove('up'); + scoreBoard.textContent = score; + } + } + + moles.forEach(mole => mole.addEventListener('click', bonk));