Type Ahead 👀

From 47f08e5c3ac07ac5b38f74978d42f45d1e8acf2f Mon Sep 17 00:00:00 2001 From: paulcamantigue-kaiser Date: Fri, 13 Jan 2017 21:38:54 -0800 Subject: [PATCH 01/17] Completed Challenge 2 - Added style properties to the hand class to allow it to rotate correctly along the middle of the clock and added clock-like tick animations - Added function that is invoked every second to update each hand of the clock --- 02 - JS + CSS Clock/index-START.html | 29 ++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..64d8a16c5a 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,3 +1,8 @@ + @@ -61,13 +66,37 @@ 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); } From c9c10e09bdc7ed18709900431f61790f6a20eaff Mon Sep 17 00:00:00 2001 From: paulcamantigue-kaiser Date: Sun, 15 Jan 2017 21:36:10 -0800 Subject: [PATCH 02/17] Added Dynamic Updating of Styling Controls for the Image - Used CSS variables and JS to allow the user to change styling using the range inputs in real time --- 03 - CSS Variables/index-START.html | 33 +++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..2e7f1c5922 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -20,7 +20,27 @@

Update CSS Variables with JS

+ + From 2fef4a4beeccb92f78a23f4d41220e2593a57404 Mon Sep 17 00:00:00 2001 From: paulcamantigue-kaiser Date: Mon, 23 Jan 2017 20:37:14 -0800 Subject: [PATCH 03/17] Completed Challenge 4 --- .jshintrc | 3 ++ 04 - Array Cardio Day 1/index-START.html | 57 +++++++++++++++++++++++- 2 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 .jshintrc 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/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..b64402d59d 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,29 +31,84 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + /*const fifteen = inventors.filter(inventor => { + if (inventor.year >= 1500 && inventor.year < 1600) { + return true; + } + });*/ + + 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 fullName = inventors.map(inventor => { + return inventor.first + ' ' + inventor.last; + });*/ + + const fullName = inventors.map(inventor => { + return `${inventor.first} ${inventor.last}`; + }); + console.log(fullName); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const birthdate = inventors.sort(function(a, b) { + return (a.year < b.year) ? -1 : 1; + }); + + console.table(birthdate); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const years = inventors.reduce(function(total, obj) { + return total + (obj.passed - obj.year); + }, 0); + + console.log(years); // 5. Sort the inventors by years lived + const lived = inventors.sort(function(a, b) { + let lastInventor = a.passed - a.year; + let nextInventor = b.passed - b.year; + return lastInventor > nextInventor ? -1 : 1; + }); + + console.table(lived); // 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 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); + From 94e17ad2952109b7c3a05aae1296d40ee43c54e2 Mon Sep 17 00:00:00 2001 From: camantigue Date: Wed, 17 Feb 2021 22:24:19 -0800 Subject: [PATCH 04/17] feat: add challenge #1 --- 01 - JavaScript Drum Kit/index-START.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) 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 @@

From 212a92f037c835ed284bcd70c7788f989a8fb09c Mon Sep 17 00:00:00 2001 From: camantigue Date: Mon, 22 Feb 2021 21:38:56 -0800 Subject: [PATCH 05/17] feat: add challenge #2 --- 02 - JS + CSS Clock/index-START.html | 36 +++++++++++++++++++++------- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 64d8a16c5a..b75ca425a4 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -77,23 +77,43 @@ From 4b7297ad7c0264587d1bcf525f2c6d8a18984dd1 Mon Sep 17 00:00:00 2001 From: camantigue Date: Mon, 1 Mar 2021 21:18:39 -0800 Subject: [PATCH 07/17] feat: add challenge #4 --- 04 - Array Cardio Day 1/index-START.html | 100 ++++++++++++++++++++++- 1 file changed, 99 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index b64402d59d..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 💁

+ From 56b6842a66d54c7ca706eb1e5e6198a39025a55c Mon Sep 17 00:00:00 2001 From: camantigue Date: Mon, 1 Mar 2021 21:40:17 -0800 Subject: [PATCH 08/17] feat: add challenge #5 --- 05 - Flex Panel Gallery/index-START.html | 43 ++++++++++++++++++++++++ 1 file changed, 43 insertions(+) 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 @@ From 5d3a95784fac3afeb476a0004eb0fba20cff652a Mon Sep 17 00:00:00 2001 From: camantigue Date: Mon, 1 Mar 2021 22:10:17 -0800 Subject: [PATCH 09/17] feat: add challenge #6 --- 06 - Type Ahead/index-START.html | 54 +++++++++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 5 deletions(-) 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 👀 + - + - - - + \ No newline at end of file From 94c764ad1fa04657dfc96ec82e17a7841a29ec87 Mon Sep 17 00:00:00 2001 From: camantigue Date: Tue, 2 Mar 2021 20:50:07 -0800 Subject: [PATCH 10/17] feat: add challenge #7 --- 07 - Array Cardio Day 2/index-START.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) 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); From b339ed07ce895125a3b5fc475e82621a565b8c78 Mon Sep 17 00:00:00 2001 From: camantigue Date: Tue, 2 Mar 2021 21:16:44 -0800 Subject: [PATCH 11/17] feat: add challenge #8 --- 08 - Fun with HTML5 Canvas/index-START.html | 78 ++++++++++++++++++--- 1 file changed, 69 insertions(+), 9 deletions(-) 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 From ba1aa5abd428fa29e90bc5e808fee0dd62f8bed0 Mon Sep 17 00:00:00 2001 From: camantigue Date: Wed, 10 Mar 2021 21:49:30 -0800 Subject: [PATCH 12/17] feat: add challenge #9 --- 09 - Dev Tools Domination/index-START.html | 34 +++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) 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); From f91f70841408ab5c462761a18440b01ea46b9d95 Mon Sep 17 00:00:00 2001 From: camantigue Date: Mon, 15 Mar 2021 21:20:32 -0700 Subject: [PATCH 13/17] feat: add challenge #10 first try --- .../index-START.html | 85 +++++++++++++------ 1 file changed, 61 insertions(+), 24 deletions(-) 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));