diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..4887afeb14 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,6 +58,22 @@ diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 2712384201..683d133a10 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,73 +1,99 @@ - - - JS + CSS Clock - - + + + JS + CSS Clock + + +
-
+
+ - + + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..906a0ceec1 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -3,24 +3,23 @@ Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -
- - - - - - - -
+ + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html index ede883f1f9..6f383a497a 100644 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ b/04 - Array Cardio Day 1/index-FINISHED.html @@ -72,20 +72,7 @@ // 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 - const alpha = people.sort((lastOne, nextOne) => { - const [aLast, aFirst] = lastOne.split(', '); - const [bLast, bFirst] = nextOne.split(', '); - return aLast > bLast ? 1 : -1; - }); - console.log(alpha); + // 8. Reduce Exercise // Sum up the instances of each of these diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..c3c9a07bb1 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -32,27 +32,83 @@ // 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); + + // const fifteen = inventors.filter(function(inventor) { + // if (inventor.year >= 1500 && inventor.year < 1600) { + // return true; + // } + // }); + // console.table(fifteen); + + // Array.prototype.map() // 2. Give us an array of the inventors' first and last names - // Array.prototype.sort() - // 3. Sort the inventors by birthdate, oldest to youngest + // const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + // console.log(fullNames); + + // // Array.prototype.sort() + // // 3. Sort the inventors by birthdate, oldest to youngest + + // const ordered = inventors.sort(function(a, b) { + // if(a.year > b.year) { + // return 1; + // } else { + // return -1; + // } + // }); + // console.table(ordered); + + 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? + 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 lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -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'); + //Convert into array + const links = Array.from(category.querySelectorAll('a')); + //convert list to names + const de = links.map(link => link.textContent).filter(streetName => streetName.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name + const sortMe = people.sort((lastOne, nextOne) => { + const [aLast, aFirst] = lastOne.split(', '); + const [bLast, bFirst] = nextOne.split(', '); + return aLast > bLast ? 1 : -1; + }); + console.log(sortMe); // 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(object, item) { + if(!object[item]) { + obbject[item] = 0; + } + object[item]++; + }, {}) + console.log(transportation); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..aa34f1cdcd 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -4,8 +4,6 @@ Flex Panels 💪 - - + +
@@ -107,6 +134,19 @@
diff --git a/06 - Type Ahead/#index-START.html# b/06 - Type Ahead/#index-START.html# new file mode 100644 index 0000000000..b97ebc38b1 --- /dev/null +++ b/06 - Type Ahead/#index-START.html# @@ -0,0 +1,60 @@ + + + + + Type Ahead 👀 + + + + +
+ + +
+ + + diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..b97ebc38b1 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -16,6 +16,44 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..dcb080744c 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,53 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + + const isAdult = people.som(function() { + const currentYear = (new Date()).getFullYear(); + if(person.year - person.year >= 19) { + return true; + } + }); + // REDO + const isAdult = people.some(person => { + const currentYear = (new(Date()).getFullYear(); + return currentYear - person.year >= 19; + ) + }; + // REDO AGAIN + const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); + console.log({allAdults}) + + // Array.prototype.every() // is everyone 19 or older? + const isAdult = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); + console.log({allAdults}) // 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 + const comment = comments.find(function(comment) { + if(comment.id === 823423) { + return true + } + }); + + // REDO + const comment = comments.find(comment => comment.id === 823423); +) // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 + const index = comments.findIndex(comment => comment.id === 823423); + console.log(index); + + //comments.splice(index, 1); + //Review from vid + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ]; diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..4b73c5cb8b 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,8 +7,39 @@ +const canvas = document.querySelector('#draw'); +const ctx = canvas.getContext('2d'); +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; +ctx.strokeStyle = '#ff0000'; +ctx.lineJoin = 'round'; +ctx.lineCap = 'round'; +ctx.lineWidth = 2; + +let isDrawing = false; +let lastX = 0; +let lastY = 0; + + function draw(e) { + if (!isDrawing) return; // stop the fn from running when they are not moused down + ctx.beginPath(); + // start from + ctx.moveTo(lastX, lastY); + // go to + ctx.lineTo(e.offsetX, e.offsetY); + ctx.stroke(); + [lastX, lastY] = [e.offsetX, e.offsetY]; + } + 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); +