diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index 1a16d0997c..0b582a0b8c 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -60,24 +60,28 @@ + document.addEventListener('keydown', playSound); + + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 12f721b183..9000c42b32 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -62,13 +62,37 @@ background: black; position: absolute; top: 50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index d19181b6b4..181d3fa9c1 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,29 +31,70 @@ // 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 names = inventors.map(inventor => { + return `${inventor.first} ${inventor.last}`; + }); + console.table(names); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + console.table(ordered); // Array.prototype.reduce() // 4. How many years did all the inventors live all together? + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); + console.log(totalYears); // 5. Sort the inventors by years lived + const oldest = inventors.sort(function(a, b) { + const aAge = a.passed - a.year; + const bAge = b.passed - b.year; + + return aAge > bAge ? -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 category = document.querySelector('.mw-category'); + // const links = Array.from(category.querySelectorAll('a')); + // const de = links + // .map(link => link.textContent) + // .filter(streetName => streetName.includes('de')); + // 7. sort Exercise - // Sort the people alphabetically by last name + // Sort the people alphabetically by first name + const sortedPeople = people.sort(function(a, b){ + const [aLast, aFirst] = a.split(', '); + const [bLast, bFirst] = b.split(', '); + + return aFirst > bFirst ? 1 : -1; + }); + console.table(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 transportation = data.reduce(function(hash, item) { + if (!hash[item]) { + hash[item] = 0; + } + hash[item]++; + + return hash; + }, {}); + console.table(transportation); diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 109c90fb36..baae6d4b6a 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,43 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..4247b9356f 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -25,16 +25,35 @@ ]; // Some and Every Checks - // Array.prototype.some() // is at least one person 19 or older? + // Array.prototype.some() // is at least one person 19 or older? Ruby: any + const anyAudults = people.some(person => ((new Date()).getFullYear() - person.year) > 19); + console.log({anyAudults}); // Array.prototype.every() // is everyone 19 or older? + const allAudult = people.every(person => ((new Date()).getFullYear() - person.year) > 19); + console.log({allAudult}); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 + // like: Ruby array #find + const comment = comments.find(comment => comment.id === 823423); + console.log(comment); // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 + // like: Ruby array #find_index + const index = comments.findIndex(comment => comment.id === 823423); + console.log({index}); + + // const deleted_comment = comments.splice(index, 1) // in place + // console.log(deleted_comment); + + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ] + console.table(newComments); // This wont change the comments diff --git a/08 - Fun with HTML5 Canvas/app.js b/08 - Fun with HTML5 Canvas/app.js new file mode 100644 index 0000000000..cbda440e67 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/app.js @@ -0,0 +1,45 @@ +const canvas = document.querySelector("#draw"); +const ctx = canvas.getContext("2d"); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +ctx.strokeStyle = "#BADA55"; +ctx.lineJoin = "round"; +ctx.lineCap = "round"; +ctx.lineWidth = 10; +// ctx.globalCompositeOperation = "multiply"; + +let isDrawing = false; +let lastX = 0; +let lastY = 0; +let hue = 0; + +function draw(e) { + if (!isDrawing) return; // when not moused down. + console.log(e); + + ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; + ctx.beginPath(); + // start from + ctx.moveTo(lastX, lastY); + // go to + ctx.lineTo(e.offsetX, e.offsetY); + ctx.stroke(); + + [lastX, lastY] = [e.offsetX, e.offsetY]; + + hue++; + if (hue >= 360) { + hue = 0; + } +} +canvas.addEventListener("mousedown", e => { + isDrawing = true; + [lastX, lastY] = [e.offsetX, e.offsetY]; +}); + +canvas.addEventListener("mousemove", draw); + +canvas.addEventListener("mouseup", () => (isDrawing = false)); +canvas.addEventListener("mouseout", () => (isDrawing = false)); diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 9da9b5b3c5..4df5dad446 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -6,8 +6,7 @@ - +