Scoped CSS Variables and JS

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..72bd58ad88 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,33 @@

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..1c7d85c915 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -62,13 +62,41 @@ 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/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 8a4f0d556e..e168d26b7f 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -3,6 +3,45 @@ Scoped CSS Variables and JS +

Update CSS Variables with JS

@@ -18,33 +57,28 @@

Update CSS Variables with JS

- - diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..0b66a908d0 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,29 +31,136 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + /* pass filter a function, and that function will loop over every single + item in our array. and it will give us our inventor and for each + inventor we can decide whether we want to keep it or not. + */ + + // const fifteen = inventors.filter(inventor => { + // if (inventor.year >= 1500 && inventor.year < 1600) { + // // note im used to return inventor; but wes used true, + // // both seem to return the same information + // return true; // keep it! + // } + // }); + // console.table('fifteen: ', fifteen); + // shorter version + const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600); + console.table('fifteen: ', fifteen); + // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + /* + map takes in an array, does something with that array and then + returns a _new_ array of the same length. map will always return + the same amount of items as you give it. + */ + const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + console.log('full names: ', fullNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest - + /* + sort takes 2 items and allows you to compare them + here we will return 1 and -1 and what that does is controls + the order of items in the array + */ + // const ordered = inventors.sort((firstPerson, secondPerson) => { + // if (firstPerson.year > secondPerson.year) { + // return 1; + // } else { + // return -1; + // } + // }); + // shorter version + const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + console.log('ordered: ', ordered); // Array.prototype.reduce() // 4. How many years did all the inventors live? + /* + like the other array methods, reduce loops over every + item in our array. + the first argument of reduce represents what you returned + from the function last time (accumulator), we can call that total + and it is also going to give you the inventor (currentValue) + */ + // const totalYears = inventors.reduce((total, inventor) => { + // return total + (inventor.passed - inventor.year); + // }); + /* + at this point in our code we are almost there but if you + look at this log we get back [object Object]7859843780508967907681 + this is because the first time reduce loops we dont have a total + and its equal to undefined. so what we need to do is use the second + argument (initialValue) to reduce with the value 0. this means reduce + will use 0 as the initial value so we will not get undefined anymore + and our years will properly add up. + */ + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); + + console.log('totalYears: ', totalYears); // 5. Sort the inventors by years lived + const oldest = inventors.sort((a, b) => { + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -1 : 1; + }); + console.log('oldest: ', 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 - - + // use this js in the console of the wiki page + + // const links = category.querySelectorAll('a'); + // qSA returns a nodelist but only forEach is available + // on nodeLists so lets turn it into an array so we can run + // map on it, first, wrap it in an array then we can use es6 + // spread operator to spread each item into the array + // into the array. + // we can also simply wrap it in Array.from(category.quer...) + // i like using es6 so im using that one, even tho Array.from + // reads better + // const category = document.querySelector('.mw-category'); + // const links = [...category.querySelectorAll('a')]; + // const de = links + // .map(link => link.textContent) + // .filter(streetName => streetName.includes('de')); + // console.log('de: ', 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(', '); + console.log('aLast, aFirst: ', aLast, aFirst); + console.log('bLast, bFirst: ', bLast, bFirst); + return aLast > bLast ? 1 : -1; + // console.log('lastOne: ', lastOne); + // console.log('nextOne: ', nextOne); + }); + console.log('alpha: ', alpha); // 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' ]; - + // start our reduce with an empty object that we add to + // as seen in second argument in the reduce method + const transportation = data.reduce((obj, item) => { + // console.log('transportation item: ', item); + // what we want to do is to increment our object key + // so we can tally how many instances of the key there are + // we need to check first if there is an item of an obj or not + // if it doesnt we can set it to 0 and increment and return it + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + console.log('transportation: ', transportation); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index c6509bed02..7e271d800a 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -22,16 +22,17 @@ } .panels { + display: flex; min-height:100vh; overflow: hidden; } .panel { - background:#6B0F9C; - box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); - color:white; - text-align: center; - align-items:center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; /* Safari transitionend event.propertyName === flex */ /* Chrome + FF transitionend event.propertyName === flex-grow */ transition: @@ -39,8 +40,12 @@ 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; + text-align: center; + background-size: cover; + background-position: center; + background: #6B0F9C; + box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); + color: white; } @@ -51,25 +56,47 @@ .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } .panel > * { + display: flex; + flex: 1 0 auto; + justify-content: center; + align-items: center; margin:0; width: 100%; transition:transform 0.5s; } + .panel > *:first-child { + transform: translateY(-100%); + } + + .panel > *:last-child { + transform: translateY(100%); + } + .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 { + flex: 5; font-size:40px; } + .panel.open-active > *:first-child { + transform: translateY(0); + } + + .panel.open-active > *:last-child { + transform: translateY(0); + } + @@ -102,7 +129,18 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..d661443076 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -6,7 +6,6 @@ - - - + // wes didnt explain this function just that it formats a string into + // commented one and just grabbed it from the internet + const numberWithCommas = (x) => { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); + }; + + console.log('cites: ', cities); + searchInput.addEventListener('change', displayMatches); + // at this point we only listen for change which happens when + // a user focuses off the input, not when they type something different + // so lets add another listener and run displayMatches on keyup + searchInput.addEventListener('keyup', displayMatches); + /* + couple last things we need to do here is to format the population + value as well as highlighting the input value if it matches + lets go back to our displayMatches map function and before that return lets + create a regex that will match the city name and then we'll use + that regex to replace the word that it matches with a span with + a class of `hl` and the word that it matches + */ + + diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..866199d266 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,80 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + // const isAdult = people.some((person) => { + // const currentYear = (new Date()).getFullYear(); + // if (currentYear - person.year >= 19) { + // return true; + // } + // }); + // we can rewrite the above with a simpler return: + // const isAdult = people.some((person) => { + // const currentYear = (new Date()).getFullYear(); + // console.log({currentYear}); + // return currentYear - person.year >= 19; + // }); + // heres the HOT SHOT version: + const isAdult = people.some( + person => ( (new Date()). + getFullYear() ) - person.year >= 19 + ); + console.log({isAdult}); // Array.prototype.every() // is everyone 19 or older? - + const allAdults = 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( + // (comment) => { + // if (comment.id === 823423) { + // return true; + // } + // } + // ); + // console.log({comment}); + // heres the hotshot version - + // we dont need the if statement + // because our return is going to be + // either true or false: + 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 + const index = comments.findIndex(comment => comment.id === 823423); + console.log({index}); + // to delete it we can do that a couple of ways: + // comments.splice(index, 1); + console.table(comments); + /* + wes didnt do this but i think if i was going to + use splice id assign it to a var so i wasnt changing + the actual array... + */ + const splicedComments = comments.splice(index, 1); + console.log({splicedComments}); + // you can see now that the super good comment is gone + // you can also do it by creating a new array of updated comments: + // const newComments = [ + // comments.slice(0, index), + // comments.slice(index + 1) + // ]; + // console.log({newComments}); + // oops notice in the log that we have arrays in the + // array? thats because we didnt spread into the array: + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ]; + console.log({newComments}); + + diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..28a848f9f2 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,97 @@