diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/_index-FINISHED.html similarity index 100% rename from 01 - JavaScript Drum Kit/index-FINISHED.html rename to 01 - JavaScript Drum Kit/_index-FINISHED.html diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..1308f2cc6e 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,9 +58,7 @@ - + diff --git a/01 - JavaScript Drum Kit/script.js b/01 - JavaScript Drum Kit/script.js new file mode 100644 index 0000000000..0520e1b738 --- /dev/null +++ b/01 - JavaScript Drum Kit/script.js @@ -0,0 +1,15 @@ +function playAudio (e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + + if(!audio) return; + + audio.currentTime = 0; + audio.play(); + + key.classList.add('playing'); + + setTimeout(() => key.classList.remove('playing'), 70); + +} +window.addEventListener("keydown", playAudio) \ 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..50ef190fb6 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -4,72 +4,17 @@ JS + CSS Clock + - - -
+
-
+
-
- - - - - + diff --git a/02 - JS and CSS Clock/script.js b/02 - JS and CSS Clock/script.js new file mode 100644 index 0000000000..200db40538 --- /dev/null +++ b/02 - JS and CSS Clock/script.js @@ -0,0 +1,22 @@ +const secondHand = document.querySelector('.second-hand'); +const minuteHand = document.querySelector('.minute-hand'); +const hourHand = document.querySelector('.hour-hand'); + +function setDate(){ + const now = new Date(); // get the current date and time + + const seconds = now.getSeconds(); // get seconds + const secondDeg = (seconds/60) * 360 + 90; + secondHand.style = `transform: rotate(${secondDeg}deg)` + + const minutes = now.getMinutes(); //get minutes + const minuteDeg = (minutes/60) * 360 + ((seconds/60)*6) + 90; + minuteHand.style = `transform: rotate(${minuteDeg}deg)`; + + const hours = now.getHours(); //get hours + const hourDeg = (hours/12) * 360 + ((minutes/60)*30) + 90; + hourHand.style = `transform: rotate(${hourDeg}deg)`; + + +} +setInterval(setDate,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..56d031236f --- /dev/null +++ b/02 - JS and CSS Clock/style.css @@ -0,0 +1,48 @@ +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; + transform-origin: 100%; + transform: rotate(90deg); + top: 50%; + } \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index d5fcc3a2ae..26257541b6 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,9 @@

Update CSS Variables with JS

- + - - - + diff --git a/03 - CSS Variables/script.js b/03 - CSS Variables/script.js new file mode 100644 index 0000000000..b3d865fad2 --- /dev/null +++ b/03 - CSS Variables/script.js @@ -0,0 +1,9 @@ +function update(){ + const px = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value + px); + +} +const inputs = document.querySelectorAll('input'); +inputs.forEach((input) => input.addEventListener('change', update)); +input.forEach((input) => input.addEventListener('mousemove', update)) + diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css new file mode 100644 index 0000000000..80e8c0a458 --- /dev/null +++ b/03 - CSS Variables/style.css @@ -0,0 +1,31 @@ +:root{ + --base: #ffc600; + --spacing: 10px; + --blur: 10px; +} +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; + } + img{ + background: var(--base); + padding: var(--spacing); + filter: blur(var(--blur)); + border-radius: 1rem; + + } + span{ + color: var(--base); + } \ 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..834acac924 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -7,60 +7,9 @@

Psst: have a look at the JavaScript Console 💁

- +
+ list +
+ diff --git a/04 - Array Cardio Day 1/script.js b/04 - Array Cardio Day 1/script.js new file mode 100644 index 0000000000..f7c58a42f2 --- /dev/null +++ b/04 - Array Cardio Day 1/script.js @@ -0,0 +1,87 @@ +// 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 <= 1600); + console.table(fifteen); + // Array.prototype.map() + // 2. Give us an array of the inventors first and last names + const fullName = inventors.map(inventor => inventor.first +' '+ inventor.last); + console.log(fullName); + + + // Array.prototype.sort() + // 3. Sort the inventors by birthdate, oldest to youngest + const birthdate = inventors.sort((a,b) => a.year - b.year); + console.table(birthdate); + // Array.prototype.reduce() + // 4. How many years did all the inventors live all together? + const total = inventors.reduce((total,inventor) => { return total + inventor.passed - inventor.year},0); + console.log(total); + + // 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; + }) + 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 Category = document.querySelector('.mw-Category'); + //const links = Array.from(Category.querySelectorAll('a')); + //const deList = links.map(link => link.textContent).filter(streetName => streetName.includes('de')); + + + // 7. sort Exercise + // Sort the people alphabetically by last name + people.sort((a,b) =>{ + const last = a.split(' ').slice(-1)[0].toLowerCase(); + const first = b.split(' ').slice(-1)[0].toLowerCase(); + + return last.localeCompare(first); + }) + console.log(people); + + + // 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', 'pogostick']; + + const i = data.reduce((obj,item) => { + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++ + + return obj; + },{}); + console.log(i); + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 88a4f1d1e2..f06b3676cf 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -5,78 +5,9 @@ Flex Panels 💪 + - - -

Hey

@@ -105,9 +36,9 @@
- + + + diff --git a/05 - Flex Panel Gallery/script.js b/05 - Flex Panel Gallery/script.js new file mode 100644 index 0000000000..4732d748c7 --- /dev/null +++ b/05 - Flex Panel Gallery/script.js @@ -0,0 +1,13 @@ +const panels = document.querySelectorAll('.panel'); + +function openToggle(){ + this.classList.toggle('open'); +} +function activeToggle(e){ + if(e.propertyName === "flex-grow" && "flex"){ + this.classList.toggle('open-active'); + } + return +} +panels.forEach(panel => panel.addEventListener('click',openToggle)) +panels.forEach(panel => panel.addEventListener('transitionend',activeToggle)) \ 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..5ad673d750 --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,82 @@ +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; + cursor: pointer; + 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; + display: flex; + flex-direction: column; + justify-content: center; + flex: 1; + } + + .panel1 { background-image:url(https://wallpaperaccess.com/full/9841995.jpg); } + .panel2 { background-image:url(https://wallpaperaccess.com/full/9841985.jpg); } + .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://wallpaperaccess.com/full/9842007.jpg); } + .panel5 { background-image:url(https://wallpaperaccess.com/full/9841998.jpg); } + + /* Flex Children */ + .panel > * { + margin: 0; + width: 100%; + transition: transform 0.5s; + display: flex; + flex: 1 0 auto; + align-items: center; + justify-content: 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; + } \ No newline at end of file diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 5a9aa7e4e8..c776da770e 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -9,15 +9,12 @@
- -