JS Drum Kit

Update CSS Variables with JS

+ Spacing: + + + Blur: + + + Base Color + +

Date: Sat, 10 Dec 2016 11:21:23 -0500 Subject: [PATCH 05/14] Day 3: Set initial value of colorpicker to red --- 03 - CSS Variables/day-03.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/03 - CSS Variables/day-03.html b/03 - CSS Variables/day-03.html index da24e716dd..089033918b 100644 --- a/03 - CSS Variables/day-03.html +++ b/03 - CSS Variables/day-03.html @@ -15,7 +15,7 @@

Update CSS Variables with JS

Base Color - +

From 5eccbef2bea21be9ed7414cc2b25d64d2818db7b Mon Sep 17 00:00:00 2001 From: Dan Denney Date: Sun, 11 Dec 2016 11:02:57 -0500 Subject: [PATCH 06/14] Day 4: Add a series of array cardio exercises These are super useful, it was helpful to go over them as a refresher from es6.io. I have solid ideas now on how I can sort data in my track life project. --- 04 - Array Cardio Day 1/day-04.html | 10 ++++ 04 - Array Cardio Day 1/day-04.js | 86 +++++++++++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 04 - Array Cardio Day 1/day-04.html create mode 100644 04 - Array Cardio Day 1/day-04.js diff --git a/04 - Array Cardio Day 1/day-04.html b/04 - Array Cardio Day 1/day-04.html new file mode 100644 index 0000000000..0d5bf2c40d --- /dev/null +++ b/04 - Array Cardio Day 1/day-04.html @@ -0,0 +1,10 @@ + + + + + Array Cardio 💪 + + + + + diff --git a/04 - Array Cardio Day 1/day-04.js b/04 - Array Cardio Day 1/day-04.js new file mode 100644 index 0000000000..ee3e1b06e8 --- /dev/null +++ b/04 - Array Cardio Day 1/day-04.js @@ -0,0 +1,86 @@ +// Get your shorts on - this is an array workout! +// ## Array Cardio Day 1 + +// Some data we can work with + +const inventors = [ + { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, + { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, + { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, + { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, + { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, + { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, + { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, +]; + +const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry']; + +const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; + +// Array.prototype.filter() +// 1. Filter the list of inventors for those who were born in the 1500's +const born1500s = inventors.filter( inventor => inventor.year > 1500 && inventor.year < 1600 ); +// console.table(born1500s); + +// Array.prototype.map() +// 2. Give us an array of the inventory first and last names +const fullNames = inventors.map( inventor => `${inventor.first} ${inventor.last}` ); +// console.log(fullNames); + +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest +// const orderedByAge = inventors.sort( function(a, b) { +// if ( a.year > b.year ) { +// return 1; +// } else { +// return -1; +// } +// }); +const orderedByAge = inventors.sort((a, b) => a.year > b.year ? 1 : -1); +// console.table(orderedByAge); + +// Array.prototype.reduce() +// 4. How many years did all the inventors live? +const totalYears = inventors.reduce( ( total, inventor ) => { + return total + (inventor.passed - inventor.year); +}, 0 ); +// console.log(totalYears); + +// 5. Sort the inventors by years lived +const sortByOldest = inventors.sort( function( a, b ) { + const lastPerson = a.passed - a.year; + const nextPerson = b.passed - b.year; + return lastPerson > nextPerson ? -1 : 1; +}); +// console.table(sortByOldest); + +// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name +// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + +// const boulevards = document.querySelector('.mw-category'); +// const links = Array.from(boulevards.querySelectorAll('a')); +// const de = links +// .map( link => link.textContent ) +// .filter( streetName => streetName.includes('de') ); + +// 7. sort Exercise +// Sort the people alphabetically by last name +const sortAlphabetically = people.sort( (lastOne, nextOne) => { + const [aLast, aFirst] = lastOne.split(', '); + const [bLast, bFirst] = nextOne.split(', '); + return aLast > bLast ? 1 : -1; +}); +// console.table(sortAlphabetically); + +// 8. Reduce Exercise +// Sum up the instances of each of these +const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + +const transportation = data.reduce( function( obj, item ) { + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; +}, {}); +console.log(transportation); From ce3b5b28be98e5e9bb7d52e1fb188e2c0d644a45 Mon Sep 17 00:00:00 2001 From: Dan Denney Date: Mon, 12 Dec 2016 18:12:45 -0500 Subject: [PATCH 07/14] Day 5: Toggle classes for creating sliding panels Biggest takeaway was that you can log the properties that are being transitioned. I also love more practice of creating small functions and calling them in event listeners. --- 05 - Flex Panel Gallery/day-05.html | 129 ++++++++++++++++++++++++++++ 05 - Flex Panel Gallery/day-05.js | 23 +++++ 2 files changed, 152 insertions(+) create mode 100644 05 - Flex Panel Gallery/day-05.html create mode 100644 05 - Flex Panel Gallery/day-05.js diff --git a/05 - Flex Panel Gallery/day-05.html b/05 - Flex Panel Gallery/day-05.html new file mode 100644 index 0000000000..2abe9181aa --- /dev/null +++ b/05 - Flex Panel Gallery/day-05.html @@ -0,0 +1,129 @@ + + + + + Flex Panels 💪 + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + diff --git a/05 - Flex Panel Gallery/day-05.js b/05 - Flex Panel Gallery/day-05.js new file mode 100644 index 0000000000..47191ac981 --- /dev/null +++ b/05 - Flex Panel Gallery/day-05.js @@ -0,0 +1,23 @@ +function day05() { + + const panels = document.querySelectorAll('.panel'); + + function toggleOpen() { + this.classList.toggle('open'); + console.clear(); + console.log(panels); + } + + function toggleActive(e) { + console.log(e.propertyName); // Keeping this so I remember to use it + if (e.propertyName.includes('flex')) { + this.classList.toggle('open-active'); + } + } + + panels.forEach(panel => panel.addEventListener('click', toggleOpen)); + panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); + +}; + +day05(); From 8bf46eb6d50b2b0ae55f3bb4060607467a8ec5fa Mon Sep 17 00:00:00 2001 From: Dan Denney Date: Wed, 14 Dec 2016 17:08:41 -0500 Subject: [PATCH 08/14] feat: Output count of times ranked for the perf text --- 06 - Type Ahead/day-06.html | 19 +++++++++++++++++++ 06 - Type Ahead/day-06.js | 17 +++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 06 - Type Ahead/day-06.html create mode 100644 06 - Type Ahead/day-06.js diff --git a/06 - Type Ahead/day-06.html b/06 - Type Ahead/day-06.html new file mode 100644 index 0000000000..d385fc5ba0 --- /dev/null +++ b/06 - Type Ahead/day-06.html @@ -0,0 +1,19 @@ + + + + + Type Ahead 👀 + + + + + + + + diff --git a/06 - Type Ahead/day-06.js b/06 - Type Ahead/day-06.js new file mode 100644 index 0000000000..b4c9ffd2a1 --- /dev/null +++ b/06 - Type Ahead/day-06.js @@ -0,0 +1,17 @@ +// Get the data +const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; + +// Create an empty array for the cities +const cities = []; + +// Promises return as a promise +// const prom = fetch(endpoint); +// console.clear(); +// console.log(prom); + +fetch(endpoint) + .then(blob => blob.json()) + .then(data => cities.push(...data)) + +console.clear(); +console.log(cities); From 1999cf5a0b4c90b228c914ecbfa1807b0cc3d81d Mon Sep 17 00:00:00 2001 From: Dan Denney Date: Thu, 15 Dec 2016 19:30:13 -0500 Subject: [PATCH 09/14] Day 6: Add a functional type ahead This one blew my mind. It seems like such a complicated feature but Wes made it feel easy. I love that he found the same regex that I used in my data project and I'm likely going to be able to use this in there to sort tracks --- 06 - Type Ahead/day-06.js | 33 +++++++++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/06 - Type Ahead/day-06.js b/06 - Type Ahead/day-06.js index b4c9ffd2a1..549c76869e 100644 --- a/06 - Type Ahead/day-06.js +++ b/06 - Type Ahead/day-06.js @@ -13,5 +13,34 @@ fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)) -console.clear(); -console.log(cities); +function findMatches(wordToMatch, cities) { + return cities.filter(place => { + const regex = new RegExp(wordToMatch, 'gi'); + return place.city.match(regex) || place.state.match(regex); + }); +} + +function numberWithCommas(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); +} + +function displayMatches() { + const matchArray = findMatches(this.value, cities); + const html = matchArray.map(place => { + const regex = new RegExp(this.value, 'gi'); + const cityName = place.city.replace(regex, `${this.value}`); + const stateName = place.state.replace(regex, `${this.value}`); + return ` +

+ ${cityName}, ${stateName} + ${numberWithCommas(place.population)} +

+ `; + }).join(''); + suggestions.innerHTML = html; +} + +const searchInput = document.querySelector('.search'); +const suggestions = document.querySelector('.suggestions'); + + searchInput.addEventListener('input', displayMatches); From e74bf18628385aac7542e85efe263e1a485632f1 Mon Sep 17 00:00:00 2001 From: Dan Denney Date: Thu, 15 Dec 2016 19:49:06 -0500 Subject: [PATCH 10/14] Day 7: Add Array Cardio 2 These are very useful for the things that I like to do. I had to google a way to find the index of items last night and this video made me realize that I can improve the initial way I retrieve the items to match them better. --- 07 - Array Cardio Day 2/day-07.html | 13 +++++++ 07 - Array Cardio Day 2/day-07.js | 55 +++++++++++++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100644 07 - Array Cardio Day 2/day-07.html create mode 100644 07 - Array Cardio Day 2/day-07.js diff --git a/07 - Array Cardio Day 2/day-07.html b/07 - Array Cardio Day 2/day-07.html new file mode 100644 index 0000000000..5d55e99590 --- /dev/null +++ b/07 - Array Cardio Day 2/day-07.html @@ -0,0 +1,13 @@ + + + + + Document + + + + + diff --git a/07 - Array Cardio Day 2/day-07.js b/07 - Array Cardio Day 2/day-07.js new file mode 100644 index 0000000000..62fa9ab146 --- /dev/null +++ b/07 - Array Cardio Day 2/day-07.js @@ -0,0 +1,55 @@ +// ## Array Cardio Day 2 + +const people = [ + { name: 'Wes', year: 1988 }, + { name: 'Kait', year: 1986 }, + { name: 'Irv', year: 1970 }, + { name: 'Lux', year: 2015 }, +]; + +const comments = [ + { text: 'Love this!', id: 523423 }, + { text: 'Super good', id: 823423 }, + { text: 'You are the best', id: 2039842 }, + { text: 'Ramen in my fav food ever', id: 123523 }, + { text: 'Nice Nice Nice!', id: 542328 } +]; + +// Some and Every Checks +// Array.prototype.some() // is at least one person 19? +// const isAdult = people.some(function(person) { +// const currentYear = (new Date()).getFullYear(); +// if(currentYear - person.year >= 19) { +// return true; +// } +// }); + +const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); + +console.log({isAdult}); +// Array.prototype.every() // is everyone 19? + +const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); +console.log({allAdults}); + +// Array.prototype.find() +// Find is like filter, but instead returns just the one you are looking for +// find the comment with the ID of 823423 + + +const comment = comments.find(comment => comment.id === 823423); + +console.log(comment); + +// Array.prototype.findIndex() +// Find the comment with this ID +// delete the comment with the ID of 823423 +const index = comments.findIndex(comment => comment.id === 823423); +console.log(index); + +// comments.splice(index, 1); + +const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) +]; From 3d7179ced80a3c70c7d7607bc40b1e244efe34a0 Mon Sep 17 00:00:00 2001 From: Dan Denney Date: Sat, 17 Dec 2016 15:01:09 -0500 Subject: [PATCH 11/14] Day 8: Add drawing on Canvas This was pretty cool, it's wild how easy it is to get started with something as seemingly complicated as canvas with a great teacher. --- 08 - Fun with HTML5 Canavsa/day-08.html | 19 ++++++++++ 08 - Fun with HTML5 Canavsa/day-08.js | 49 +++++++++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100644 08 - Fun with HTML5 Canavsa/day-08.html create mode 100644 08 - Fun with HTML5 Canavsa/day-08.js diff --git a/08 - Fun with HTML5 Canavsa/day-08.html b/08 - Fun with HTML5 Canavsa/day-08.html new file mode 100644 index 0000000000..281cdca5eb --- /dev/null +++ b/08 - Fun with HTML5 Canavsa/day-08.html @@ -0,0 +1,19 @@ + + + + + HTML5 Canvas + + +

+ + + + + + diff --git a/08 - Fun with HTML5 Canavsa/day-08.js b/08 - Fun with HTML5 Canavsa/day-08.js new file mode 100644 index 0000000000..eda50fb6c8 --- /dev/null +++ b/08 - Fun with HTML5 Canavsa/day-08.js @@ -0,0 +1,49 @@ +const canvas = document.querySelector('#draw'); +const ctx = canvas.getContext('2d'); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; +ctx.strokeStyle = '#b51f24'; +ctx.lineJoin = 'round'; +ctx.lineCap = 'round'; +ctx.lineWidth = 50; + +let isDrawing = false; +let lastX = 0; +let lastY = 0; +let hue = 0; +let direction = true; + +function draw(e) { + if(!isDrawing) return; { // stop when not moused down + console.log(e); + ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; + ctx.beginPath(); + ctx.moveTo(lastX, lastY); + ctx.lineTo(e.offsetX, e.offsetY); + ctx.stroke(); + [lastX, lastY] = [e.offsetX, e.offsetY]; + + hue++; + if( hue >= 360) { + hue = 0; + } + if( ctx.lineWidth >= 100 || ctx.lineWidth <= 1) { + direction = !direction; + } + if(direction) { + ctx.lineWidth++; + } else { + ctx.lineWidth--; + } + + } +} + +canvas.addEventListener('mousemove', draw); +canvas.addEventListener('mousedown', (e)=> { + isDrawing = true; + [lastX, lastY] = [e.offsetX, e.offsetY]; +}); +canvas.addEventListener('mouseup', ()=> isDrawing = false); +canvas.addEventListener('mouseout', ()=> isDrawing = false); From 28a477977bc60ac452c2c084024a5a12dabd356a Mon Sep 17 00:00:00 2001 From: Dan Denney Date: Mon, 19 Dec 2016 21:19:38 -0500 Subject: [PATCH 12/14] Day 10: Add a "check all inbetween" This is so rad. We were supposed to try it on our own and I didn't write the code but I mapped out how I thought I should to it. While I was in range, my solution was way more complex. I thought I needed to make arrays to determine order, but flipping a variable was so much better. --- .../day-10.html | 109 ++++++++++++++++++ .../day-10.js | 41 +++++++ 2 files changed, 150 insertions(+) create mode 100644 10 - Hold Shift and Check Checkboxes/day-10.html create mode 100644 10 - Hold Shift and Check Checkboxes/day-10.js diff --git a/10 - Hold Shift and Check Checkboxes/day-10.html b/10 - Hold Shift and Check Checkboxes/day-10.html new file mode 100644 index 0000000000..f868873e36 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/day-10.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!

+ + + + + diff --git a/10 - Hold Shift and Check Checkboxes/day-10.js b/10 - Hold Shift and Check Checkboxes/day-10.js new file mode 100644 index 0000000000..94827d2fff --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/day-10.js @@ -0,0 +1,41 @@ +function selectAll () { + + // Private variables + const checkboxes = document.querySelectorAll('input[type="checkbox"]'); + let lastChecked; + + // Add event listeners + checkboxes.forEach( checkbox => checkbox.addEventListener ('click', handleCheck) ); + + // Handle check + function handleCheck (e) { + + // If they had the shift key down + // And if they are checking it + if ( e.shiftKey && this.checked ) { + + let inBetween = false; + + // loop over all checkboxes + checkboxes.forEach ( checkbox => { + + // True starts at first or last checked + // Flips inBetween to to true until first or last checked + if ( checkbox === this || checkbox === lastChecked ) { + inBetween = !inBetween; + } + + // Checks the boxes that have been flipped to true + if ( inBetween ) { + checkbox.checked = true; + } + + }); + } + + lastChecked = this; + } + +} + +selectAll(); From 1f872e5391ce78c36937754668fa9a4c8e529465 Mon Sep 17 00:00:00 2001 From: Dan Denney Date: Wed, 21 Dec 2016 20:26:16 -0500 Subject: [PATCH 13/14] Day 11: Add a custom video player My favorite part of this was reiterating how powerful it is to listen for and console.log an event: thing(e). You get all of the methods available on that object in devtools. --- 11 - Custom Video Player/scripts.js | 60 +++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..028e356770 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,60 @@ +// ************************************* +// +// Custom Video Player +// -> Description +// +// ************************************* + +function customVideoPlayer() { + + // ------------------------------------- + // Private Variables + // ------------------------------------- + + const player = document.querySelector('.player'); + const video = player.querySelector('.viewer'); + const playToggle = player.querySelector('.toggle'); + const ranges = player.querySelectorAll('.player__slider'); + + // ------------------------------------- + // Set Event Handlers + // ------------------------------------- + + video.addEventListener('click', togglePlay); + playToggle.addEventListener('click', togglePlay); + video.addEventListener('play', updateButton); + video.addEventListener('pause', updateButton); + ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); + ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); + + // ------------------------------------- + // Functions + // ------------------------------------- + + function togglePlay () { + + if (video.paused) { + video.play(); + } else { + video.pause(); + } + + } + + function updateButton () { + const icon = this.paused ? '►' : '❚ ❚'; + console.log(icon); + playToggle.textContent = icon; + } + + function handleRangeUpdate () { + video[this.name] = this.value; + } + +} + +// ------------------------------------- +// Initialize +// ------------------------------------- + +customVideoPlayer(); From 5931aea52fd2c6e8645f811bb12bd6ea1477cfc4 Mon Sep 17 00:00:00 2001 From: Dan Denney Date: Sun, 8 Jan 2017 16:50:23 +0000 Subject: [PATCH 14/14] Day 12: Add key detection I debated switching it out to the Konami code but I'll just remember that I have this as a start if I ever need that --- 12 - Key Sequence Detection/day-12.html | 12 ++++++++++++ 12 - Key Sequence Detection/day-12.js | 16 ++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 12 - Key Sequence Detection/day-12.html create mode 100644 12 - Key Sequence Detection/day-12.js diff --git a/12 - Key Sequence Detection/day-12.html b/12 - Key Sequence Detection/day-12.html new file mode 100644 index 0000000000..458ef7f3bd --- /dev/null +++ b/12 - Key Sequence Detection/day-12.html @@ -0,0 +1,12 @@ + + + + + Key Detection + + + + + + diff --git a/12 - Key Sequence Detection/day-12.js b/12 - Key Sequence Detection/day-12.js new file mode 100644 index 0000000000..1220179de6 --- /dev/null +++ b/12 - Key Sequence Detection/day-12.js @@ -0,0 +1,16 @@ +// Arrays +const pressed = []; +const secretCode = 'boom'; + +// Listen for keystrokes +window.addEventListener('keyup', (e) => { + + console.log(e.pressed); + + pressed.push(e.key); + pressed.splice(-secretCode.length -1, pressed.length - secretCode.length); + if(pressed.join('').includes(secretCode)) { + console.log('BOOM!'); + cornify_add(); + } +});