diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..47281d2d95 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,10 +58,7 @@ - - + diff --git a/01 - JavaScript Drum Kit/static/css/index.css b/01 - JavaScript Drum Kit/static/css/index.css new file mode 100644 index 0000000000..a19a75e8b4 --- /dev/null +++ b/01 - JavaScript Drum Kit/static/css/index.css @@ -0,0 +1,52 @@ +html { + font-size: 10px; + background: url('./background.jpg') bottom center; + background-size: cover; + } + + body,html { + margin: 0; + padding: 0; + font-family: sans-serif; + } + + .keys { + display: flex; + flex: 1; + min-height: 100vh; + align-items: center; + justify-content: center; + } + + .key { + border: .4rem solid black; + border-radius: .5rem; + margin: 1rem; + font-size: 1.5rem; + padding: 1rem .5rem; + transition: all .07s ease; + width: 10rem; + text-align: center; + color: white; + background: rgba(0,0,0,0.4); + text-shadow: 0 0 .5rem black; + } + + .playing { + transform: scale(1.1); + border-color: #ffc600; + box-shadow: 0 0 1rem #ffc600; + } + + kbd { + display: block; + font-size: 4rem; + } + + .sound { + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: .1rem; + color: #ffc600; + } + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/static/js/index.js b/01 - JavaScript Drum Kit/static/js/index.js new file mode 100644 index 0000000000..722744e2f8 --- /dev/null +++ b/01 - JavaScript Drum Kit/static/js/index.js @@ -0,0 +1,24 @@ + + +function playSound(e){ + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`) + // console.log(audio) + if(!audio) return; // ignore if no key match to audio element + audio.currentTime = 0; // Rewind audio to start. + audio.play() + key.classList.add('playing') +} + + +const removePlaying = (e) => { + if(e.propertyName !== 'transform') return; // only run if transform property is changed + // console.log(e.propertyName) + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key') +// console.log(keys) +keys.forEach(key => key.addEventListener('transitionend',removePlaying)) + +window.addEventListener('keydown', playSound); \ No newline at end of file diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 55ab1a5331..bdc60d6f3e 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -4,10 +4,10 @@ JS + CSS Clock + -
@@ -15,61 +15,7 @@
- - - - - + + diff --git a/02 - JS and CSS Clock/index.js b/02 - JS and CSS Clock/index.js new file mode 100644 index 0000000000..c33090841e --- /dev/null +++ b/02 - JS and CSS Clock/index.js @@ -0,0 +1,29 @@ +// getting the hands. +const hourHand = document.querySelector('.hour-hand') +const minuteHand = document.querySelector('.min-hand') +const secondHand = document.querySelector('.second-hand') + + + +function setTime(){ + // Initializing the date object. + const now = new Date() + + // getting realtime data for the min, sec and hrs. + //Todo: get time > get deg > transform style + + const hrs = now.getHours() + const hourDegrees = ((hrs/60) * 360) + 90; + hourHand.style.transform = `rotate(${hourDegrees}deg)`; + + const min = now.getMinutes(); + const minuteDegrees = ((min/60) * 360) + 90; + minuteHand.style.transform = `rotate(${minuteDegrees}deg)`; + + const sec = now.getSeconds() + const secondDegrees = ((sec/60) * 360) + 90; + secondHand.style.transform = `rotate(${secondDegrees}deg)`; + +} + +setInterval(setTime, 1000) \ 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..7ad1b5fe75 --- /dev/null +++ b/02 - JS and CSS Clock/style.css @@ -0,0 +1,49 @@ +html { + background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5); + 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%; + transform-origin: 100%; + transform: rotate(90deg); + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); +} \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index d5fcc3a2ae..1627fbcf95 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -4,6 +4,7 @@ Scoped CSS Variables and JS +

Update CSS Variables with JS

@@ -19,34 +20,10 @@

Update CSS Variables with JS

- + - - - + diff --git a/03 - CSS Variables/index.js b/03 - CSS Variables/index.js new file mode 100644 index 0000000000..da59d60ff1 --- /dev/null +++ b/03 - CSS Variables/index.js @@ -0,0 +1,14 @@ +// getting all the input fields. + +const inputs = document.querySelectorAll('.controls input') + +// creating the function to handle the events. + +function handleChange() { + const suffix = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); + // console.log(suffix) +} + +inputs.forEach(input => input.addEventListener('change', handleChange)) +inputs.forEach(input => input.addEventListener('mousemove', handleChange)) \ No newline at end of file diff --git a/03 - CSS Variables/small neon city.png b/03 - CSS Variables/small neon city.png new file mode 100644 index 0000000000..245d51cbef Binary files /dev/null and b/03 - CSS Variables/small neon city.png differ diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css new file mode 100644 index 0000000000..608be92886 --- /dev/null +++ b/03 - CSS Variables/style.css @@ -0,0 +1,36 @@ +/* + misc styles, nothing to do with CSS variables +*/ + +:root { + --base: #bad455; + --blur: 10px; + --spacing: 10px; +} + +img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); +} + +.h1 { + color: var(--base); +} + +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 diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 0dcfd00f40..4bdadc6ed0 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -7,60 +7,6 @@

Psst: have a look at the JavaScript Console 💁

- + diff --git a/04 - Array Cardio Day 1/index.js b/04 - Array Cardio Day 1/index.js new file mode 100644 index 0000000000..7eb2f50b93 --- /dev/null +++ b/04 - Array Cardio Day 1/index.js @@ -0,0 +1,94 @@ +// 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 = [ + 'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig', + 'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving', + 'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano', + 'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose', + 'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank' +]; + +// Array.prototype.filter() +// 1. Filter the list of inventors for those who were born in the 1500's +const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year <= 1599) +// console.log(fifteen) + +// Array.prototype.map() +// 2. Give us an array of the inventors first and last names +const inventorsNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`) +// console.log(inventorsNames) + +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest +const inventorsSorted = inventors.sort((a, b) => a.year > b.year ? 1 : -1) +// console.log(inventorsSorted) + +// Array.prototype.reduce() +// 4. How many years did all the inventors live all together? +const inventorsCombined = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year) // returns the prev value of total and adds the years lived by an inventor +}, 0) +// console.log(inventorsCombined) + + +// 5. Sort the inventors by years lived +const oldest = inventors.sort((a, b) =>{ + const last = a.passed - a.year + const next = b.passed - b.year + return last < next ? 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 + +// const categories = document.querySelectorAll('.mw-category .mw-category-columns') +// const links = Array.from(categories.querySelectorAll('a')) +// const de = links.map((link) => link.textContent).filter((streetName) => streetName.includes('de')) +// console.log(de) + + +// 7. sort Exercise +// Sort the people alphabetically by last name +const alphabeticalOrderNames = people.sort((a, b) => { + const [aLast, aFirst] = a.split(', ') + const [bLast, bFirst] = b.split(', ') + // console.log(aFirst, aLast) + return aLast > bLast ? 1 : -1 +}) + +// console.table(alphabeticalOrderNames) + +// 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] += 1 + return obj +}, {}) + +console.log(transportation) \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 88a4f1d1e2..9fcf1bda99 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -5,80 +5,12 @@ Flex Panels 💪 + - -
-
+

Hey

Let's

Dance

@@ -105,9 +37,7 @@
- + diff --git a/05 - Flex Panel Gallery/index.js b/05 - Flex Panel Gallery/index.js new file mode 100644 index 0000000000..bdef328922 --- /dev/null +++ b/05 - Flex Panel Gallery/index.js @@ -0,0 +1,15 @@ +const panels = document.querySelectorAll('.panel'); + +function toggleOpen() { + this.classList.toggle('open'); + console.log('Hello'); +} + +function toggleActive(e){ + if(e.propertyName.includes('flex')){ + this.classList.toggle('open-active'); + } +} + +panels.forEach(panel => panel.addEventListener('click', toggleOpen)); +panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); \ No newline at end of file diff --git a/05 - Flex Panel Gallery/style.css b/05 - Flex Panel Gallery/style.css new file mode 100644 index 0000000000..2a0be1eae6 --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,108 @@ +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; + /* 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; + display:flex; + flex: 1; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.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%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 auto; + transition: transform 0.5s; +} + +.panel >:first-child { + transform:translateY(-100%); + -webkit-transform:translateY(-100%); + -moz-transform:translateY(-100%); + -ms-transform:translateY(-100%); + -o-transform:translateY(-100%); +} + +.panel.open-active >:first-child { + transform:translateY(0); + -webkit-transform:translateY(0); + -moz-transform:translateY(0); + -ms-transform:translateY(0); + -o-transform:translateY(0); +} + +.panel >:last-child { + transform: translateY(100%); + -webkit-transform: translateY(100%); + -moz-transform: translateY(100%); + -ms-transform: translateY(100%); + -o-transform: translateY(100%); +} + +.panel.open-active >:last-child { + transform: translateY(0); + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-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; +} \ No newline at end of file