diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..853aec88f4 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,6 +58,23 @@ diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..e3d399ab5d 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -3,6 +3,7 @@ JS + CSS Clock + @@ -17,57 +18,33 @@ - .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); - } + diff --git a/02 - JS + CSS Clock/styles.css b/02 - JS + CSS Clock/styles.css new file mode 100644 index 0000000000..a16a035d7c --- /dev/null +++ b/02 - JS + CSS Clock/styles.css @@ -0,0 +1,48 @@ +html { + background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50); + background-size:cover; + font-family:'helvetica neue'; + text-align: center; + font-size: 10px; +} + +body { + 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; + top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1); +} \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..53e83f9733 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -3,6 +3,7 @@ Scoped CSS Variables and JS +

Update CSS Variables with JS

@@ -20,34 +21,16 @@

Update CSS Variables with JS

- - diff --git a/03 - CSS Variables/styles.css b/03 - CSS Variables/styles.css new file mode 100644 index 0000000000..c4f46096a7 --- /dev/null +++ b/03 - CSS Variables/styles.css @@ -0,0 +1,35 @@ +:root { + --base: #ffc600; + --spacing: 10px; + --blur: 10px; +} + +img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); +} + +.hl { + color: var(--base); +} + +body { + text-align: center; +} + +body { + background: #193549; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; + font-size: 50px; +} + +.controls { + margin-bottom: 50px; +} + +input { + width:100px; +} \ 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 4162bce339..d34119ef93 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -11,7 +11,6 @@ // ## 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 }, @@ -33,28 +32,80 @@ // 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 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; + // } + // }); + + //Shorter version of above - ternary function. + 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; + + // if(lastGuy > nextGuy) { + // return -1; + // } else { + // return 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 + const alpha = people.sort(function(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 const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + const transportation = data.reduce(function(obj, item){ + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + + console.log(transportation); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..9f85843261 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -4,80 +4,10 @@ Flex Panels 💪 + - - - +

Hey

@@ -107,7 +37,20 @@
diff --git a/05 - Flex Panel Gallery/styles.css b/05 - Flex Panel Gallery/styles.css new file mode 100644 index 0000000000..ab4ae7d2f4 --- /dev/null +++ b/05 - Flex Panel Gallery/styles.css @@ -0,0 +1,83 @@ +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; + 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; + flex: 1; + justify-content: center; + display: flex; + flex-direction: column; +} + + +.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); } +.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } + +/* Flex Items */ +.panel > * { + 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; + 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; +} + +.cta { + color:white; + text-decoration: none; +} \ No newline at end of file diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..7fadeb0ff4 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,50 @@ diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css index 36dc55f30e..c2a52a9512 100644 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -62,10 +62,17 @@ background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); } - span.population { + span.population, + span.rank { font-size: 15px; } + span.rank { + background: rgba(0,0,0,0.6); + color: white; + padding: 1px; + border-radius: 0.5em; + } .details { text-align: center; diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..5500b3b75a 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,16 +26,61 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + + // const isAdult = people.some(function(person){ + // const currentYear = (new Date()).getFullYear(); + // if(currentYear - person.year >= 19) { + // return true; + // } + // }); + + const isAdult = people.some(person => { + const currentYear = (new Date()).getFullYear(); + return currentYear - person.year >= 19; + }); + + console.log(isAdult); // Array.prototype.every() // is everyone 19? + const allAdults = people.every(person => { + const currentYear = (new Date()).getFullYear(); + return currentYear - 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; + // } + // }); + + const comment = comments.find(comment => { + return 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); + + // comments.splice(index, 1); + + //ES6 Spread into new array with comment removed. + 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..b03531e57e 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,60 @@