diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000000..f2af7109a7 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,3 @@ +{ + "esversion" : 6 +} \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..35342e0c23 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,25 @@ diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..b75ca425a4 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,3 +1,8 @@ + @@ -61,13 +66,57 @@ background:black; position: absolute; top:50%; + + transform-origin: 100%; /* by default it's 50% (middle) */ + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.96, 0.51, 0.84); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..95bb51f06e 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -20,7 +20,27 @@

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..8394d29d10 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -7,6 +7,104 @@

Psst: have a look at the JavaScript Console 💁

+ diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..9bac6d8355 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 { @@ -41,6 +42,12 @@ font-size: 20px; background-size:cover; background-position:center; + + display: flex; + flex-direction: column; + flex: 1; + justify-content: center; + align-items: center; } @@ -50,10 +57,32 @@ .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } + /* Flex children */ .panel > * { margin:0; width: 100%; transition:transform 0.5s; + border: 1px solid red; + 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 { @@ -67,6 +96,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,7 +137,20 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..ef625d7855 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,10 +1,12 @@ + Type Ahead 👀 +
@@ -14,9 +16,51 @@
  • or a state
    • - + - - - + \ No newline at end of file diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..35124829c9 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,34 @@ // 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(); + return currentYear - person.year >= 19 + }); + console.log('At least one perso is 19 or older: ' + isAdult); + // Array.prototype.every() // is everyone 19 or older? + const areAllAdults = people.every((person) => { + const currentYear = (new Date()).getFullYear(); + return currentYear - person.year >= 19 + }) + console.log('Is everyone an adult: ' + areAllAdults); // 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); // 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 newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ] + console.table(newComments); diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..22ca88e05a 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -1,19 +1,79 @@ + HTML5 Canvas + - - + + + + - + + \ No newline at end of file diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html index 196fffd719..59c02869d2 100644 --- a/09 - Dev Tools Domination/index-START.html +++ b/09 - Dev Tools Domination/index-START.html @@ -18,29 +18,61 @@ } // Regular + console.log('hi'); // Interpolated + console.log('Hello I am a %s string!', '💩') // Styled + console.log( + '%c I am some great text', + 'font-size: 50px; background: red;' + ) // warning! + console.warn('oh no!'); // Error :| + console.error('huge error'); // Info + console.info('insert fun fact here') // Testing + console.assert(1 === 2, 'that is wrong!') // clearing + console.clear(); // Viewing DOM Elements + const paragraph = document.querySelector('p'); + console.log(paragraph); + console.dir(paragraph); // Grouping together + dogs.forEach(dog => { + console.groupCollapsed(`${dog.name}`); + console.log(`This is ${dog.name}`); + console.log(`He is ${dog.age}`); + console.groupEnd(`${dog.name}`); + }) // counting + console.count('Wes') + console.count('Wes') + console.count('Wes') + console.count('Wes') // timing - + console.time('fetching data'); + fetch('https://api.github.com/users/wesbos') + .then(data => data.json()) + .then(data => { + console.timeEnd('fetching data'); + console.log(data); + }) + + console.table(dogs); diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index b6a1cc32ec..ad26042609 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -1,51 +1,52 @@ + Hold Shift to Check Multiple Checkboxes + - how far the page has been scrolled down + // innerHeight --> total pixel height of the browser viewport + // height --> height of the respective element + // offsetTop --> how far the top of the image is from the top of the page/window + function checkSlide(e) { + sliderImages.forEach(slideImage => { + // half way through the image + const slideInAt = window.scrollY + window.innerHeight - slideImage.height/2; + // bottom of the image + const imageBottom = slideImage.offsetTop + slideImage.height; + const isHalfShown = slideInAt > slideImage.offsetTop; + const isNotScrolledPast = window.scrollY < imageBottom; + if(isHalfShown && isNotScrolledPast) { + slideImage.classList.add('active'); + } else { + slideImage.classList.remove('active'); + } + }) + } + + window.addEventListener('scroll', debounce(checkSlide));