From 8537094087e6e832f3ebbc93de1ce2e9a0a5e611 Mon Sep 17 00:00:00 2001 From: Joe Martella Date: Fri, 9 Dec 2016 07:27:33 -0800 Subject: [PATCH 1/6] Completes the drumkit project. --- 01 - JavaScript Drum Kit/drumkit.js | 39 +++++++++++++++++++++++ 01 - JavaScript Drum Kit/index-START.html | 5 +-- 2 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 01 - JavaScript Drum Kit/drumkit.js diff --git a/01 - JavaScript Drum Kit/drumkit.js b/01 - JavaScript Drum Kit/drumkit.js new file mode 100644 index 0000000000..5dd22c9c59 --- /dev/null +++ b/01 - JavaScript Drum Kit/drumkit.js @@ -0,0 +1,39 @@ +// Add playSounn to every keydown event. +window.addEventListener('keydown', playSound); + +// For each key, add an event listener to remove playing +// CSS class. +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removePlayingCss)); + +function playSound(e) { + // Get key code from the event. + const keyCode = e.keyCode; + + // Select elements that corresponds to the key code. + const audio = document.querySelector(`audio[data-key="${keyCode}"]`); + const key = document.querySelector(`.key[data-key="${keyCode}"]`); + + // Stop execution if there's no matching element. + if (!audio) { + return; + } + + // Rewind to start and play (such that you can hit it repeatedly). + audio.currentTime = 0; + audio.play(); + + // Add playing CSS class to key element. + key.classList.add('playing'); +} + +function removePlayingCss(e) { + // Target a single transition event (transform) and + // remove class when we get it. + if (e.propertyName !== 'transform') { + return; + } else { + // this is equal to the element the event is on (i.e. the key). + this.classList.remove('playing'); + } +} \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..10251b12b5 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,10 +57,7 @@ - - + From 4b3442cf5b3d39f637c4898864dc607970bb627f Mon Sep 17 00:00:00 2001 From: Joe Martella Date: Sun, 11 Dec 2016 15:26:09 -0800 Subject: [PATCH 2/6] Completes second challenge (CSS clock). --- .vscode/settings.json | 4 ++++ 02 - JS + CSS Clock/index-START.html | 9 +++++---- 02 - JS + CSS Clock/javascript.js | 24 ++++++++++++++++++++++++ 3 files changed, 33 insertions(+), 4 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 02 - JS + CSS Clock/javascript.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..156040a822 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +// Place your settings in this file to overwrite default and user settings. +{ + "workbench.editor.showTabs": true +} \ No newline at end of file diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 259280d228..f7a3dd3b84 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,13 +61,14 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform:rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0, 1.74, 1, 1); } - + diff --git a/02 - JS + CSS Clock/javascript.js b/02 - JS + CSS Clock/javascript.js new file mode 100644 index 0000000000..c826beb881 --- /dev/null +++ b/02 - JS + CSS Clock/javascript.js @@ -0,0 +1,24 @@ +const secondHand = document.querySelector('.second-hand'); +const minuteHand = document.querySelector('.min-hand'); +const hourHand = document.querySelector('.hour-hand'); + +function setDate() { + const now = new Date(); + + // Set seconds. + const seconds = now.getSeconds(); + const secondsDegrees = ((seconds / 60) * 360) + 90; + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + + // Set minutes. + const minutes = now.getMinutes(); + const minutesDegrees = ((minutes / 60) * 360) + 90; + minuteHand.style.transform = `rotate(${minutesDegrees}deg)`; + + // Set hours. + const hours = now.getHours(); + const hoursDegrees = ((hours / 12) * 360) + 90; + hourHand.style.transform = `rotate(${hoursDegrees}deg)`; +} + +setInterval(setDate, 1000); \ No newline at end of file From c12c0f1f8184988b2293f4ca5529922ba7b8234f Mon Sep 17 00:00:00 2001 From: Joe Martella Date: Sun, 18 Dec 2016 13:03:47 -0800 Subject: [PATCH 3/6] CSS variables. --- 03 - CSS Variables/index-START.html | 18 ++++++++++++++++-- 03 - CSS Variables/javascript.js | 12 ++++++++++++ 2 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 03 - CSS Variables/javascript.js diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index bf0f33e3ba..b5cb4d44c5 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,6 +21,21 @@

Update CSS Variables with JS

- + diff --git a/03 - CSS Variables/javascript.js b/03 - CSS Variables/javascript.js new file mode 100644 index 0000000000..5dac55dc0b --- /dev/null +++ b/03 - CSS Variables/javascript.js @@ -0,0 +1,12 @@ +const inputs = document.querySelectorAll('.controls input'); + +function handleUpdate() { + const input = this.name; + const value = this.value; + const suffix = input === 'base' ? '' : 'px'; + + document.documentElement.style.setProperty(`--${input}`, value + suffix); +} + +inputs.forEach(input => input.addEventListener('change', handleUpdate)); +inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); \ No newline at end of file From 4af09d12783bfb1c08d114ae5acb4291d3ecc9b0 Mon Sep 17 00:00:00 2001 From: Joe Martella Date: Sun, 15 Jan 2017 13:51:26 -0800 Subject: [PATCH 4/6] Sweating after array cardio. --- 04 - Array Cardio Day 1/index-START.html | 43 ++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 089352c8a6..519f14c222 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,17 +27,42 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const foo = inventors.filter(function(inventor) { + return inventor.year >= 1500 && inventor.year < 1600; + }) + console.log(foo); // Array.prototype.map() // 2. Give us an array of the inventory first and last names + const bar = inventors.map((inventor) => { + return `${inventor.first} ${inventor.last}`; + }) + console.log(bar); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + inventors.sort((a, b) => { + return a.year - b.year; + }); + console.log(inventors); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const years = inventors.reduce((total, current) => { + return total + (current.passed - current.year); + }, 0); + console.log(years); // 5. Sort the inventors by years lived + const baz = inventors.map(inventor => { + return { + name: `${inventor.first} ${inventor.last}`, + age: inventor.passed - inventor.year + }; + }).sort((a, b) => { + return b.age - a.age; + }); + console.log(baz); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris @@ -45,10 +70,28 @@ // 7. sort Exercise // Sort the people alphabetically by last name + const alpha = people.sort((a, b) => { + let aName = a.split(', ')[0].toLowerCase(); + let bName = b.split(', ')[0].toLowerCase(); + return aName > bName ? 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 initialTotals = { + 'car': 0, + 'truck': 0, + 'bike': 0, + 'van': 0, + 'walk': 0 + }; + const totals = data.reduce((_totals, current) => { + _totals[current]++; + return _totals; + }, initialTotals); + console.log(totals); From 03e6e38b4fa16dd553d860f41ea5194c82f749b0 Mon Sep 17 00:00:00 2001 From: Joe Martella Date: Mon, 16 Jan 2017 19:37:13 -0800 Subject: [PATCH 5/6] Finishes flex panel lesson. --- 05 - Flex Panel Gallery/index-START.html | 33 ++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..d0c8e851e8 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,8 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; + flex-direction: row; } .panel { @@ -41,6 +43,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -54,8 +61,18 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; } + .panel > *:first-child { transform: translateY(-100%); } + .panel.open-active > *:first-child { transform: translateY(0); } + + .panel > *:last-child { transform: translateY(100%); } + .panel.panel.open-active > *:last-child { transform: translateY(0); } + .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; @@ -68,6 +85,7 @@ .panel.open { font-size:40px; + flex: 5; } .cta { @@ -107,7 +125,22 @@ From 9d28df3c492af72b392bbd290c8787dd740daeef Mon Sep 17 00:00:00 2001 From: Joe Martella Date: Sun, 22 Jan 2017 11:57:28 -0800 Subject: [PATCH 6/6] Does type ahead lesson. --- 06 - Type Ahead/index-START.html | 40 +++++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..ea39a0b4a5 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -15,7 +15,45 @@