completed wesbos#4

Author: Harshavardhan Boddupally

04 - Array Cardio Day 1/CustomHigherOrder.js

@@ -14,8 +14,8 @@ function myownmap(arr, fn) {
     });
     return newArray;
 }
-console.log(arr2);
-console.log(arr3);
+//console.log(arr2);
+//console.log(arr3);
 
 /*Our own version of array filter*/
 const arr4 = [1, 2, 3,4,5,6,7,8];
@@ -29,6 +29,6 @@ function myownfilter(arr, fn) {
     });
     return newArray;
 }
-console.log(arr5);
-console.log('custom');
-console.log(arr6);
+//console.log(arr5);
+//console.log('custom');
+//console.log(arr6);

04 - Array Cardio Day 1/index-FINISHED.html

@@ -89,7 +89,8 @@
 
     // 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', 'pogostick'];
+    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 
+    'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];
 
     const transportation = data.reduce(function(obj, item) {
       if (!obj[item]) {

04 - Array Cardio Day 1/index-START.html

@@ -35,33 +35,38 @@
     // Array.prototype.map()
     // 2. Give us an array of the inventors first and last names
     const inventornames = inventors.map(element => `${element.first} ${element.last}`);
-    console.log(inventornames);
+    const tryMaps = inventors.map(function(element,index,array){
+      console.log(element);
+      console.log(index);
+      console.log(array);     
+    })
+   // console.log(inventornames);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
     const inventorAges = inventors.sort((a,b) => (a.year - b.year));
-    console.log('ages');
-    console.log(inventorAges);
+   // console.log('ages');
+   // console.log(inventorAges);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live all together?
     const ageCombined_func = (accumulator, currentValue) => accumulator + (currentValue.passed-currentValue.year);
     const ageCombined = inventors.reduce(ageCombined_func,0);
-    console.log('ages combined');
-    console.log(ageCombined);
+    //console.log('ages combined');
+    //console.log(ageCombined);
 
     // 5. Sort the inventors by years lived
     const inventorOld = inventors.sort((a,b) => ((a.year-a.passed) - (b.year-b.passed)));
-    console.log('old');
-    console.log(inventorOld);
+    //console.log('old');
+    //console.log(inventorOld);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
     let getAllAnchors = document.querySelectorAll('.mw-category-group > ul > li > a');
     let allNames =[]; 
     getAllAnchors.forEach((a) => allNames.push((a.title)));
     let allFilteredNames = allNames.filter(element => element.includes('de'));
-    console.log(allFilteredNames);
+    //console.log(allFilteredNames);
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
@@ -75,19 +80,19 @@
           // a must be equal to b
           return 0;
         });
-    console.log('names');
-    console.log(peopleName);
+   // console.log('names');
+   // console.log(peopleName);
 
     // 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 result = [];
-    // const instance_func = function(accumulator, currentValue){
-    //   if(data.filter((element) => element === currentValue))
-    // };
-    // const ageCombined = inventors.reduce(ageCombined_func,0);
-    // console.log('ages combined');
-    // console.log(ageCombined);
+    const transportation = data.reduce(function(obj, item) {
+      if (!obj[item]) {
+        obj[item] = 0;
+      }
+      obj[item]++;
+      return obj;
+    }, {});
 
   </script>
   <script src="CustomHigherOrder.js"></script>

05 - Flex Panel Gallery/index-START.html

@@ -26,6 +26,8 @@
     .panels {
       min-height: 100vh;
       overflow: hidden;
+      display: flex;
+      justify-content: space-between;
     }
 
     .panel {
@@ -43,6 +45,10 @@
       font-size: 20px;
       background-size: cover;
       background-position: center;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
     }
 
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
@@ -69,10 +75,24 @@
       font-size: 4em;
     }
 
+    .panel p:not(:nth-child(2)) {
+      transform: translateY(-1000%);
+      transition: transform .5s ease-in;
+     }
+
     .panel.open {
       font-size: 40px;
     }
 
+    .expandPanel{
+      flex-grow: 10;
+    }
+
+    .slideIn{
+      display: block;
+      transform: translateY(100%);
+    }
+
   </style>
 
 
@@ -105,7 +125,14 @@
   </div>
 
   <script>
+    const getPanel = document.querySelectorAll('.panel');
+    getPanel.forEach(element => element.addEventListener("click",function(e){
+      addExpandClass(this);
+    }))
 
+    const addExpandClass = function (e){
+        e.classList.toggle('expandPanel');
+    }
   </script>