Flex Panels 💪

Update CSS Variables with JS

Date: Sun, 17 Sep 2023 21:18:40 +0700 Subject: [PATCH 04/16] learn array function --- 04 - Array Cardio Day 1/index-START.html | 29 +++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 0dcfd00f40..2729c15604 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -38,29 +38,56 @@ // 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.table(fullNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + 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 all together? + const totalYears = inventors.reduce((total, inventor) => (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'); + // 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 sortedPeople = people.sort((a,b) => { + const [aLast, aFirst] = a.split(', '); + const [bLast, bFirst] = b.split(', '); + return aFirst > bFirst ? 1 : -1; + }); + console.table(sortedPeople); // 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 reducedData = data.reduce((obj, item) => { + if(!obj[item]){ + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + console.table(reducedData); From 2986495fd0b6d666b2fcaade7beddfbf99e9962f Mon Sep 17 00:00:00 2001 From: Ihwan Date: Sat, 16 Dec 2023 04:38:26 +0700 Subject: [PATCH 05/16] learn flex --- 05 - Flex Panel Gallery/index-START.html | 268 +++++++++++++---------- 1 file changed, 158 insertions(+), 110 deletions(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 88a4f1d1e2..93b7a4c2f0 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,115 +1,163 @@ - - - Flex Panels 💪 - - - - - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

+ + + Flex Panels 💪 + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

Life

Motion

- - - - - + + From 325c05e7e76f934536fb88578d088ace9932c06b Mon Sep 17 00:00:00 2001 From: Ihwan Date: Sun, 17 Dec 2023 16:51:31 +0700 Subject: [PATCH 06/16] learn filter --- 06 - Type Ahead/index-START.html | 90 +++++++++++++++++++++++++------- 1 file changed, 70 insertions(+), 20 deletions(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 5a9aa7e4e8..5dee1c6f16 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,23 +1,73 @@ - - - Type Ahead 👀 - - - - - - - - + + + Type Ahead 👀 + + + + + + + From 894fc57eff8958d25b44fa80efd4dac495913b7c Mon Sep 17 00:00:00 2001 From: Ihwan Date: Mon, 15 Jan 2024 11:29:34 +0700 Subject: [PATCH 07/16] learn some, every, find, findIndex --- 07 - Array Cardio Day 2/index-START.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 4ca34c7536..2d52c38c48 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -27,15 +27,22 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + const isAdult = people.some((person) => ((new Date()).getFullYear()) - person.year >= 19); + console.log({isAdult}); // Array.prototype.every() // is everyone 19 or older? - + const isAllAdult = people.every((person) => ((new Date()).getFullYear()) - person.year >= 19); + console.log({isAllAdult}); // 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); + console.log(index); From fe9915655dcf8fbe4ab7c7cc50fbbac1fb164cb8 Mon Sep 17 00:00:00 2001 From: Ihwan Date: Sun, 21 Jan 2024 00:52:24 +0700 Subject: [PATCH 08/16] drawing on canvas --- 08 - Fun with HTML5 Canvas/index-START.html | 30 +++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index f70ad2059b..52ff8496c6 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -8,6 +8,36 @@

- -

Update CSS Variables with JS

Slide in on Scroll

LOCAL TAPAS