diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..22de63138d 100644
--- a/01 - JavaScript Drum Kit/index-START.html
+++ b/01 - JavaScript Drum Kit/index-START.html
@@ -58,6 +58,27 @@
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 259280d228..88ebb37b7c 100644
--- a/02 - JS + CSS Clock/index-START.html
+++ b/02 - JS + CSS Clock/index-START.html
@@ -2,16 +2,16 @@
- Codestin Search App
+ Codestin Search App
@@ -61,12 +61,57 @@
background:black;
position: absolute;
top:50%;
+ transform-origin: 100%;
+ transform: rotate(90deg);
+ border-radius: 5px 5px;
}
+ .hand.second-hand {
+ height: 3px;
+ background: red;
+ }
+
+ .hand.hour-hand {
+ width: 35%;
+ margin-left: 45px;
+ }
+
+ .hand-bounce {
+ transition: all 0.05s;
+ transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+ }
+
+
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index bf0f33e3ba..324d933950 100644
--- a/03 - CSS Variables/index-START.html
+++ b/03 - CSS Variables/index-START.html
@@ -22,6 +22,22 @@ Update CSS Variables with JS
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 089352c8a6..38b44dcd3a 100644
--- a/04 - Array Cardio Day 1/index-START.html
+++ b/04 - Array Cardio Day 1/index-START.html
@@ -27,28 +27,85 @@
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
+ const fifteenHundreds = inventors.filter(function (inventor) {
+ if (inventor.year >= 1500 && inventor.year <= 1600) {
+ return true;
+ };
+ });
+
+ console.table(fifteenHundreds);
// Array.prototype.map()
// 2. Give us an array of the inventory first and last names
+ const inventorFullNames = inventors.map(function (inventor) {
+ return `${inventor.first} ${inventor.last}`;
+ });
+
+ console.log(inventorFullNames);
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
+ const inventorsByBirthdate = inventors.sort(function (a, b) {
+ if (a.year > b.year) {
+ return 1;
+ } else {
+ return -1;
+ };
+ });
+
+ console.table(inventorsByBirthdate);
// Array.prototype.reduce()
// 4. How many years did all the inventors live?
+ const inventorsTotalYears = inventors.reduce(function (total, inventor) {
+ return total + (inventor.passed - inventor.year);
+ }, 0);
+
+ console.log(inventorsTotalYears);
// 5. Sort the inventors by years lived
+ const inventorsByAge = inventors.sort(function (a, b) {
+ if ((a.passed - a.year) < (b.passed - b.year)) {
+ return 1;
+ } else {
+ return -1;
+ };
+ });
+
+ console.table(inventorsByAge);
// 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 deBoulevards = Array.from(document.querySelector('.mw-category').querySelectorAll('a')).map(function (link) {
+ return link.textContent;
+ }).filter(function (text) {
+ return text.includes('de');
+ });
// 7. sort Exercise
// Sort the people alphabetically by last name
+ const peopleByLastName = people.sort(function (a, b) {
+ if ((a.split(', ')[0]) > (b.split(', ')[0])) {
+ return 1;
+ } else {
+ return -1;
+ };
+ });
+
+ console.log(peopleByLastName);
// 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 transportTypeCount = data.reduce(function (k, v) {
+ if (!k[v]) {
+ k[v] = 0;
+ };
+ k[v]++;
+ return k;
+ }, {});
+
+ console.log(transportTypeCount);
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..93ec6d0360 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,11 @@
font-size: 20px;
background-size:cover;
background-position:center;
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
}
@@ -54,6 +60,22 @@
margin:0;
width: 100%;
transition:transform 0.5s;
+ display: flex;
+ flex: 1 0 auto;
+ justify-content: center;
+ align-items: center;
+ }
+
+ panel > *:first-child {
+ transform: translateY(-100%);
+ }
+
+ panel > *:last-child {
+ transform: translateY(100%);
+ }
+
+ .panel.open-active > *:first-child, .panel.open-active > *:last-child {
+ transform: translateY(0);
}
.panel p {
@@ -67,6 +89,7 @@
}
.panel.open {
+ flex: 5;
font-size:40px;
}
@@ -107,6 +130,22 @@