From c96ceccbd450cd4388848a0dd28b34c20dc01682 Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Wed, 21 Dec 2016 19:44:48 -0800 Subject: [PATCH 01/15] followed along with the video and did the fist assignment. Learned about querySelector, and "transitionend" events (adding one to an element to signal when there is a change within the element). --- 01 - JavaScript Drum Kit/index-CF.html | 91 ++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index-CF.html diff --git a/01 - JavaScript Drum Kit/index-CF.html b/01 - JavaScript Drum Kit/index-CF.html new file mode 100644 index 0000000000..b11dfd3b29 --- /dev/null +++ b/01 - JavaScript Drum Kit/index-CF.html @@ -0,0 +1,91 @@ + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + From 936643c6bdd366c51dd8ac2e798bd65bba1d9503 Mon Sep 17 00:00:00 2001 From: Carlos Date: Thu, 22 Dec 2016 11:41:39 -0800 Subject: [PATCH 02/15] Did Day 2 project - followed along with the video --- 02 - JS + CSS Clock/index-NEW.html | 102 +++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 02 - JS + CSS Clock/index-NEW.html diff --git a/02 - JS + CSS Clock/index-NEW.html b/02 - JS + CSS Clock/index-NEW.html new file mode 100644 index 0000000000..a21bcdb726 --- /dev/null +++ b/02 - JS + CSS Clock/index-NEW.html @@ -0,0 +1,102 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + From a6acaf5e67ea072b81815d8e08c64ee07bb16c55 Mon Sep 17 00:00:00 2001 From: Carlos Date: Thu, 22 Dec 2016 15:33:25 -0800 Subject: [PATCH 03/15] Did day 3 - learned about CSS Variables and more DOM manipulation --- 03 - CSS Variables/index-CF.html | 88 ++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 03 - CSS Variables/index-CF.html diff --git a/03 - CSS Variables/index-CF.html b/03 - CSS Variables/index-CF.html new file mode 100644 index 0000000000..8bdf0fd64c --- /dev/null +++ b/03 - CSS Variables/index-CF.html @@ -0,0 +1,88 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + From ed2b9008f065a8491adfd73decbccb2b77dad7e6 Mon Sep 17 00:00:00 2001 From: Carlos Date: Thu, 22 Dec 2016 16:02:05 -0800 Subject: [PATCH 04/15] Started Day 4 array exercises --- 04 - Array Cardio Day 1/index-START-CF.html | 73 +++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 04 - Array Cardio Day 1/index-START-CF.html diff --git a/04 - Array Cardio Day 1/index-START-CF.html b/04 - Array Cardio Day 1/index-START-CF.html new file mode 100644 index 0000000000..2ebe6a2148 --- /dev/null +++ b/04 - Array Cardio Day 1/index-START-CF.html @@ -0,0 +1,73 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From ff9ef1eb6826e3986cf451c00667c405c86e0de7 Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Fri, 23 Dec 2016 00:06:29 -0800 Subject: [PATCH 05/15] In-prog: working through the array exercises --- 04 - Array Cardio Day 1/index-START-CF.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START-CF.html b/04 - Array Cardio Day 1/index-START-CF.html index 2ebe6a2148..2f97372190 100644 --- a/04 - Array Cardio Day 1/index-START-CF.html +++ b/04 - Array Cardio Day 1/index-START-CF.html @@ -41,19 +41,19 @@ return person.first + " " + person.last; }); - console.log(firstAndLast); - - // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest - inventors.sort(function(a, b){ - a.year > b.year; - }); - console.log (inventors); + inventors.sort(function(a, b){return a.year - b.year;}); + // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce(function(total, person){ + console.log (person.passed-person.year); + return total+(person.passed-person.year); + }); + console.log (totalYears); // 5. Sort the inventors by years lived From 8641c5872f20f86b5a96c40d061f1df81f7f2c11 Mon Sep 17 00:00:00 2001 From: Carlos Date: Fri, 23 Dec 2016 16:02:27 -0800 Subject: [PATCH 06/15] Finished the day --- 04 - Array Cardio Day 1/index-START-CF.html | 93 +++++++++++++++++++-- 1 file changed, 87 insertions(+), 6 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START-CF.html b/04 - Array Cardio Day 1/index-START-CF.html index 2f97372190..b7b760e33f 100644 --- a/04 - Array Cardio Day 1/index-START-CF.html +++ b/04 - Array Cardio Day 1/index-START-CF.html @@ -34,6 +34,22 @@ const bornInFifteen = inventors.filter(function(person){ return person.year > 1499 && person.year < 1600; }); + const fifteen = inventors.filter(function(inventor){ + if (inventor.year >= 1500 && inventor.year < 1600) { + return true; + } + //if you don't return anything other than true it'll just treat it as false. + }); + + //filter can be simplified by using the => + const fifteenSimplifying = inventors.filter(inventor => inventor.year > 1499 && inventor.year < 1600); + + //console.table(fifteenSimplifying); + //console.table(bornInFifteen); + //console table outputs data to the console in tabular format + + + // Array.prototype.map() // 2. Give us an array of the inventors' first and last names @@ -41,33 +57,98 @@ return person.first + " " + person.last; }); + const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + + + + + + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest - inventors.sort(function(a, b){return a.year - b.year;}); + //inventors.sort(function(a, b){return a.year - b.year;}); + + //first person is a, second person is b + //const ordered = inventors.sort(function (a,b){ + //if (a.year > b.year){ + //return 1; + //} else { + //return -1; + //} + //}); + + //Using a ternarary(sp?) operator + + 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(function(total, person){ - console.log (person.passed-person.year); - return total+(person.passed-person.year); - }); - console.log (totalYears); + const totalYearsCF = inventors.reduce(function(total, inventor){ + return total + (inventor.passed - inventor.year); + }, 0); + + //console.log(totalYearsCF); + + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); + + //console.log (totalYears); + + //ZERO! You can enter another argument for the reduce function, and that effectively initializes the total var with zero. Basically var total = 0; + + // 5. Sort the inventors by years lived + const oldest = inventors.sort((a,b) => (a.passed-a.year) < (b.passed-b.year) ? 1 : -1); + //console.table(oldest); + + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + //const mainWikiPage = document.querySelector(".mw-category"); + //const cityNames = document.querySelectorAll(".mw-category-group ul li a"); + //You don't need to do descendant selector, in this case just finding any child of class mw-category that's an anchor would do + // const cityNames = Array.from(document.querySelectorAll('a')); + //Array from converts a Node List into an array + + //const de = cityNames + // .map(link => link.textContent) + // .filter(streetName => streetName.includes("de") && !(streetName.includes("http"))); + // 7. sort Exercise // Sort the people alphabetically by last name + const alpha = people.sort((lastOne, nextOne) =>{ + const [aLast, aFirst] = lastOne.split(', '); + const [bLast, bFirst] = nextOne.split(', '); + return aLast > bLast ? 1 : -1; + }); + //console.log(alpha); // 8. Reduce Exercise // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + const transportation = data.reduce((obj, item) => { + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + },{}); + + console.log(transportation); + + From 7ca986b2d2b386320abe45ce45bb4ed3c6668077 Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Sun, 25 Dec 2016 20:38:12 -0800 Subject: [PATCH 07/15] repeating the array exercises --- 04 - Array Cardio Day 1/index-01.html | 68 +++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 04 - Array Cardio Day 1/index-01.html diff --git a/04 - Array Cardio Day 1/index-01.html b/04 - Array Cardio Day 1/index-01.html new file mode 100644 index 0000000000..a51428179c --- /dev/null +++ b/04 - Array Cardio Day 1/index-01.html @@ -0,0 +1,68 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From 5dc3027828476b02877c08d1ecdac5f406627aef Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Sun, 25 Dec 2016 22:54:13 -0800 Subject: [PATCH 08/15] worked through the array cardio day lesson again to reinforce the map, sort, filter, reduce array stuff --- 04 - Array Cardio Day 1/index-01.html | 17 ++++++++++++++++- 04 - Array Cardio Day 1/index-START-CF.html | 1 + 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-01.html b/04 - Array Cardio Day 1/index-01.html index a51428179c..24399a9fa7 100644 --- a/04 - Array Cardio Day 1/index-01.html +++ b/04 - Array Cardio Day 1/index-01.html @@ -40,15 +40,30 @@ // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce((total, inventor) => { + return total += (inventor.passed - inventor.year); + }, 0); + + console.log(totalYears); // 5. Sort the inventors by years lived // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris - + //select the main section with the city names + //const mainSection=document.querySelector("#mw-pages"); + //const cityAnchors = Array.from(mainSection.querySelectorAll(".mw-category-group ul li a")); + //const cityNamesWithDe = cityAnchors + // .map(eachCityAnchor => eachCityAnchor.textContent) + // .filter(cityName => {return cityName.includes("de");}); + //console.log(cityNamesWithDe); // 7. sort Exercise // Sort the people alphabetically by last name + const sortedNames = people.sort((lastPerson, nextPerson) => { + return lastPerson > nextPerson ? 1 : -1; + }); + console.log(sortedNames); // 8. Reduce Exercise // Sum up the instances of each of these diff --git a/04 - Array Cardio Day 1/index-START-CF.html b/04 - Array Cardio Day 1/index-START-CF.html index b7b760e33f..9a12aa6724 100644 --- a/04 - Array Cardio Day 1/index-START-CF.html +++ b/04 - Array Cardio Day 1/index-START-CF.html @@ -122,6 +122,7 @@ //const de = cityNames // .map(link => link.textContent) // .filter(streetName => streetName.includes("de") && !(streetName.includes("http"))); + //console.log(de); From 3d0a52772350b871d370780338c604681130d323 Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Wed, 28 Dec 2016 19:09:09 -0800 Subject: [PATCH 09/15] did another attempt on Cardio Day 1 after watching and following along the first time just to make things stick in my head. --- 04 - Array Cardio Day 1/index-01.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/04 - Array Cardio Day 1/index-01.html b/04 - Array Cardio Day 1/index-01.html index 24399a9fa7..5333be7224 100644 --- a/04 - Array Cardio Day 1/index-01.html +++ b/04 - Array Cardio Day 1/index-01.html @@ -31,9 +31,17 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const bornInFifteen = inventors.filter(inventor => { + return (inventor.year > 1499 && inventor.year < 1600); + }); + console.table(bornInFifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const onlyNames = inventors.map(inventor => { + return `${inventor.first} ${inventor.last}` + }); + console.log(onlyNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest From babf8a4d274bc36c2e963208800817a68f09cf61 Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Thu, 5 Jan 2017 21:48:30 -0800 Subject: [PATCH 10/15] Adding the files I used to follow along with the video lessons. --- 02 - JS + CSS Clock/img/1000.jpg | Bin 0 -> 33743 bytes 02 - JS + CSS Clock/index-CF.html | 76 ++++++++ 05 - Flex Panel Gallery/index-CF.html | 163 ++++++++++++++++++ 06 - Type Ahead/index-CF.html | 70 ++++++++ 06 - Type Ahead/style-CF.css | 87 ++++++++++ 07 - Array Cardio Day 2/index-CF.html | 64 +++++++ 08 - Fun with HTML5 Canvas/index-CF.html | 66 +++++++ 09 - Dev Tools Domination/index-CF.html | 85 +++++++++ .../index-CF.html | 109 ++++++++++++ 9 files changed, 720 insertions(+) create mode 100644 02 - JS + CSS Clock/img/1000.jpg create mode 100644 02 - JS + CSS Clock/index-CF.html create mode 100644 05 - Flex Panel Gallery/index-CF.html create mode 100644 06 - Type Ahead/index-CF.html create mode 100644 06 - Type Ahead/style-CF.css create mode 100644 07 - Array Cardio Day 2/index-CF.html create mode 100644 08 - Fun with HTML5 Canvas/index-CF.html create mode 100644 09 - Dev Tools Domination/index-CF.html create mode 100644 10 - Hold Shift and Check Checkboxes/index-CF.html diff --git a/02 - JS + CSS Clock/img/1000.jpg b/02 - JS + CSS Clock/img/1000.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b281b9ecd3eba6d43df6dd1fed8b031ffa8e7431 GIT binary patch literal 33743 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 literal 0 HcmV?d00001 diff --git a/02 - JS + CSS Clock/index-CF.html b/02 - JS + CSS Clock/index-CF.html new file mode 100644 index 0000000000..ddc38ad0b0 --- /dev/null +++ b/02 - JS + CSS Clock/index-CF.html @@ -0,0 +1,76 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + diff --git a/05 - Flex Panel Gallery/index-CF.html b/05 - Flex Panel Gallery/index-CF.html new file mode 100644 index 0000000000..534c8c378c --- /dev/null +++ b/05 - Flex Panel Gallery/index-CF.html @@ -0,0 +1,163 @@ + + + + + Flex Panels 💪 + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + diff --git a/06 - Type Ahead/index-CF.html b/06 - Type Ahead/index-CF.html new file mode 100644 index 0000000000..41c0bfd964 --- /dev/null +++ b/06 - Type Ahead/index-CF.html @@ -0,0 +1,70 @@ + + + + + Type Ahead 👀 + + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + + diff --git a/06 - Type Ahead/style-CF.css b/06 - Type Ahead/style-CF.css new file mode 100644 index 0000000000..36dc55f30e --- /dev/null +++ b/06 - Type Ahead/style-CF.css @@ -0,0 +1,87 @@ + html { + box-sizing: border-box; + background:#ffc600; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; + } + *, *:before, *:after { + box-sizing: inherit; + } + input { + width: 100%; + padding:20px; + } + + .search-form { + max-width:400px; + margin:50px auto; + } + + input.search { + margin: 0; + text-align: center; + outline:0; + border: 10px solid #F7F7F7; + width: 120%; + left: -10%; + position: relative; + top: 10px; + z-index: 2; + border-radius: 5px; + font-size: 40px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); + } + + + .suggestions { + margin: 0; + padding: 0; + position: relative; + /*perspective:20px;*/ + } + .suggestions li { + background:white; + list-style: none; + border-bottom: 1px solid #D8D8D8; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); + margin:0; + padding:20px; + transition:background 0.2s; + display:flex; + justify-content:space-between; + text-transform: capitalize; + } + + .suggestions li:nth-child(even) { + transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); + background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); + } + .suggestions li:nth-child(odd) { + transform: perspective(100px) rotateX(-3deg) translateY(3px); + background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); + } + + span.population { + font-size: 15px; + } + + + .details { + text-align: center; + font-size: 15px; + } + + .hl { + background:#ffc600; + } + + .love { + text-align: center; + } + + a { + color:black; + background:rgba(0,0,0,0.1); + text-decoration: none; + } diff --git a/07 - Array Cardio Day 2/index-CF.html b/07 - Array Cardio Day 2/index-CF.html new file mode 100644 index 0000000000..42bd2d6a5e --- /dev/null +++ b/07 - Array Cardio Day 2/index-CF.html @@ -0,0 +1,64 @@ +\ + + + + Array Cardio 💪💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + diff --git a/08 - Fun with HTML5 Canvas/index-CF.html b/08 - Fun with HTML5 Canvas/index-CF.html new file mode 100644 index 0000000000..b208b7aadf --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-CF.html @@ -0,0 +1,66 @@ + + + + + HTML5 Canvas + + + + + + + + + diff --git a/09 - Dev Tools Domination/index-CF.html b/09 - Dev Tools Domination/index-CF.html new file mode 100644 index 0000000000..a6be10d632 --- /dev/null +++ b/09 - Dev Tools Domination/index-CF.html @@ -0,0 +1,85 @@ + + + + + Console Tricks! + + + +

×BREAK×DOWN×

+ + + + diff --git a/10 - Hold Shift and Check Checkboxes/index-CF.html b/10 - Hold Shift and Check Checkboxes/index-CF.html new file mode 100644 index 0000000000..d5f04d3628 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-CF.html @@ -0,0 +1,109 @@ + + + + + Document + + + + +
+
+ +

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 81e6f6166f6c975493890a6108915a347e620dde Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Sat, 7 Jan 2017 16:23:45 -0800 Subject: [PATCH 11/15] Day 10 project files --- .../index-CF.html | 34 +++++ .../index-CF_lesson.html | 142 ++++++++++++++++++ .../index-FINISHED.html | 1 + 3 files changed, 177 insertions(+) create mode 100644 10 - Hold Shift and Check Checkboxes/index-CF_lesson.html diff --git a/10 - Hold Shift and Check Checkboxes/index-CF.html b/10 - Hold Shift and Check Checkboxes/index-CF.html index d5f04d3628..a1111951f0 100644 --- a/10 - Hold Shift and Check Checkboxes/index-CF.html +++ b/10 - Hold Shift and Check Checkboxes/index-CF.html @@ -104,6 +104,40 @@ diff --git a/10 - Hold Shift and Check Checkboxes/index-CF_lesson.html b/10 - Hold Shift and Check Checkboxes/index-CF_lesson.html new file mode 100644 index 0000000000..84834d9d0b --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-CF_lesson.html @@ -0,0 +1,142 @@ + + + + + Document + + + + +
+
+ +

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!

+
+
+ + + + diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html index 3ce296cc4b..8275be669b 100644 --- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html +++ b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html @@ -126,6 +126,7 @@ checkbox.checked = true; } }); + } lastChecked = this; From a0ba7573f20070f00c2c00721693ac6084771803 Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Thu, 19 Jan 2017 22:09:42 -0800 Subject: [PATCH 12/15] adding in my files that I used while working through the different days --- 11 - Custom Video Player/index.html | 5 +- 11 - Custom Video Player/scripts-cf.js | 72 +++++++++++ 11 - Custom Video Player/style-cf.css | 150 ++++++++++++++++++++++ 12 - Key Sequence Detection/index-CF.html | 23 ++++ 13 - Slide in on Scroll/index-CF.html | 143 +++++++++++++++++++++ 5 files changed, 391 insertions(+), 2 deletions(-) create mode 100644 11 - Custom Video Player/scripts-cf.js create mode 100644 11 - Custom Video Player/style-cf.css create mode 100644 12 - Key Sequence Detection/index-CF.html create mode 100644 13 - Slide in on Scroll/index-CF.html diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html index 281a15eaa8..37450b1315 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -3,7 +3,7 @@ HTML Video Player - + @@ -19,9 +19,10 @@ + - + diff --git a/11 - Custom Video Player/scripts-cf.js b/11 - Custom Video Player/scripts-cf.js new file mode 100644 index 0000000000..5ec46d3dd9 --- /dev/null +++ b/11 - Custom Video Player/scripts-cf.js @@ -0,0 +1,72 @@ +/* Get our Elements */ +const player = document.querySelector('.player'); +const video = player.querySelector('.viewer'); + +const progress = player.querySelector('.progress'); +const progressBar = progress.querySelector('.progress__filled'); + +const toggle = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]') +const ranges = player.querySelectorAll('.player__slider'); +const fullScreen = player.querySelector('.fullscreen'); + +/* Build out functions */ + +function togglePlay() { + const method = video.paused ? 'play' : 'pause'; + video[method](); +/* if (video.paused) { + video.play(); + } else { + video.pause(); + } */ +} + +function updateButton() { + const icon = this.paused ? '►' : '❚ ❚'; + toggle.textContent = icon; +} + +function skip () { + //NOTE: The value in the dataset is a String, so it needs to be converted. In this case, to a float. + video.currentTime += parseFloat(this.dataset.skip); +} + +function handleRangeUpdate () { + video[this.name]=this.value; +} + +function handleProgress () { + const percent = (video.currentTime/video.duration) * 100; + progressBar.style.flexBasis = `${percent}%`; +} + +function scrub (e) { + const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; + video.currentTime = scrubTime; +} + +function setFullScreen() { + console.log("click!"); + video.webkitDisplayingFullscreen = true; +} + +/* Hook up the event listeners */ + +video.addEventListener('click', togglePlay); +video.addEventListener('play', updateButton); +video.addEventListener('pause', updateButton); +video.addEventListener('timeupdate', handleProgress); + +toggle.addEventListener('click', togglePlay); + +skipButtons.forEach(button => button.addEventListener("click", skip)); + +ranges.forEach(range => range.addEventListener("change", handleRangeUpdate)); + +let mouseDown = false; +progress.addEventListener('click', scrub); +progress.addEventListener('mousemove', (e)=> mouseDown && scrub(e)); +progress.addEventListener('mousedown', ()=> mouseDown = true); +progress.addEventListener('mouseup', ()=> mouseDown = false); +fullScreen.addEventListener('click', setFullScreen); \ No newline at end of file diff --git a/11 - Custom Video Player/style-cf.css b/11 - Custom Video Player/style-cf.css new file mode 100644 index 0000000000..9b99a87cb0 --- /dev/null +++ b/11 - Custom Video Player/style-cf.css @@ -0,0 +1,150 @@ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + padding: 0; + display:flex; + background:#7A419B; + min-height:100vh; + background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%); + background-size:cover; + align-items: center; + justify-content: center; +} + +.player { + max-width:750px; + border:5px solid rgba(0,0,0,0.2); + box-shadow:0 0 20px rgba(0,0,0,0.2); + position: relative; + font-size: 0; + overflow: hidden; +} + +.player__video { + width: 100%; +} + +.player__button { + background:none; + border:0; + line-height:1; + color:white; + text-align: center; + outline:0; + padding: 0; + cursor:pointer; + max-width:50px; +} + +.player__button:focus { + border-color: #ffc600; +} + +.player__slider { + width:10px; + height:30px; +} + +.player__controls { + display:flex; + position: absolute; + bottom:0; + width: 100%; + transform: translateY(100%) translateY(-5px); + transition:all .3s; + flex-wrap:wrap; + background:rgba(0,0,0,0.1); +} + +.player:hover .player__controls { + transform: translateY(0); +} + +.player:hover .progress { + height:15px; +} + +.player__controls > * { + flex:1; +} + +.progress { + flex:10; + position: relative; + display:flex; + flex-basis:100%; + height:5px; + transition:height 0.3s; + background:rgba(0,0,0,0.5); + cursor:ew-resize; +} + +.fullscreen { + background-color: black; + color: white; +} + +.progress__filled { + width:50%; + background:#ffc600; + flex:0; + flex-basis:50%; +} + +/* unholy css to style input type="range" */ + +input[type=range] { + -webkit-appearance: none; + background:transparent; + width: 100%; + margin: 0 5px; +} +input[type=range]:focus { + outline: none; +} +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0); + background: rgba(255,255,255,0.8); + border-radius: 1.3px; + border: 0.2px solid rgba(1, 1, 1, 0); +} +input[type=range]::-webkit-slider-thumb { + box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0); + height: 15px; + width: 15px; + border-radius: 50px; + background: #ffc600; + cursor: pointer; + -webkit-appearance: none; + margin-top: -3.5px; + box-shadow:0 0 2px rgba(0,0,0,0.2); +} +input[type=range]:focus::-wefbkit-slider-runnable-track { + background: #bada55; +} +input[type=range]::-moz-range-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0); + background: #ffffff; + border-radius: 1.3px; + border: 0.2px solid rgba(1, 1, 1, 0); +} +input[type=range]::-moz-range-thumb { + box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0); + height: 15px; + width: 15px; + border-radius: 50px; + background: #ffc600; + cursor: pointer; +} diff --git a/12 - Key Sequence Detection/index-CF.html b/12 - Key Sequence Detection/index-CF.html new file mode 100644 index 0000000000..24aa2da2c6 --- /dev/null +++ b/12 - Key Sequence Detection/index-CF.html @@ -0,0 +1,23 @@ + + + + + Key Detection + + + + + + diff --git a/13 - Slide in on Scroll/index-CF.html b/13 - Slide in on Scroll/index-CF.html new file mode 100644 index 0000000000..a727873da5 --- /dev/null +++ b/13 - Slide in on Scroll/index-CF.html @@ -0,0 +1,143 @@ + + + + + Document + + + +
+ +

Slide in on Scroll

+ +

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 pariaturlores sunt esse magni, ut, dignissimos.

+

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

+

Adipisicing elit. Tempore tempora rerum..

+

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.

+ + + + +
+ + + + + + + From 1776af1042fee81f0d86835c43eba2038d3e3a94 Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Fri, 3 Feb 2017 20:57:35 -0800 Subject: [PATCH 13/15] working on Day 15 --- 15 - LocalStorage/index-START-CF.html | 64 +++++++++++++++++++++++++++ 15 - LocalStorage/index-START.html | 26 +++++++++++ 2 files changed, 90 insertions(+) create mode 100644 15 - LocalStorage/index-START-CF.html diff --git a/15 - LocalStorage/index-START-CF.html b/15 - LocalStorage/index-START-CF.html new file mode 100644 index 0000000000..1dcefdabab --- /dev/null +++ b/15 - LocalStorage/index-START-CF.html @@ -0,0 +1,64 @@ + + + + + LocalStorage + + + + + + + +
+

LOCAL TAPAS

+

+
    +
  • Loading Tapas...
    • +
+
+ + +
+
+ + + + + + + diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html index d444f1d68b..1dcefdabab 100644 --- a/15 - LocalStorage/index-START.html +++ b/15 - LocalStorage/index-START.html @@ -30,6 +30,32 @@

LOCAL TAPAS

const itemsList = document.querySelector('.plates'); const items = []; + function addItem(e){ + e.preventDefault(); + const text = (this.querySelector('[name=item]')).value; + const item = { + text: text, + done: false + }; + items.push(item); + populateList(items, itemsList); + this.reset(); + } + + function populateList(plates = [], platesList) { + platesList.innerHTML = plates.map((plate, index) => { + return ` +
  • + +
    • + `; + }).join(''); + } + + addItems.addEventListener('submit', addItem); + + + From 4bfb48b7bdc7192e24a33527b021ef7dbc989995 Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Sat, 4 Feb 2017 00:49:44 -0800 Subject: [PATCH 14/15] continuing along with the video - halfway --- 15 - LocalStorage/index-START-CF.html | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/15 - LocalStorage/index-START-CF.html b/15 - LocalStorage/index-START-CF.html index 1dcefdabab..f1a7171f39 100644 --- a/15 - LocalStorage/index-START-CF.html +++ b/15 - LocalStorage/index-START-CF.html @@ -31,27 +31,36 @@

    LOCAL TAPAS

    const items = []; function addItem(e){ - e.preventDefault(); + e.preventDefault(); //First thing, we prevent the form from refreshing the page by calling preventDefault. + + //The current context is the form, so this would refer to it. so running querySelector on this, looking for an element that contains the attribute name=item will return the textfield. + //The value of that textfield is what we are after. const text = (this.querySelector('[name=item]')).value; + + //create an Object using the value from the text field. const item = { text: text, done: false }; + //push the item in to the items array items.push(item); + + //then call this function to update the unordered list in the html to display the recently added item. populateList(items, itemsList); this.reset(); } function populateList(plates = [], platesList) { - platesList.innerHTML = plates.map((plate, index) => { + platesList.innerHTML = plates.map((plate, i) => { return `
  • - + +
    • `; }).join(''); } - + //We add an eventListener 'submit' to the FORM instead of the button so that the event will trigger not just on button clicks, but also on pressing enter on the keyboard. addItems.addEventListener('submit', addItem); From 9d45ee194a4f649c3aa91bc800891c2c71c65709 Mon Sep 17 00:00:00 2001 From: QbanCowboy Date: Sun, 5 Feb 2017 15:06:03 -0800 Subject: [PATCH 15/15] Finished the day - learned about using the local Storage and Event Delegation. --- 15 - LocalStorage/index-START-CF.html | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/15 - LocalStorage/index-START-CF.html b/15 - LocalStorage/index-START-CF.html index f1a7171f39..02dc3a73c3 100644 --- a/15 - LocalStorage/index-START-CF.html +++ b/15 - LocalStorage/index-START-CF.html @@ -28,7 +28,7 @@

    LOCAL TAPAS