diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..9367c602f0 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,9 +58,31 @@ +keys.forEach((key)=>{ + key.addEventListener('transitionend', removeAnimation) +}); +function removeAnimation(){ + this.classList.remove('playing'); +} +function playSound(code){ + const sample = document.querySelector(`audio[data-key="${code}"]`); + if(!sample) return; + sample.currentTime=0; + sample.play(); +} +function highlightKey(code){ + const key = document.querySelector(`.key[data-key="${code}"]`); + if(key) key.classList.add('playing'); +} +document.addEventListener('keydown', function(key){ + playSound(key.keyCode); + highlightKey(key.keyCode); +}); + diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..64255f7ed2 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -6,7 +6,6 @@ -
@@ -15,10 +14,9 @@
- diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..a312616b8d 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,17 +21,20 @@

Update CSS Variables with JS

+ const inputs = document.querySelectorAll('.controls input'); + function handleInput(){ + const suffix = this.dataset.sizing || ''; + const val = this.value+suffix; + document.documentElement.style.setProperty(`--${this.name}`, val); + } + inputs.forEach((el)=>{ + el.addEventListener('input', handleInput); + }) + diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html index e61b94c006..c4ea5824fc 100644 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ b/04 - Array Cardio Day 1/index-FINISHED.html @@ -32,7 +32,6 @@ // 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() diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..3bb88ed3fc 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,29 +33,55 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const filteredInventors = inventors.filter(inventor => inventor.year >= 1500 && inventor.year <=1599); + console.table(filteredInventors); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const inventorNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + console.log(inventorNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sortedInventors = inventors.sort((a, b)=>{ + return a.year > b.year ? 1 : -1; + }) + console.table(sortedInventors); // Array.prototype.reduce() // 4. How many years did all the inventors live? - // 5. Sort the inventors by years lived + const total = inventors.reduce((p,n)=>{ + return p+(n.passed-n.year); + },0) + console.log(total); + // 5. Sort the inventors by years lived + const sortedByYear = inventors.sort((a, b)=>{ + return (a.passed-a.year) > (b.passed-b.year) ? -1 : 1; + }) + console.table(sortedByYear); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris // 7. sort Exercise // Sort the people alphabetically by last name + const sortedPeople = people.sort((a,b)=>{ + const [x,y] = a.split(', '); + const [w,z] = b.split(', '); + return y > z ? 1 : -1; + }); + console.log(sortedPeople); // 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 data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick']; + const out = data.reduce((obj, mean) =>{ + obj[mean] = obj[mean] ? obj[mean]+1 : 1; + return obj; + },{}) + console.log(out); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..a019d55ac4 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -23,6 +23,7 @@ .panels { min-height:100vh; + display: flex; overflow: hidden; } @@ -30,8 +31,6 @@ 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: @@ -41,10 +40,15 @@ font-size: 20px; background-size:cover; background-position:center; + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + flex: 1; } - .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } + .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); } @@ -54,7 +58,15 @@ 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; @@ -62,12 +74,15 @@ 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; + justify-content: space-around; + flex-grow: 5; } .cta { @@ -107,10 +122,20 @@ - - diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..4ae22a3d11 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -16,7 +16,27 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..ea3cfc60f3 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,7 +26,16 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + const x = people.some(el=>new Date().getFullYear()-el.year>=19); + console.log(x); // Array.prototype.every() // is everyone 19? + const y = people.every(el=>new Date().getFullYear()-el.year===19); + console.log(y); + const z = comments.find(el=>el.id===823423); + console.log(z); + const q = comments.findIndex(el=>el.id===823423); + comments.splice(q,1); + console.log(comments); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..324e8e4fb2 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,11 +7,54 @@ + (function(){ + const body = document.querySelector('body'); + const canvas = document.getElementById('draw'); + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + const ctx = canvas.getContext('2d'); + ctx.lineJoin = "round"; + ctx.lineCap = "round"; + ctx.lineWidth = 100; + let prevX = 0; + let prevY = 0; + + let hue = 155; + let increment = true; + let drawing = false; + function drawOnCanvas(e){ + if(!drawing) return; + ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; + ctx.beginPath(); + ctx.moveTo(prevX, prevY); + ctx.lineTo(e.x, e.y); + ctx.stroke(); + [prevX, prevY] = [e.x, e.y]; + hue = hue > 360 ? 0 : hue+1; + if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) { + increment = !increment; + } + if(increment){ + ctx.lineWidth+=1; + }else{ + ctx.lineWidth-=1; + } + } + + canvas.addEventListener('mousemove', drawOnCanvas); + canvas.addEventListener('mousedown',(e)=>{ + [prevX, prevY] = [e.x, e.y]; + drawing = true; + }); + canvas.addEventListener('mouseup',()=>drawing=false); + canvas.addEventListener('mouseout',()=>drawing=false); + })(); +