JS + CSS Clock

From 77a894136052bcfe34aaf1e3ed3c4fec425486e5 Mon Sep 17 00:00:00 2001 From: arr213 Date: Sat, 10 Dec 2016 21:17:30 -0500 Subject: [PATCH 1/6] day 1 complete --- 01 - JavaScript Drum Kit/index-START.html | 2 +- 01 - JavaScript Drum Kit/index.html | 21 +------------------- 01 - JavaScript Drum Kit/index.js | 24 +++++++++++++++++++++++ 3 files changed, 26 insertions(+), 21 deletions(-) create mode 100644 01 - JavaScript Drum Kit/index.js diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..7e11fdeb5f 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,7 @@

diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 246639f990..85de0afbfd 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -57,27 +57,8 @@

- - function playSound(e) { - const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); - const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); - if (!audio) return; // stop the function from running all together - audio.currentTime = 0; // rewind to the start - audio.play(); - key.classList.add('playing'); - } - function removeTransition(e) { - if (e.propertyName !== 'transform') return; // skip it if it's not a transform - this.classList.remove('playing'); - } - - const keys = document.querySelectorAll('.key'); - keys.forEach(key => key.addEventListener('transitionend', removeTransition)); - window.addEventListener('keydown', playSound); - - - diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js new file mode 100644 index 0000000000..f773f2b078 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.js @@ -0,0 +1,24 @@ +// Drum Kit JS +console.log('Hello JS30.'); + +window.addEventListener('keydown', function(event) { + const keyCode = event.keyCode; + const buttonEl = document.querySelector(`div[data-key="${keyCode}"]`); + const audioEl = document.querySelector(`audio[data-key="${keyCode}"]`); + + if (audioEl) { + audioEl.currentTime = 0; + audioEl.play(); + buttonEl.classList.add('playing'); + } + +}); + +const keys = document.querySelectorAll('.key'); + +keys.forEach(key => key.addEventListener('transitionend', function(event){ + if (event.propertyName === 'transform') { + key.classList.remove('playing'); + } +})); + From d2eb6a17dfdafbdd6ccf46007177efca4ec0f462 Mon Sep 17 00:00:00 2001 From: arr213 Date: Sun, 11 Dec 2016 19:17:10 -0500 Subject: [PATCH 2/6] day 2 complete --- 02 - JS + CSS Clock/index.html | 80 ++-------------------------------- 02 - JS + CSS Clock/index.js | 24 ++++++++++ 02 - JS + CSS Clock/styles.css | 63 ++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 77 deletions(-) create mode 100644 02 - JS + CSS Clock/index.js create mode 100644 02 - JS + CSS Clock/styles.css diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 1c777557da..adf81449ff 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -3,6 +3,7 @@ JS + CSS Clock + @@ -16,81 +17,6 @@ - - - + - + \ No newline at end of file diff --git a/02 - JS + CSS Clock/index.js b/02 - JS + CSS Clock/index.js new file mode 100644 index 0000000000..e1265f0aea --- /dev/null +++ b/02 - JS + CSS Clock/index.js @@ -0,0 +1,24 @@ +console.log('JS + CSS Clock'); + +const hourHand = document.querySelector('.hour-hand'); +const minuteHand = document.querySelector('.min-hand'); +const secondHand = document.querySelector('.second-hand'); + +setInterval(function(){ + + let now = new Date(); + + let hours = now.getHours() % 12; + let minutes = now.getMinutes(); + let seconds = now.getSeconds(); + + let hDeg = hours * 30 + 90; + let mDeg = minutes * 6 + 90; + let sDeg = seconds * 6 + 90; + + hourHand.style.transform = `rotate(${hDeg}deg)`; + minuteHand.style.transform = `rotate(${mDeg}deg)`; + secondHand.style.transform = `rotate(${sDeg}deg)`; + +}, 1000); + diff --git a/02 - JS + CSS Clock/styles.css b/02 - JS + CSS Clock/styles.css new file mode 100644 index 0000000000..e52deb5bfa --- /dev/null +++ b/02 - JS + CSS Clock/styles.css @@ -0,0 +1,63 @@ +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 { + 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%; + transform-origin: 100%; + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.73, 0.03, 0.31, 1) +} + +.hand.hour-hand { + +} + +.hand.min-hand { + +} + +.hand.second-hand { + +} + + + From e15036c3c06414df62e53a1f123c1dadf6f1950d Mon Sep 17 00:00:00 2001 From: arr213 Date: Mon, 12 Dec 2016 11:48:18 -0500 Subject: [PATCH 3/6] array cardio complete --- 03 - CSS Variables/index.html | 59 ++++++++++++++++++++++++++ 04 - Array Cardio Day 1/index.html | 10 +++++ 04 - Array Cardio Day 1/index.js | 68 ++++++++++++++++++++++++++++++ 3 files changed, 137 insertions(+) create mode 100644 03 - CSS Variables/index.html create mode 100644 04 - Array Cardio Day 1/index.html create mode 100644 04 - Array Cardio Day 1/index.js diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..bf0f33e3ba --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,59 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +

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

+ +

+ + + + + + + diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..e9c96345b5 --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,10 @@ + + + + + Array Cardio 💪 + + + + + diff --git a/04 - Array Cardio Day 1/index.js b/04 - Array Cardio Day 1/index.js new file mode 100644 index 0000000000..2004afca87 --- /dev/null +++ b/04 - Array Cardio Day 1/index.js @@ -0,0 +1,68 @@ +// 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 filtered = inventors.filter(inv => String(inv.year).slice(0, 2) === '15'); +// console.table(filtered); + +// // Array.prototype.map() +// // 2. Give us an array of the inventory first and last names +// const mapped = inventors.map(inv => inv.first + ' ' + inv.last); +// console.table(mapped); + +// // Array.prototype.sort() +// // 3. Sort the inventors by birthdate, oldest to youngest +// const sorted = inventors.sort((a, b) => a.year > b.year); +// console.table(sorted); + +// // Array.prototype.reduce() +// // 4. How many years did all the inventors live? +// const reduced = inventors.reduce((a, b) => a + b.passed - b.year, 0); +// console.table(reduced); + +// // 5. Sort the inventors by years lived +// const sortedB = inventors.sort((a, b) => a.passed - a.year > b.passed - b.year); +// console.table(sortedB); + +// // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name +// // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris +// let category = document.querySelector('.mw-category'); +// let links = Array.from(category.querySelectorAll('a')); +// let streets = links.map(el => el.innerText); +// let rg = new RegExp(/de/gi); +// let deStreets = streets.filter(str => rg.test(str)); +// console.table(deStreets); + + +// 7. sort Exercise +// Sort the people alphabetically by last name +let sortedC = people.sort(); +console.log(sortedC); + +// 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']; + +let reducedB = data.reduce(function(obj, item) { + if (!obj[item]) obj[item] = 0; + obj[item]++; + return obj; +}, {}); +console.log(reducedB); From 0725fa0cf0bf79894a8bc05c9c00037dbda1ab91 Mon Sep 17 00:00:00 2001 From: arr213 Date: Wed, 25 Jan 2017 15:40:40 -0500 Subject: [PATCH 4/6] 03 --- 03 - CSS Variables/index.html | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html index bf0f33e3ba..7f1012ab01 100644 --- a/03 - CSS Variables/index.html +++ b/03 - CSS Variables/index.html @@ -22,9 +22,20 @@

Update CSS Variables with JS

From 7072f953897c4980234074c41c76bc66bace5578 Mon Sep 17 00:00:00 2001 From: arr213 Date: Thu, 23 Feb 2017 00:21:18 -0500 Subject: [PATCH 5/6] completed day 5 --- 05 - Flex Panel Gallery/index.html | 44 ++++++++++++++++ 05 - Flex Panel Gallery/index.js | 19 +++++++ 05 - Flex Panel Gallery/styles.css | 83 ++++++++++++++++++++++++++++++ 3 files changed, 146 insertions(+) create mode 100644 05 - Flex Panel Gallery/index.html create mode 100644 05 - Flex Panel Gallery/index.js create mode 100644 05 - Flex Panel Gallery/styles.css diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html new file mode 100644 index 0000000000..60a4bda0b5 --- /dev/null +++ b/05 - Flex Panel Gallery/index.html @@ -0,0 +1,44 @@ + + + + + Flex Panels 💪 + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + + + diff --git a/05 - Flex Panel Gallery/index.js b/05 - Flex Panel Gallery/index.js new file mode 100644 index 0000000000..81b067b1f0 --- /dev/null +++ b/05 - Flex Panel Gallery/index.js @@ -0,0 +1,19 @@ +const panels = document.querySelectorAll('.panel'); + +function toggleOpen(){ + this.classList.toggle('open'); +} + +function toggleOpenActive(target){ + target.classList.toggle('open-active'); +} + +panels.forEach(panel => panel.addEventListener('click', toggleOpen)); +panels.forEach(panel => { + panel.addEventListener('transitionend', evt => { + if (evt.propertyName.includes('flex')){ + toggleOpenActive(evt.target); + } + console.log(evt); + }); +}); \ No newline at end of file diff --git a/05 - Flex Panel Gallery/styles.css b/05 - Flex Panel Gallery/styles.css new file mode 100644 index 0000000000..d23516ddda --- /dev/null +++ b/05 - Flex Panel Gallery/styles.css @@ -0,0 +1,83 @@ +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/1CD3fd8kHnE/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); } + +.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.open-active > *:first-child {transform: translateY(0);} +.panel > *:last-child {transform: translateY(100%);} +.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 { + font-size:40px; + flex: 5; +} + +.cta { + color:white; + text-decoration: none; +} \ No newline at end of file From bbc724c85dca03a36fd4689f18b940717403ff72 Mon Sep 17 00:00:00 2001 From: arr213 Date: Wed, 1 Mar 2017 15:51:56 -0500 Subject: [PATCH 6/6] 6 complete --- 04 - Array Cardio Day 1/index.js | 54 ++++++++++++++-------------- 06 - Type Ahead/index.html | 60 ++++++++++++++++++++++++++++++++ progress.txt | 30 ++++++++++++++++ 3 files changed, 117 insertions(+), 27 deletions(-) create mode 100644 06 - Type Ahead/index.html create mode 100644 progress.txt diff --git a/04 - Array Cardio Day 1/index.js b/04 - Array Cardio Day 1/index.js index 2004afca87..d43e9553be 100644 --- a/04 - Array Cardio Day 1/index.js +++ b/04 - Array Cardio Day 1/index.js @@ -17,38 +17,38 @@ const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Bu 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 filtered = inventors.filter(inv => String(inv.year).slice(0, 2) === '15'); -// console.table(filtered); +// Array.prototype.filter() +// 1. Filter the list of inventors for those who were born in the 1500's +const filtered = inventors.filter(inv => String(inv.year).slice(0, 2) === '15'); +console.table(filtered); -// // Array.prototype.map() -// // 2. Give us an array of the inventory first and last names -// const mapped = inventors.map(inv => inv.first + ' ' + inv.last); -// console.table(mapped); +// Array.prototype.map() +// 2. Give us an array of the inventory first and last names +const mapped = inventors.map(inv => inv.first + ' ' + inv.last); +console.table(mapped); -// // Array.prototype.sort() -// // 3. Sort the inventors by birthdate, oldest to youngest -// const sorted = inventors.sort((a, b) => a.year > b.year); -// console.table(sorted); +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest +const sorted = inventors.sort((a, b) => a.year > b.year); +console.table(sorted); -// // Array.prototype.reduce() -// // 4. How many years did all the inventors live? -// const reduced = inventors.reduce((a, b) => a + b.passed - b.year, 0); -// console.table(reduced); +// Array.prototype.reduce() +// 4. How many years did all the inventors live? +const reduced = inventors.reduce((a, b) => a + b.passed - b.year, 0); +console.table(reduced); -// // 5. Sort the inventors by years lived -// const sortedB = inventors.sort((a, b) => a.passed - a.year > b.passed - b.year); -// console.table(sortedB); +// 5. Sort the inventors by years lived +const sortedB = inventors.sort((a, b) => a.passed - a.year > b.passed - b.year); +console.table(sortedB); -// // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name -// // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris -// let category = document.querySelector('.mw-category'); -// let links = Array.from(category.querySelectorAll('a')); -// let streets = links.map(el => el.innerText); -// let rg = new RegExp(/de/gi); -// let deStreets = streets.filter(str => rg.test(str)); -// console.table(deStreets); +// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name +// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris +let category = document.querySelector('.mw-category'); +let links = Array.from(category.querySelectorAll('a')); +let streets = links.map(el => el.innerText); +let rg = new RegExp(/de/gi); +let deStreets = streets.filter(str => rg.test(str)); +console.table(deStreets); // 7. sort Exercise diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..b590aaff51 --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,60 @@ + + + + + Type Ahead 👀 + + + + + + + + diff --git a/progress.txt b/progress.txt new file mode 100644 index 0000000000..e7c3c23a31 --- /dev/null +++ b/progress.txt @@ -0,0 +1,30 @@ +01 - COMPLETE +02 - COMPLETE +03 - COMPLETE +04 - COMPLETE +05 - COMPLETE +06 - COMPLETE +07 - +08 - +09 - +10 - +11 - +12 - +13 - +14 - +15 - +16 - +17 - +18 - +19 - +20 - +21 - +22 - +23 - +24 - +25 - +26 - +27 - +28 - +29 - +30 - \ No newline at end of file