Commits the changes that I have done.

tojochacko · tojochacko · commit 78867a626599 · 2016-12-26T16:39:16.000+05:30
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -6,8 +6,6 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
-
   <div class="keys">
     <div data-key="65" class="key">
       <kbd>A</kbd>
@@ -58,9 +56,27 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  window.addEventListener('keydown', playSound)
 
-</script>
+  function playSound(e) {
+    var audio = document.querySelector('audio[data-key="'+e.keyCode+'"]');
+    if(!audio) return;
+    audio.currentTime = 0;
+    audio.play();
+    var key = document.querySelector('div[data-key="'+e.keyCode+'"]');
+    console.log(key);
+    key.classList.add('playing');
+  }  
 
+  var keys = document.querySelectorAll('div.key')
+  keys.forEach(key => key.addEventListener('transitionend', removeButtonColor))
+
+  function removeButtonColor(e) {
+    if(e.propertyName == 'transform') {
+      e.target.classList.remove('playing');
+    }
+  }
+</script>
 
 </body>
 </html>
diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html
@@ -63,7 +63,7 @@
       top:50%;
       transform-origin: 100%;
       transform: rotate(90deg);
-      transition: all 0.05s;
+      transition: all 0.5s;
       transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 </style>
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>JS + CSS Clock</title>
-</head>
+</head> 
 <body>
 
 
@@ -36,7 +36,7 @@
     .clock {
       width: 30rem;
       height: 30rem;
-      border:20px solid white;
+      border:20px solid black;
       border-radius:50%;
       margin:50px auto;
       position: relative;
@@ -58,16 +58,37 @@
     .hand {
       width:50%;
       height:6px;
-      background:black;
+      background:white;
       position: absolute;
       top:50%;
+      transition: 0.05s;
+      transform: rotate(90deg);
+      transform-origin: 100%;
     }
 
   </style>
 
   <script>
+    setInterval(rotateClock, 1000);
 
+    function rotateClock() {
+      var now = new Date();
+      var seconds = now.getSeconds();
+      var secondsDegress = ((seconds/60)*360) + 90;
+      var secondsHand = document.querySelector('div.second-hand');
+      secondsHand.style.transform = 'rotate('+secondsDegress+'deg)';
 
+      var minutes = now.getMinutes();
+      var minsDegree = ((minutes/60)*360) + 90;
+      var minsHand = document.querySelector('div.min-hand');
+      minsHand.style.transform = 'rotate('+minsDegree+'deg)';
+
+      var hours = now.getHours();
+      hours = 21;
+      var hoursDegree = ((hours/12)*360) + 90;
+      var hoursHand = document.querySelector('div.hour-hand');
+      hoursHand.style.transform = 'rotate('+hoursDegree+'deg)';
+    }
   </script>
 </body>
 </html>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
@@ -31,28 +31,75 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    var filteredInventors = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
+    console.table(filteredInventors);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    var lastNameArr = inventors.map(function(item) {
+        return item.first + ' ' + item.last;
+    });
+    console.log(lastNameArr);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    var sortedByBirth = inventors.sort(function(a,b) {
+        if (a.year < b.year) {
+            return -1;
+        }
+        else {
+            return 1;
+        }
+    });
+    console.table(sortedByBirth);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    var totalYears = inventors.reduce((total, item) => {
+        return total + (item.passed - item.year); 
+    },0);
+
+    console.log(totalYears);
 
     // 5. Sort the inventors by years lived
+    var yearsLived = inventors.sort((a,b) => {
+        ayearslived = a.passed - a.year;
+        byearslived = b.passed - b.year;
+
+        if(ayearslived > byearslived) {
+            return 1;
+        }
+        else {
+            return -1;
+        }
+    });
+    console.table(yearsLived);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
-
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    var sortedByLastName = people.sort((a,b) => {
+        var [aLast, aFirst] = a.split(', '); 
+        var [bLast, bFirst] = b.split(', '); 
+
+        return aLast > bLast ? 1 : -1;
+    });
+    console.log(sortedByLastName);
 
     // 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' ];
+    var tojo = data.reduce((obj, item) => {
+        if(!obj[item]) {
+            obj[item] = 0;
+        }
+        obj[item]++; 
+        
+        return obj;
+    },{});
+    console.log(tojo);
 
   </script>
 </body>

Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@`
`63`	`63`	`top:50%;`
`64`	`64`	`transform-origin: 100%;`
`65`	`65`	`transform: rotate(90deg);`
`66`		`- transition: all 0.05s;`
	`66`	`+ transition: all 0.5s;`
`67`	`67`	`transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);`
`68`	`68`	`}`
`69`	`69`	`</style>`