JS + CSS Clock

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'); + } +})); + 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 { + +} + + + diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..7f1012ab01 --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,82 @@ + + + + + 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..d43e9553be --- /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); 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 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