JS + CSS Clock

Hey

Let's

Dance

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

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- - - - - + + From 9897b7b540251653e2980a7ca62d492ee3828ed9 Mon Sep 17 00:00:00 2001 From: Higokian Date: Sat, 1 Feb 2025 09:41:36 -0600 Subject: [PATCH 06/12] Complete Type Ahead project - Day 6 --- 06 - Type Ahead/index-START.html | 40 ++++++++++++++++++++++++++++++++ 06 - Type Ahead/style.css | 2 +- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 5a9aa7e4e8..d9e6a21e5a 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -18,6 +18,46 @@ diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css index 0c8c74e01b..50364ba99c 100644 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -1,7 +1,7 @@ html { box-sizing: border-box; background: #ffc600; - font-family: 'helvetica neue'; + font-family: 'helvetica neue', serif; font-size: 20px; font-weight: 200; } From 6bad7ae6a1a27fe662b7a2f5bf0825e5bc88b58d Mon Sep 17 00:00:00 2001 From: Higokian Date: Sat, 1 Feb 2025 09:49:59 -0600 Subject: [PATCH 07/12] Various changes --- 03 - CSS Variables/index-START.html | 164 +++++++++++++---------- 04 - Array Cardio Day 1/index-START.html | 19 +-- 05 - Flex Panel Gallery/index-START.html | 2 +- 3 files changed, 101 insertions(+), 84 deletions(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index e0e4d8f657..2a26ee8af6 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,80 +1,96 @@ - - - Scoped CSS Variables and JS - - - -

Update CSS Variables with JS

- -

- Spacing: - - - Blur: - - - Base Color - -

- -

- - - - - - + body { + text-align: center; + background: #193549; + color: white; + font-family: "helvetica neue", sans-serif; + font-weight: 100; + font-size: 50px; + } + + .controls { + margin-bottom: 50px; + } + + input { + width: 100px; + } + + + + diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 0fe05db64e..b37d0ac508 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -89,12 +89,14 @@ // 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) + 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) => {return total + (inventor.passed - inventor.year)}, 0); + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); console.table(totalYears); // 5. Sort the inventors by years lived @@ -118,13 +120,12 @@ // 7. sort Exercise // Sort the people alphabetically by last name const alpha = people.sort((lastOne, nextOne) => { - const aLast = lastOne.split(', '); - const bLast = nextOne.split(', '); + const aLast = lastOne.split(", "); + const bLast = nextOne.split(", "); return aLast > bLast ? 1 : -1; }); console.table(alpha); - // 8. Reduce Exercise // Sum up the instances of each of these const data = [ @@ -145,13 +146,13 @@ ]; const transportation = data.reduce((obj, item) => { - if(!obj[item]) { + if (!obj[item]) { obj[item] = 0; } - + obj[item]++; return obj; - }, {}) + }, {}); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 91480acc04..4b2b9c33e2 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -15,7 +15,7 @@ html { box-sizing: border-box; background: #ffc600; - font-family: "helvetica neue"; + font-family: "helvetica neue", serif; font-size: 20px; font-weight: 200; } From 3c8e323f3d6755faaf5318cc3b68d49883e3302b Mon Sep 17 00:00:00 2001 From: Higokian Date: Sat, 1 Feb 2025 10:32:26 -0600 Subject: [PATCH 08/12] Complete Array Cardio Day 2 - Day 07 --- 07 - Array Cardio Day 2/index-START.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 4ca34c7536..6bae484a7c 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -27,15 +27,29 @@ // 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 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 personComment = comments.find(comment => comment.id === 823423); + console.log(personComment); // 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); + if (index !== -1) { + comments.splice(index, 1); + } + console.log(comments); From d92f9465d1e9f94a9ca59b07011603718cacd246 Mon Sep 17 00:00:00 2001 From: Higokian Date: Mon, 3 Feb 2025 11:37:48 -0600 Subject: [PATCH 09/12] Fun with HTML 5 Canvas - Day 08 --- 08 - Fun with HTML5 Canvas/index-START.html | 67 +++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index f70ad2059b..e79a876d0d 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -8,6 +8,73 @@