diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..a4cb49b787 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,7 +59,22 @@ diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 55ab1a5331..5d42082a35 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -63,12 +63,34 @@ background: black; position: absolute; top: 50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s;; } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index d5fcc3a2ae..be3833822a 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

-
- - +
+ + - - + + - - -
+ + +
- + - - input { - width: 100px; - } - + + function handleUpdate(e) { + 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..fd8dc70a92 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -38,28 +38,60 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen = inventors.filter(function (inventor) { + if (inventor.year < 1600 && inventor.year >= 1500) { + return true + } + }) // Array.prototype.map() // 2. Give us an array of the inventors first and last names + const fullNames = inventors.map((inventor) => `${inventor.first} ${inventor.last}`) + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const elders = [...inventors].sort((a, b) => a.year - b.year) + // Array.prototype.reduce() // 4. How many years did all the inventors live all together? + + const sumAge = inventors.reduce((total, inventor) => { return total + (inventor.passed - inventor.year)}, 0) // 5. Sort the inventors by years lived + const lifetime = [...inventors].sort((a, b) => (a.passed - a.year) - (b.passed - b.year)) + console.table(lifetime) // 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 = [...category.querySelectorAll('a')] + // const de = links + // .map(link => link.textContent) + // .filter(name => name.includes('de')) // 7. sort Exercise // Sort the people alphabetically by last name + const lastName = people.sort(function(a, b) { + const [aLast, aFirst] = a.split(', ') + const [bLast, bFirst] = b.split(', ') + + return aLast.localeCompare(bLast) + }) + console.table(lastName) // 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((obj, item) => { + if (!obj[item]) { + obj[item] = 0 + } + obj[item]++ + return obj + }, {}) diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html index 85c33c1ee2..98656ba52f 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -1,148 +1,174 @@ - + - - - Flex Panels 💪 - - - - - + .panel p:nth-child(2) { + font-size: 4em; + } -
-
-

Hey

-

Let's

-

Dance

-
-
-

Give

-

Take

-

Receive

-
-
-

Experience

-

It

-

Today

-
-
-

Give

-

All

-

You can

-
-
-

Life

-

In

-

Motion

-
-
+ .panel.open { + flex: 5; + font-size: 40px; + } - + function toggleActive(e) { + console.log(e.propertyName); + if (e.propertyName.includes("flex")) { + this.classList.toggle("open-active"); + } + } - + panels.forEach((panel) => panel.addEventListener("click", toggleOpen)); + panels.forEach((panel) => + panel.addEventListener("transitionend", toggleActive), + ); + + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 88a4f1d1e2..7b8006205f 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,115 +1,192 @@ - + - - - 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..a6d2d9e0e2 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,23 +1,46 @@ - + - - - Type Ahead 👀 - - - - + + + Type Ahead 👀 + + + + +
+ + +
+ - + fetch(endpoint) + .then((blob) => blob.json()) + .then((data) => cities.push(...data)); + + function findMatches(wordToMatch, cities) { + return cities.filter((place) => { + const regex = new RegExp(wordToMatch, "gi"); + return place.city.match(regex) || place.state.match(regex); + }); + } + + function displayMatches() { + const matchArray = findMatches(this.value, cities); + console.log(matchArray); + } + + const searchInput = document.querySelector(".search"); + const suggestions = document.querySelector(".suggestions"); + + searchInput.addEventListener("change", displayMatches); + searchInput.addEventListener("keyup", displayMatches); + + diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 4ca34c7536..56470ace3d 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,42 +1,54 @@ - + - - - Array Cardio 💪💪 - - - -

Psst: have a look at the JavaScript Console 💁

- - + // Array.prototype.findIndex() + // Find the comment with this ID + const index = comments.find((element) => element.id === 823423); + comments.slice(1); + console.table(comments); + + // delete the comment with the ID of 823423 + +