diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..62aff3f3cf 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,23 @@ diff --git a/02 - JS + CSS Clock/images/clock-face.jpg b/02 - JS + CSS Clock/images/clock-face.jpg new file mode 100644 index 0000000000..e8abf21492 Binary files /dev/null and b/02 - JS + CSS Clock/images/clock-face.jpg differ diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..3ad5e607be 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -6,6 +6,9 @@ +
+

Current Time

+
@@ -27,14 +30,20 @@ body { font-size: 2rem; - display:flex; - flex:1; min-height: 100vh; + /*display:flex;*/ + /*flex: 1;*/ align-items: center; } + .main-header { + min-height: 10vh; + align-items: center; + margin-top: 8%; + } + .clock { - width: 30rem; + width: 0rem; height: 30rem; border:20px solid white; border-radius:50%; @@ -46,6 +55,15 @@ inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0,0,0,0.2); + background-image: url("images/clock-face.jpg"); + background-size: cover; + border: 5px solid black; + -webkit-transition: width 2s; /* Safari */ + transition: width 2s; + } + + .clock:hover { + width: 30rem; } .clock-face { @@ -53,6 +71,7 @@ width: 100%; height: 100%; transform: translateY(-3px); /* account for the height of the clock hands */ + border-radius: 50%; } .hand { @@ -61,12 +80,52 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.15, 2.14, 0.58, 1); + } + + .hour-hand { + width: 30%; + left: 20%; + } + + .second-hand { + width: 40%; + left: 10%; + height: 3px; + } + + .min-hand { + width: 35%; + left: 15%; } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index bf0f33e3ba..b18d90cd12 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -12,7 +12,7 @@

Update CSS Variables with JS

- + @@ -23,15 +23,31 @@

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 6e28e357d0..3d792e8fb9 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,29 +27,69 @@ // 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)); + // Nice way to print the collection! + // console.table(fifteen); // Array.prototype.map() - // 2. Give us an array of the inventory first and last names + // 2. Give us an array of the inventors first and last names + const fullNames = inventors.map(inventor => (`${inventor.first} ${inventor.last}`)); + // console.table(fullNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const birthDates = inventors.sort(function(a, b) { + if(a.year > b.year) { + return 1; + } else { + return -1; + } + }) + + // Oneliner + 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((a, b) => ((a.passed - a.year) > (b.passed - b.year) ? -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'); + // Need to convert from NodeList to Array + // const links = Array.from(category.querySelectorAll('a')); + // const de = links + // .map(link => (link.textContent)) + // .filter(streetname => (streetname.includes('de'))); + // console.table(de); // 7. sort Exercise // Sort the people alphabetically by last name + const lastNames = people.sort((a, b) => a.split(', ')[0] > b.split(', ')[0] ? 1 : -1); + // console.table(lastNames); // 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..63be904170 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -31,7 +32,6 @@ 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,6 +41,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -54,6 +59,10 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; } .panel p { @@ -62,12 +71,21 @@ text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; } + + .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:nth-child(2) { font-size: 4em; } .panel.open { font-size:40px; + flex: 5; } .cta { @@ -108,6 +126,21 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..96bee2cb34 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,44 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index bdf6c44415..02614514ba 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -25,26 +25,18 @@ // 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 => ((new Date()).getFullYear()) - person.year >= 19); console.log({isAdult}); // Array.prototype.every() // is everyone 19? 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 => comment.id === 823423); console.log(comment); @@ -52,10 +44,10 @@ // 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); + const index = comments.findIndex(comment => comment.id === 823423) console.log(index); - // comments.splice(index, 1); + comments.splice(index, 1); const newComments = [ ...comments.slice(0, index), diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..8cea9c00a1 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,71 @@ diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index cfaf3e0440..02ad058616 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -20,19 +20,30 @@ list-style: inside square; font-size: 20px; background: white; - width: 500px; + width: 350px; margin: auto; padding: 0; + border: 2px solid grey; box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05); } #bands li { border-bottom: 1px solid #efefef; - padding: 20px; + padding: 10px; + background: white; + transition: all 0.3s; + } + + #bands li:nth-child(odd) { + background: lightgrey; } #bands li:last-child { border-bottom: 0; } + #bands li:hover { + transform: scale(1.05, 1.05); + } + a { color: #ffc600; text-decoration: none; @@ -45,6 +56,21 @@ diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index 3eaee0f3ef..cb6bfff772 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -182,6 +182,28 @@ diff --git a/20 - Speech Detection/annyang.html b/20 - Speech Detection/annyang.html new file mode 100644 index 0000000000..c8f0f6a10a --- /dev/null +++ b/20 - Speech Detection/annyang.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/20 - Speech Detection/beatles/beatles.html b/20 - Speech Detection/beatles/beatles.html new file mode 100644 index 0000000000..97e445ec71 --- /dev/null +++ b/20 - Speech Detection/beatles/beatles.html @@ -0,0 +1,18 @@ + + + + Beatles - Alltogether Now + + + + + + + + +
+ +
+ + + \ No newline at end of file diff --git a/20 - Speech Detection/beatles/beatles.js b/20 - Speech Detection/beatles/beatles.js new file mode 100644 index 0000000000..140fbc3608 --- /dev/null +++ b/20 - Speech Detection/beatles/beatles.js @@ -0,0 +1,47 @@ +$(document).ready(function() { + +}); + + +window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; + +const recognition = new SpeechRecognition(); +// Live visual feedback to show what you are speaking +recognition.interimResults = true; + +const speechTranscript = (e) => { + const transcript = Array.from(e.results) + .map(result => result[0]) + .map(result => result.transcript).join(''); + console.log(transcript); + + processCommand(transcript); +}; + +const processCommand = (transcript) => { + if(portraitPositions[transcript]) { + changeImgCrop(portraitPositions[transcript]) + } +}; + + + +const portraitPositions = { + "1": {top: 0, right: 385, bottom: 381, left: 0}, + "2": {top: 0, right: 827, bottom: 381, left: 385}, + "3": {top: 382, right: 385, bottom: 762, left: 0}, + "4": {top: 382, right: 800, bottom: 762, left: 385} +}; + +// 1st - rect(0px,385px,385px,0px) +// 2nd - rect(0px,827px,385px,384px) +// 3rd - rect(382px,385px,762px,0px) +// 4th - rect(382px,800px,762px,385px) + +const changeImgCrop = function(args = {}) { + $('#portrait').css('clip', `rect(${args.top}px,${args.right}px,${args.bottom}px,${args.left}px)`); +}; + +recognition.addEventListener("result", speechTranscript); +recognition.addEventListener("end", recognition.start); +recognition.start(); \ No newline at end of file diff --git a/20 - Speech Detection/beatles/images/portraits.jpg b/20 - Speech Detection/beatles/images/portraits.jpg new file mode 100644 index 0000000000..a22b4f15ce Binary files /dev/null and b/20 - Speech Detection/beatles/images/portraits.jpg differ diff --git a/20 - Speech Detection/beatles/styles.css b/20 - Speech Detection/beatles/styles.css new file mode 100644 index 0000000000..c1e7be0f02 --- /dev/null +++ b/20 - Speech Detection/beatles/styles.css @@ -0,0 +1,38 @@ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + padding: 0; + display: flex; + background:#000000; + min-height:100vh; + background-size:cover; + align-items: center; + justify-content: center; +} + +#main-container { + width: 1024px; + height: 768px; + /*border:5px solid blue;*/ + position: relative; + font-size: 0; + overflow: hidden; + align-items: center; + justify-content: center; +} + +#portrait { + max-height: 100%; + max-height: 100%; + display: block; + margin: auto; + position: absolute; + right: 13%; + clip: rect(800px,800px,800px,0px); +} \ No newline at end of file diff --git a/20 - Speech Detection/images/blue-train.png b/20 - Speech Detection/images/blue-train.png new file mode 100644 index 0000000000..16cf4ceeee Binary files /dev/null and b/20 - Speech Detection/images/blue-train.png differ diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html index d3395cca35..68947c098e 100644 --- a/20 - Speech Detection/index-START.html +++ b/20 - Speech Detection/index-START.html @@ -6,12 +6,109 @@ +
+

Title

+ +
+
+ + @@ -21,6 +118,17 @@ font-size: 10px; } + header { + text-align: center; + border-radius: 25px; + padding: 2px; + border: 2px solid black; + background: orange; /* For browsers that do not support gradients */ + background: linear-gradient(to bottom right, orange, yellow); /* Standard syntax */ + box-shadow:10px 10px 0 rgba(0,0,0,0.1); + text-transform: capitalize; + } + body { background:#ffc600; font-family: 'helvetica neue'; @@ -54,6 +162,25 @@ border: 1px solid; border-color: transparent #efe4e4; } + + #train { + /*display: none;*/ + position: absolute; + left: -55%; + transform: scale(.8); + } + + @keyframes move + { + 0% + { + left: -55%; + } + 100% + { + left: 100%; + } + } diff --git a/20 - Speech Detection/sounds/whistle.mp3 b/20 - Speech Detection/sounds/whistle.mp3 new file mode 100644 index 0000000000..2016d50681 Binary files /dev/null and b/20 - Speech Detection/sounds/whistle.mp3 differ