diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..6c9ac03cf8 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -60,6 +60,26 @@ diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 55ab1a5331..8dadb56b36 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,13 +1,11 @@ - - - JS + CSS Clock - - - - - + + + JS + CSS Clock + + +
@@ -15,61 +13,98 @@
+
+ + - body { - margin: 0; - font-size: 2rem; - display: flex; - flex: 1; - min-height: 100vh; - align-items: center; - } + - + setInterval(setDate, 1000); + + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index d5fcc3a2ae..2a26ee8af6 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,52 +1,96 @@ - - - Scoped CSS Variables and JS - - - -

Update CSS Variables with JS

+ + + Scoped CSS Variables and JS + + + +

Update CSS Variables with JS

-
- - +
+ + - - + + - - -
+ + +
- + This is random - - input { - width: 100px; - } - + + function handleUpdate() { + const suffix = this.dataset.sizing || ""; + document.documentElement.style.setProperty( + `--${this.name}`, + this.value + suffix + ); + } - + inputs.forEach((input) => input.addEventListener("change", handleUpdate)); + inputs.forEach((input) => + input.addEventListener("mousemove", handleUpdate) + ); + + diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 0dcfd00f40..b37d0ac508 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,66 +1,158 @@ - - - Array Cardio 💪 - - - -

Psst: have a look at the JavaScript Console 💁

- - + + + Array Cardio 💪 + + + +

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 88a4f1d1e2..4b2b9c33e2 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,115 +1,164 @@ - - - Flex Panels 💪 - - - - - - - -
-
-

Hey

-

Let's

-

Dance

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

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
-
-

Give

-

Take

-

Receive

-
-
-

Experience

-

It

-

Today

-
-
-

Give

-

All

-

You can

-
-
-

Life

-

In

-

Motion

-
-
- - - - - + + 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; } 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); 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 @@