From c9314a4b4ceea8ebb936cf7cc48454a6fa11c85d Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Thu, 11 Oct 2018 14:43:36 -0400 Subject: [PATCH 01/23] Initial commit This is the start of the completed branch. This is so I do not commit to master. Adds js scripts file --- 01 - JavaScript Drum Kit/index-START.html | 1 + 01 - JavaScript Drum Kit/scripts.js | 0 2 files changed, 1 insertion(+) create mode 100644 01 - JavaScript Drum Kit/scripts.js diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..247a653b32 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -4,6 +4,7 @@ JS Drum Kit + diff --git a/01 - JavaScript Drum Kit/scripts.js b/01 - JavaScript Drum Kit/scripts.js new file mode 100644 index 0000000000..e69de29bb2 From 118388e2cf2c865c91a0353cebb8d82d0a36ac4e Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Thu, 11 Oct 2018 15:16:48 -0400 Subject: [PATCH 02/23] Adds responsive styling for keys Adds Responsive CSS Adds keywrap for responsive HTML structure setup --- 01 - JavaScript Drum Kit/index-START.html | 108 +++++++++++----------- 01 - JavaScript Drum Kit/style.css | 11 +++ 2 files changed, 64 insertions(+), 55 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 247a653b32..4ad13c9c9f 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,64 @@ - - JS Drum Kit - - + + JS Drum Kit + +
+
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+
-
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
+ + + + + + + + + - - - - - - - - - - - + diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 0673a8752a..42b7ab3ae3 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -49,3 +49,14 @@ kbd { letter-spacing: .1rem; color: #ffc600; } + +.keywrap { + display: flex; + justify-content: center; +} + +@media (max-width: 950px) { + .keywrap { + flex-wrap: wrap; + } +} From 512d6f0d70f3777ce4846a851d73821b93e39a9b Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Thu, 11 Oct 2018 15:17:36 -0400 Subject: [PATCH 03/23] Adds audio playback --- 01 - JavaScript Drum Kit/scripts.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/01 - JavaScript Drum Kit/scripts.js b/01 - JavaScript Drum Kit/scripts.js index e69de29bb2..572b39d871 100644 --- a/01 - JavaScript Drum Kit/scripts.js +++ b/01 - JavaScript Drum Kit/scripts.js @@ -0,0 +1,17 @@ +window.addEventListener('keydown', function(e) { + // console.log(e.keyCode); + + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + + // console.log(audio); + + // stop the function from running all together + if (!audio) return; + + // Rewinds audio file to start + audio.currentTime = 0; + + // Plays audio file + audio.play(); + +}); From 301894af889987dcef46c6de659ae308df8daa5c Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Thu, 11 Oct 2018 15:41:00 -0400 Subject: [PATCH 04/23] Finishes JS Cleans up original function into playSound function Adds transitions for when the keys are hit --- 01 - JavaScript Drum Kit/scripts.js | 31 ++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/01 - JavaScript Drum Kit/scripts.js b/01 - JavaScript Drum Kit/scripts.js index 572b39d871..595df1f273 100644 --- a/01 - JavaScript Drum Kit/scripts.js +++ b/01 - JavaScript Drum Kit/scripts.js @@ -1,17 +1,38 @@ -window.addEventListener('keydown', function(e) { +/******************************************** + * Call functions on Window Event Listener +********************************************/ +function playSound(e) { // console.log(e.keyCode); const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); - // console.log(audio); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + // console.log(key); + // stop the function from running all together if (!audio) return; - + // Rewinds audio file to start audio.currentTime = 0; - + // Plays audio file audio.play(); + key.classList.add('playing'); +} + +function removeTransition(e) { + // console.log(e); + + // skip if it's not a transform + if(e.propertyName !== 'transform') return; + + // console.log(e.propertyName); + + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); -}); +window.addEventListener('keydown', playSound); \ No newline at end of file From a016dc7691cd4366c3ab98e334cdaf51ee22dd6a Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Thu, 11 Oct 2018 15:43:55 -0400 Subject: [PATCH 05/23] Removes console logs and additional whitespace --- 01 - JavaScript Drum Kit/scripts.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/01 - JavaScript Drum Kit/scripts.js b/01 - JavaScript Drum Kit/scripts.js index 595df1f273..830a6eb336 100644 --- a/01 - JavaScript Drum Kit/scripts.js +++ b/01 - JavaScript Drum Kit/scripts.js @@ -2,13 +2,8 @@ * Call functions on Window Event Listener ********************************************/ function playSound(e) { - // console.log(e.keyCode); - - const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); - // console.log(audio); - + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); - // console.log(key); // stop the function from running all together if (!audio) return; @@ -22,13 +17,8 @@ function playSound(e) { } function removeTransition(e) { - // console.log(e); - // skip if it's not a transform if(e.propertyName !== 'transform') return; - - // console.log(e.propertyName); - this.classList.remove('playing'); } From 87cabfff79fce66ca833e7050d66788dfccde3e9 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Thu, 11 Oct 2018 16:04:28 -0400 Subject: [PATCH 06/23] Adds scripts.js and style.css I wanted a more segmented workspace that reflects my current workflows --- 02 - JS and CSS Clock/index-START.html | 76 ++++---------------------- 02 - JS and CSS Clock/scripts.js | 28 ++++++++++ 02 - JS and CSS Clock/style.css | 46 ++++++++++++++++ 3 files changed, 85 insertions(+), 65 deletions(-) create mode 100644 02 - JS and CSS Clock/scripts.js create mode 100644 02 - JS and CSS Clock/style.css diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7cbf5f6ba6..99da02af8d 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,20 @@ - - JS + CSS Clock + + JS + CSS Clock + +
+
+
+
+
+
+
-
-
-
-
-
-
-
- - - - - + diff --git a/02 - JS and CSS Clock/scripts.js b/02 - JS and CSS Clock/scripts.js new file mode 100644 index 0000000000..830a6eb336 --- /dev/null +++ b/02 - JS and CSS Clock/scripts.js @@ -0,0 +1,28 @@ +/******************************************** + * Call functions on Window Event Listener +********************************************/ +function playSound(e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + + // stop the function from running all together + if (!audio) return; + + // Rewinds audio file to start + audio.currentTime = 0; + + // Plays audio file + audio.play(); + key.classList.add('playing'); +} + +function removeTransition(e) { + // skip if it's not a transform + if(e.propertyName !== 'transform') return; + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + +window.addEventListener('keydown', playSound); \ No newline at end of file diff --git a/02 - JS and CSS Clock/style.css b/02 - JS and CSS Clock/style.css new file mode 100644 index 0000000000..b327ff6f6b --- /dev/null +++ b/02 - JS and CSS Clock/style.css @@ -0,0 +1,46 @@ +html { + background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50); + background-size: cover; + font-family: 'helvetica neue'; + text-align: center; + font-size: 10px; +} + +body { + margin: 0; + font-size: 2rem; + display: flex; + flex: 1; + min-height: 100vh; + align-items: center; +} + +.clock { + width: 30rem; + height: 30rem; + border: 20px solid white; + border-radius: 50%; + margin: 50px auto; + position: relative; + padding: 2rem; + box-shadow: + 0 0 0 4px rgba(0,0,0,0.1), + inset 0 0 0 3px #EFEFEF, + inset 0 0 10px black, + 0 0 10px rgba(0,0,0,0.2); +} + +.clock-face { + position: relative; + width: 100%; + height: 100%; + transform: translateY(-3px); /* account for the height of the clock hands */ +} + +.hand { + width: 50%; + height: 6px; + background: black; + position: absolute; + top: 50%; +} \ No newline at end of file From 018b6d71744a2230e566d3179ca225a5e08d5d67 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 10:07:01 -0400 Subject: [PATCH 07/23] Adds transforms and transitions --- 02 - JS and CSS Clock/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/02 - JS and CSS Clock/style.css b/02 - JS and CSS Clock/style.css index b327ff6f6b..08e9da8704 100644 --- a/02 - JS and CSS Clock/style.css +++ b/02 - JS and CSS Clock/style.css @@ -43,4 +43,8 @@ body { background: black; position: absolute; top: 50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1) } \ No newline at end of file From 027ad71f343798e70dc57f0ca6c59aa505736f15 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 10:07:24 -0400 Subject: [PATCH 08/23] Adds JS file to make clockwork --- 02 - JS and CSS Clock/scripts.js | 43 ++++++++++++++++---------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/02 - JS and CSS Clock/scripts.js b/02 - JS and CSS Clock/scripts.js index 830a6eb336..3c40c35424 100644 --- a/02 - JS and CSS Clock/scripts.js +++ b/02 - JS and CSS Clock/scripts.js @@ -1,28 +1,27 @@ /******************************************** * Call functions on Window Event Listener ********************************************/ -function playSound(e) { - const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); - const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); - - // stop the function from running all together - if (!audio) return; - - // Rewinds audio file to start - audio.currentTime = 0; - - // Plays audio file - audio.play(); - key.classList.add('playing'); -} +const secondHand = document.querySelector('.second-hand'); +const minsHand = document.querySelector('.min-hand'); +const hourHand = document.querySelector('.hour-hand'); -function removeTransition(e) { - // skip if it's not a transform - if(e.propertyName !== 'transform') return; - this.classList.remove('playing'); -} -const keys = document.querySelectorAll('.key'); -keys.forEach(key => key.addEventListener('transitionend', removeTransition)); +function setDate() { + const now = new Date(); + const seconds = now.getSeconds(); + const secondsDegrees = ((seconds / 60) * 360) + 90; + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + // console.log(seconds); + + const mins = now.getMinutes(); + const minsDegrees = ((mins / 60) * 360) + 90; + minsHand.style.transform = `rotate(${minsDegrees}deg)`; + // console.log(minutes); -window.addEventListener('keydown', playSound); \ No newline at end of file + const hours = now.getHours(); + const hoursDegrees = ((hours / 12) * 360) + 90; + hourHand.style.transform = `rotate(${hoursDegrees}deg)`; + // console.log(hours); + +} +setInterval(setDate, 1000); From 056d1dba6c61d6cf98fb76063d564bcd36891bea Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 15:18:13 -0400 Subject: [PATCH 09/23] Adds JS and CSS files --- 03 - CSS Variables/index-START.html | 52 ++++++++--------------------- 03 - CSS Variables/scripts.js | 0 03 - CSS Variables/style.css | 20 +++++++++++ 3 files changed, 34 insertions(+), 38 deletions(-) create mode 100644 03 - CSS Variables/scripts.js create mode 100644 03 - CSS Variables/style.css diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..0f832e90fa 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,51 +1,27 @@ - - Scoped CSS Variables and JS + + Scoped CSS Variables and JS + -

Update CSS Variables with JS

+

Update CSS Variables with JS

-
- - +
+ + - - + + - - -
+ + +
- + - - - + diff --git a/03 - CSS Variables/scripts.js b/03 - CSS Variables/scripts.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css new file mode 100644 index 0000000000..d1a67c5b37 --- /dev/null +++ b/03 - CSS Variables/style.css @@ -0,0 +1,20 @@ +/* + misc styles, nothing to do with CSS variables +*/ + +body { + text-align: center; + background: #193549; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; + font-size: 50px; +} + +.controls { + margin-bottom: 50px; +} + +input { + width: 100px; +} \ No newline at end of file From 1671fefbaec648447c9768550513793dcbeaf52f Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 15:24:38 -0400 Subject: [PATCH 10/23] Adds variables for CSS --- 03 - CSS Variables/style.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css index d1a67c5b37..1024a28aef 100644 --- a/03 - CSS Variables/style.css +++ b/03 - CSS Variables/style.css @@ -1,6 +1,21 @@ /* misc styles, nothing to do with CSS variables */ +:root { + --base: #ffc600; + --spacing: 10px; + --blur: 10px; +} + +img { + padding: var(--spacing); + background: var(--base); + filter: blur(--blur); +} + +.hl { + color: var(--base); +} body { text-align: center; From a7b65f0ad5522a4510a3a7682e8c43a2cf61fae1 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 15:49:46 -0400 Subject: [PATCH 11/23] Fixes blur variable and adds JS solution --- 03 - CSS Variables/scripts.js | 15 +++++++++++++++ 03 - CSS Variables/style.css | 8 +++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/03 - CSS Variables/scripts.js b/03 - CSS Variables/scripts.js index e69de29bb2..05f6e05df2 100644 --- a/03 - CSS Variables/scripts.js +++ b/03 - CSS Variables/scripts.js @@ -0,0 +1,15 @@ +const inputs = document.querySelectorAll('.controls input'); + +function handleUpdate(params) { + // console.log(this.value); + + const suffix = this.dataset.sizing || ''; + // console.log(suffix); + + // console.log(this.name); + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); +} + +inputs.forEach(input => input.addEventListener('change', handleUpdate)); +inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); + diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css index 1024a28aef..6880ec8eb8 100644 --- a/03 - CSS Variables/style.css +++ b/03 - CSS Variables/style.css @@ -10,13 +10,19 @@ img { padding: var(--spacing); background: var(--base); - filter: blur(--blur); + filter: blur(var(--blur)); } .hl { color: var(--base); } +#base { + margin: 0; + padding: 0; + border: none; +} + body { text-align: center; background: #193549; From 1e86532fb7e7c136566108a488450316947349f7 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 15:53:01 -0400 Subject: [PATCH 12/23] Removes extra space --- 03 - CSS Variables/scripts.js | 1 - 1 file changed, 1 deletion(-) diff --git a/03 - CSS Variables/scripts.js b/03 - CSS Variables/scripts.js index 05f6e05df2..a37c87a7c8 100644 --- a/03 - CSS Variables/scripts.js +++ b/03 - CSS Variables/scripts.js @@ -12,4 +12,3 @@ function handleUpdate(params) { inputs.forEach(input => input.addEventListener('change', handleUpdate)); inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); - From 161653e490ba46a2e5f73a31d9990209c6b16ed2 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 16:00:05 -0400 Subject: [PATCH 13/23] Starts Exercise 4 Moves JS to seperate file Adds CSS to make it look better --- 04 - Array Cardio Day 1/index-START.html | 57 +++--------------------- 04 - Array Cardio Day 1/scripts.js | 46 +++++++++++++++++++ 04 - Array Cardio Day 1/style.css | 8 ++++ 3 files changed, 59 insertions(+), 52 deletions(-) create mode 100644 04 - Array Cardio Day 1/scripts.js create mode 100644 04 - Array Cardio Day 1/style.css diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..c262a0da9a 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,59 +1,12 @@ - - Array Cardio 💪 + + Array Cardio 💪 + -

Psst: have a look at the JavaScript Console 💁

- +

Psst: have a look at the JavaScript Console 💁

+ diff --git a/04 - Array Cardio Day 1/scripts.js b/04 - Array Cardio Day 1/scripts.js new file mode 100644 index 0000000000..aa14e0bb4c --- /dev/null +++ b/04 - Array Cardio Day 1/scripts.js @@ -0,0 +1,46 @@ +// 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 }, + { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, + { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, + { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, + { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, + { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } +]; + +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 + +// Array.prototype.map() +// 2. Give us an array of the inventors' first and last names + +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest + +// Array.prototype.reduce() +// 4. How many years did all the inventors live? + +// 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 + + +// 7. sort Exercise +// Sort the people alphabetically by last name + +// 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']; \ No newline at end of file diff --git a/04 - Array Cardio Day 1/style.css b/04 - Array Cardio Day 1/style.css new file mode 100644 index 0000000000..0df884ad7a --- /dev/null +++ b/04 - Array Cardio Day 1/style.css @@ -0,0 +1,8 @@ +body { + text-align: center; + background: #b7116f; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; + font-size: 50px; +} From afb418fcfb06706a643b5968377f366ddd5c09bf Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 16:07:39 -0400 Subject: [PATCH 14/23] Adds function for first exercise of exercise #4 --- 04 - Array Cardio Day 1/scripts.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/04 - Array Cardio Day 1/scripts.js b/04 - Array Cardio Day 1/scripts.js index aa14e0bb4c..6684417bdb 100644 --- a/04 - Array Cardio Day 1/scripts.js +++ b/04 - Array Cardio Day 1/scripts.js @@ -22,6 +22,17 @@ const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's +/* const fifteen = inventors.filter(function(inventor) { + if (inventor.year >= 1500 && inventor.year <= 1599) { + return true; // keep it + } +}); */ + +/********************************************** + * ️️️☝️ Consolidating the above function ☝️ +*********************************************/ +const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year <= 1599); +console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names From 40d02afb626cc1ad8fb8640ba7a8dbffb7b54344 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 16:11:11 -0400 Subject: [PATCH 15/23] Completes Exercise 2 in Exercise 4 --- 04 - Array Cardio Day 1/scripts.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/04 - Array Cardio Day 1/scripts.js b/04 - Array Cardio Day 1/scripts.js index 6684417bdb..56749e9747 100644 --- a/04 - Array Cardio Day 1/scripts.js +++ b/04 - Array Cardio Day 1/scripts.js @@ -36,6 +36,8 @@ console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' 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 From 3f147f24a15e3b5755e922c85b00b663e254cf33 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 16:50:01 -0400 Subject: [PATCH 16/23] Completes Exercise 3, 4 & 5 in Exercise 4 --- 04 - Array Cardio Day 1/scripts.js | 40 ++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/04 - Array Cardio Day 1/scripts.js b/04 - Array Cardio Day 1/scripts.js index 56749e9747..1fa3e94c35 100644 --- a/04 - Array Cardio Day 1/scripts.js +++ b/04 - Array Cardio Day 1/scripts.js @@ -22,11 +22,13 @@ const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's -/* const fifteen = inventors.filter(function(inventor) { +/* +const fifteen = inventors.filter(function(inventor) { if (inventor.year >= 1500 && inventor.year <= 1599) { return true; // keep it } -}); */ +}); +*/ /********************************************** * ️️️☝️ Consolidating the above function ☝️ @@ -41,11 +43,45 @@ console.log(fullNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest +/* +const happyBirthday = inventors.sort(function(a, b) { + if(a.year > b.year) { + return 1; + } else { + return -1; + } +}); +*/ +/********************************************** + * ️️️☝️ Consolidating the above function ☝️ +*********************************************/ +const happyBirthday = inventors.sort((a, b) => a.year > b.year ? 1 : -1); +console.table(happyBirthday); // 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 oldest = inventors.sort(function(a, b) { + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + /* + if (lastguy > nextGuy) { + return -1; + } else { + return 1; + } + */ + /********************************************** + * ️️️☝️ Consolidating the above if statement ☝️ + *********************************************/ + return lastGuy > nextGuy ? -1 : 1; +}); +console.table(oldest); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris From fb80fd05a486f473131558cbadf4939e69982d7e Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 17:15:34 -0400 Subject: [PATCH 17/23] Completes the sixth exercise of Exercise 4 --- 04 - Array Cardio Day 1/index-START.html | 1 + 04 - Array Cardio Day 1/scripts.js | 31 +++++++++++++++++++++++- 04 - Array Cardio Day 1/style.css | 7 ++++++ 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index c262a0da9a..b32e58b4db 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -7,6 +7,7 @@

Psst: have a look at the JavaScript Console 💁

+

Use this LINK for Paris Array Exercise.

diff --git a/04 - Array Cardio Day 1/scripts.js b/04 - Array Cardio Day 1/scripts.js index 1fa3e94c35..cb2cd16a1f 100644 --- a/04 - Array Cardio Day 1/scripts.js +++ b/04 - Array Cardio Day 1/scripts.js @@ -84,7 +84,36 @@ const oldest = inventors.sort(function(a, b) { 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 +/******************************************************************* + * THIS ONLY WORKS IN THE CONSOLE ON THE WIKI PAGE + * https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris +*******************************************************************/ +//const category = document.querySelector('.mw-category'); +/*************************************** + * ✌️ Two ways to convert to an array +***************************************/ +/* ☝️ FIRST - use Array.from - more readable */ +//const links = Array.from(category.querySelectorAll('a')); + +/* ✌️ SECOND - ES6 dot spread */ +// const links = [...(category.querySelectorAll('a')]; + +// const de = links +// .map(link => link.textContent); +// .filter(streetName => streetName.includes('de')); +/**************************************************************** + * FINISHED CODE TO USE IN THE CONSOLE, + * WILL NEED TO TYPE IN YOUR CONST FOR A RETURN VALUE +*****************************************************************/ +/* +const category = document.querySelector('.mw-category'); +const links = Array.from(category.querySelectorAll('a')); + +const de = links + .map(link => link.textContent) + .filter(streetName => streetName.includes('de')); +*/ + // 7. sort Exercise diff --git a/04 - Array Cardio Day 1/style.css b/04 - Array Cardio Day 1/style.css index 0df884ad7a..48f55d04ca 100644 --- a/04 - Array Cardio Day 1/style.css +++ b/04 - Array Cardio Day 1/style.css @@ -6,3 +6,10 @@ body { font-weight: 100; font-size: 50px; } + +a { + color: white; + font-weight: bold; + text-decoration: none; + border-bottom: 10px solid white; +} \ No newline at end of file From 1d0fd523ddd6caeadd605e6efd55de3436e35296 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 19:30:05 -0400 Subject: [PATCH 18/23] Completes exercise 7 for Exercise 4 --- 04 - Array Cardio Day 1/scripts.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/scripts.js b/04 - Array Cardio Day 1/scripts.js index cb2cd16a1f..5ec7f72e2a 100644 --- a/04 - Array Cardio Day 1/scripts.js +++ b/04 - Array Cardio Day 1/scripts.js @@ -115,9 +115,25 @@ const de = links */ - // 7. sort Exercise // Sort the people alphabetically by last name +// const abc = people.sort(function(lastOne, nextOne) { +// const [aLast, aFirst] = lastOne.split(', '); +// const [bLast, bFirst] = nextOne.split(', '); +// // console.log(last, first); +// return aLast > bLast ? -1 : 1; +// }); +/******************************************************** + * ️️️☝️ Turns Proper Function into an Arrow Function ☝️ +********************************************************/ +const abc = people.sort((lastOne, nextOne) => { + const [aLast, aFirst] = lastOne.split(', '); + const [bLast, bFirst] = nextOne.split(', '); + // console.log(last, first); + return aLast > bLast ? -1 : 1; +}); +console.log(abc); + // 8. Reduce Exercise // Sum up the instances of each of these From 1e248f235ccd2d4e638363d979d7c94736f0686d Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 19:31:32 -0400 Subject: [PATCH 19/23] FInished exercise 7 on Exercise 4 on completed --- 04 - Array Cardio Day 1/scripts.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/04 - Array Cardio Day 1/scripts.js b/04 - Array Cardio Day 1/scripts.js index cb2cd16a1f..2cdaf29ea3 100644 --- a/04 - Array Cardio Day 1/scripts.js +++ b/04 - Array Cardio Day 1/scripts.js @@ -114,10 +114,24 @@ const de = links .filter(streetName => streetName.includes('de')); */ - - // 7. sort Exercise // Sort the people alphabetically by last name +// const abc = people.sort(function(lastOne, nextOne) { +// const [aLast, aFirst] = lastOne.split(', '); +// const [bLast, bFirst] = nextOne.split(', '); +// // console.log(last, first); +// return aLast > bLast ? -1 : 1; +// }); +/******************************************************** + * ️️️☝️ Turns Proper Function into an Arrow Function ☝️ +********************************************************/ +const abc = people.sort((lastOne, nextOne) => { + const [aLast, aFirst] = lastOne.split(', '); + const [bLast, bFirst] = nextOne.split(', '); + // console.log(last, first); + return aLast > bLast ? -1 : 1; +}); +console.log(abc); // 8. Reduce Exercise // Sum up the instances of each of these From f2b15570e6ae8d9ccdfcafd03ec8b73d31b26b9c Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 19:34:01 -0400 Subject: [PATCH 20/23] Adds old spacing --- 04 - Array Cardio Day 1/scripts.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/04 - Array Cardio Day 1/scripts.js b/04 - Array Cardio Day 1/scripts.js index 2cdaf29ea3..5ec7f72e2a 100644 --- a/04 - Array Cardio Day 1/scripts.js +++ b/04 - Array Cardio Day 1/scripts.js @@ -114,6 +114,7 @@ const de = links .filter(streetName => streetName.includes('de')); */ + // 7. sort Exercise // Sort the people alphabetically by last name // const abc = people.sort(function(lastOne, nextOne) { @@ -133,6 +134,7 @@ const abc = people.sort((lastOne, nextOne) => { }); console.log(abc); + // 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']; \ No newline at end of file From 6c60ae6ed25ac7c88d90c03e12fec44740369f94 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 20:27:24 -0400 Subject: [PATCH 21/23] Finishes Array Cardio --- 04 - Array Cardio Day 1/scripts.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/scripts.js b/04 - Array Cardio Day 1/scripts.js index 5ec7f72e2a..07801a21ee 100644 --- a/04 - Array Cardio Day 1/scripts.js +++ b/04 - Array Cardio Day 1/scripts.js @@ -137,4 +137,14 @@ console.log(abc); // 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']; \ No newline at end of file +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]++; + console.log(item); + return obj; +}, {}); +console.log(transportation); From 22f2f57c2e35244fc07cc8a25345a075176d0145 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Fri, 12 Oct 2018 21:03:01 -0400 Subject: [PATCH 22/23] Adds scripts and style files, completes exercise --- 05 - Flex Panel Gallery/index-START.html | 140 ++++++----------------- 05 - Flex Panel Gallery/scripts.js | 16 +++ 05 - Flex Panel Gallery/style.css | 99 ++++++++++++++++ 3 files changed, 148 insertions(+), 107 deletions(-) create mode 100644 05 - Flex Panel Gallery/scripts.js create mode 100644 05 - Flex Panel Gallery/style.css diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 71d1c26f00..ecc3596fde 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,114 +1,40 @@ - - Flex Panels 💪 - + + Flex Panels 💪 + + - - - -
-
-

Hey

-

Let's

-

Dance

-
-
-

Give

-

Take

-

Receive

-
-
-

Experience

-

It

-

Today

-
-
-

Give

-

All

-

You can

-
-
-

Life

-

In

-

Motion

-
-
- - - - - +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + diff --git a/05 - Flex Panel Gallery/scripts.js b/05 - Flex Panel Gallery/scripts.js new file mode 100644 index 0000000000..66dafc3aa3 --- /dev/null +++ b/05 - Flex Panel Gallery/scripts.js @@ -0,0 +1,16 @@ +const panels = document.querySelectorAll('.panel'); + +function toggleOpen() { + this.classList.toggle('open'); +} + +function toggleActive(e) { + // console.log(e.propertyName); + if(e.propertyName.includes('flex')) { + this.classList.toggle('open-active'); + } +} + +panels.forEach(panel => panel.addEventListener('click', toggleOpen)); +panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); + diff --git a/05 - Flex Panel Gallery/style.css b/05 - Flex Panel Gallery/style.css new file mode 100644 index 0000000000..0ae1bbfb72 --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,99 @@ +html { + box-sizing: border-box; + background: #ffc600; + font-family: 'helvetica neue'; + font-size: 20px; + font-weight: 200; +} + +body { + margin: 0; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +.panels { + min-height: 100vh; + overflow: hidden; + display: flex; +} + +.panel { + background: #6B0F9C; + box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); + color: white; + text-align: center; + align-items: center; + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + font-size: 20px; + background-size: cover; + background-position: center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; +} + +.panel1 { + background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); +} +.panel2 { + background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); +} +.panel3 { + background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); +} +.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; + justify-content: center; + align-items: center; +} + +.panel > *:first-child { + transform: translateY(-100%); +} + +.panel > *:last-child { + transform: translateY(100%); +} + +.panel.open-active > *:first-child, +.panel.open-active > *:last-child { + transform: translateY(0); +} + +.panel p { + text-transform: uppercase; + font-family: 'Amatic SC', cursive; + text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); + font-size: 2em; +} + +.panel p:nth-child(2) { + font-size: 4em; +} + +.panel.open { + flex: 5; + font-size: 40px; +} \ No newline at end of file From 0db2ce1f84c7fe5487e065ab2ef95e768e08cf78 Mon Sep 17 00:00:00 2001 From: Dustin Leer Date: Mon, 15 Oct 2018 18:44:14 -0400 Subject: [PATCH 23/23] Finishes Exercise 6 --- 06 - Type Ahead/index-START.html | 27 +++---- 06 - Type Ahead/scripts.js | 47 ++++++++++++ 06 - Type Ahead/style.css | 128 +++++++++++++++---------------- 3 files changed, 123 insertions(+), 79 deletions(-) create mode 100644 06 - Type Ahead/scripts.js diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..613cbc871f 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,22 +1,19 @@ - - Type Ahead 👀 - + + Type Ahead 👀 + -
- -
    -
  • Filter for a city
    • -
  • or a state
    • -
-
- - +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + diff --git a/06 - Type Ahead/scripts.js b/06 - Type Ahead/scripts.js new file mode 100644 index 0000000000..97708f6f8d --- /dev/null +++ b/06 - Type Ahead/scripts.js @@ -0,0 +1,47 @@ +const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; + +const cities = []; + +fetch(endpoint) + .then(blob => blob.json()) + .then(data => cities.push(...data)); + +function findMatches(wordToMatch, cities) { + return cities.filter(place => { + // here we need to figure out if the city or state matches what was searched + 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, ','); +} + +// Display Function +function displayMatches() { + // console.log(this.value); + const matchArray = findMatches(this.value, cities); + // console.log(matchArray); + + const html = matchArray.map(place => { + const regex = new RegExp(this.value, 'gi'); + cityName = place.city.replace(regex, `${this.value}`); + 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('change', displayMatches); +searchInput.addEventListener('keyup', displayMatches); + diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css index 5203de42a4..8674ba37a0 100644 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -1,74 +1,74 @@ - html { - box-sizing: border-box; - background: #ffc600; - font-family: 'helvetica neue'; - font-size: 20px; - font-weight: 200; - } + html { + box-sizing: border-box; + background: #ffc600; + font-family: 'helvetica neue'; + font-size: 20px; + font-weight: 200; + } - *, *:before, *:after { - box-sizing: inherit; - } + *, *:before, *:after { + box-sizing: inherit; + } - input { - width: 100%; - padding: 20px; - } + input { + width: 100%; + padding: 20px; + } - .search-form { - max-width: 400px; - margin: 50px auto; - } + .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); - } + 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 { + 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 { + 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(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%); - } + .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; - } + span.population { + font-size: 15px; + } - .hl { - background: #ffc600; - } + .hl { + background: #ffc600; + }