- A
- clap
-
-
- S
- hihat
-
-
- D
- kick
-
-
- F
- openhat
-
-
- G
- boom
-
-
- H
- ride
+
+
+ JS Drum Kit
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
+
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 55ab1a5331..eef33fc75d 100644
--- a/02 - JS and CSS Clock/index-START.html
+++ b/02 - JS and CSS Clock/index-START.html
@@ -1,75 +1,131 @@
-
-
-
+
-
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
- J
- snare
-
-
- K
- tom
-
-
- L
- tink
-
-
+
+
+
Update CSS Variables with JS
+ + +Update CSS Variables with JS
-
-
-
+
-
+
+
-
-
+
+
-
-
-
+
+
+ 
+
-
+ 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 0dcfd00f40..2908a6b06a 100644
--- a/04 - Array Cardio Day 1/index-START.html
+++ b/04 - Array Cardio Day 1/index-START.html
@@ -1,66 +1,163 @@
-
-
- Psst: have a look at the JavaScript Console 💁
- - + console.table(filter_1500); + // Array.prototype.map() + // 2. Give us an array of the inventors first and last names + const map_name = inventors.map( + (inventor) => inventor.first + "-" + inventor.last + ); + console.log(map_name); + // Array.prototype.sort() + // 3. Sort the inventors by birthdate, oldest to youngest + const sort_by_dob = inventors.sort((a, b) => a.year - b.year); + console.table(sort_by_dob); + // Array.prototype.reduce() + // 4. How many years did all the inventors live all together? + const year_sum = inventors.reduce((accumulator, currentValue) => { + return accumulator + (currentValue.passed - currentValue.year); + }, 0); + console.log("Total Year : ", year_sum); + // 5. Sort the inventors by years lived + const sort_age = inventors.sort( + (a, b) => a.passed - a.year - (b.passed - b.year) + ); + console.table(sort_age); + /* 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"); +//links are in a form of a node-list +//so we have tochange it in form of array +//we can do this in two ways +//spread operator +const link_arr = [...links]; +//Using Array.from() +const link_arr_2 = Array.from(links); +const de1 = link_arr.map((lnk) => lnk.textcontent); +//now lets filter them wherever there is de +const de = link_arr + .map((lnk) => lnk.textContent) + .filter((name) => name.includes('de'));*/ + // 7. sort Exercise + // Sort the people alphabetically by last name + const alpha = people.sort((lastOne, nextOne) => { + const [aLast, aFirst] = lastOne.split(", "); + const [bLast, bFirst] = nextOne.split(", "); + return aLast > bLast ? 1 : -1; + }); + console.log(alpha); + //The destructuring assignment [aLast, aFirst] and [bLast, bFirst] + //is used to assign the last and first names to variables for easier comparison. + const sort_last = people.sort((a, b) => { + const a_last = a.split(", ")[0]; + const b_last = b.split(", ")[0]; + return a_last.localeCompare(b_last); //compares two string of different types of loacal languages + }); + // 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 vehicles_num = data.reduce((list_acc, vehicle) => { + if (!list_acc[vehicle]) { + list_acc[vehicle] = 0; + } else { + list_acc[vehicle] += 1; + } + return list_acc; + }, {}); + console.table(vehicles_num); + +