From e02deb51aafd587112e344d01b445e2c71f832e6 Mon Sep 17 00:00:00 2001
From: Gabriel Hilal <gabrielhilal@gmail.com>
Date: Tue, 10 Jan 2017 10:08:53 -0200
Subject: [PATCH 1/7] gitignore sublime files

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 6e1a3738b8..b3557c4a30 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,6 @@
 node_modules/
 *.log
 haters/
+
+*.sublime-project
+*.sublime-workspace

From b4629ff6d769ad940a595767f627e8da4d84e9b6 Mon Sep 17 00:00:00 2001
From: Gabriel Hilal <gabrielhilal@gmail.com>
Date: Tue, 10 Jan 2017 14:49:52 -0200
Subject: [PATCH 2/7] 01 - JS Drum Kit

---
 01 - JavaScript Drum Kit/index-START.html | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..a5efec1021 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,9 +58,28 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  "use strict";
+  window.addEventListener("keydown", PlaySound);
 
-</script>
+  function PlaySound(event) {
+    var audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
+    if(!audio) return;
+    audio.currentTime = 0;
+    audio.play();
+    Animate(event);
+  }
+
+  function Animate(event) {
+    var elem = document.querySelector(`div[data-key="${event.keyCode}"]`);
+    elem.classList.add("playing");
+    elem.addEventListener("transitionend", RemoveAnimation);
+  }
 
+  function RemoveAnimation(event) {
+    if (event.propertyName !== "transform") return;
+    event.target.classList.remove("playing");
+  }
+</script>
 
 </body>
 </html>

From 13d3e8a8fc3943906fd809cb43068d7df78e4f97 Mon Sep 17 00:00:00 2001
From: Gabriel Hilal <gabrielhilal@gmail.com>
Date: Fri, 13 Jan 2017 09:28:39 -0200
Subject: [PATCH 3/7] 02 - JS Clock

---
 02 - JS + CSS Clock/index-START.html | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..127e60e036 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,13 +61,37 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
   </style>
 
   <script>
+    "use strict";
+    setInterval(setDate, 1000);
 
+    function setDate() {
+      var now = new Date();
 
+      var secondsDegrees = (now.getSeconds() / 60 * 360) + 90;
+      var minutesDegrees = (now.getMinutes() / 60 * 360) + (now.getSeconds() / 60 * 6) + 90;
+      var hoursDegrees = (now.getHours() / 12 * 360) + (now.getMinutes() / 60 * 30) + 90;
+
+      var secondsPointer = document.querySelector('.second-hand');
+      var minutesPointer = document.querySelector('.min-hand');
+      var hoursPointer = document.querySelector('.hour-hand');
+
+      setPointer(secondsPointer, secondsDegrees);
+      setPointer(minutesPointer, minutesDegrees);
+      setPointer(hoursPointer, hoursDegrees);
+    }
+
+    function setPointer(pointer, value) {
+      pointer.style.transform = `rotate(${value}deg)`;
+    }
   </script>
 </body>
 </html>

From 72c3872616b799e047a64be492c3f4f3667418bf Mon Sep 17 00:00:00 2001
From: Gabriel Hilal <gabrielhilal@gmail.com>
Date: Fri, 13 Jan 2017 10:46:54 -0200
Subject: [PATCH 4/7] 03 - CSS Variables

---
 03 - CSS Variables/index-START.html | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..3a0cd546f0 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,10 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background-color: var(--base);
+      filter: blur(var(--blur));
+    }
 
-    /*
-      misc styles, nothing to do with CSS variables
-    */
+    .hl {
+      color: var(--base);
+    }
 
     body {
       text-align: center;
@@ -48,6 +59,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    "use strict";
+    var inputs = document.querySelectorAll('.controls input');
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+
+    function handleUpdate() {
+      /*jshint validthis: true */
+      var value = this.value + (this.dataset.sizing || '');
+      document.documentElement.style.setProperty(`--${this.name}`, value);
+    }
   </script>
 
 </body>

From 52da060064d6b421082a6b0c5f0274534c13a989 Mon Sep 17 00:00:00 2001
From: Gabriel Hilal <gabrielhilal@gmail.com>
Date: Fri, 13 Jan 2017 12:46:37 -0200
Subject: [PATCH 5/7] 04 - JS Arrays

---
 04 - Array Cardio Day 1/index-START.html | 25 +++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..c275dfbc99 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -7,6 +7,7 @@
 <body>
   <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
   <script>
+    "use strict"
     // Get your shorts on - this is an array workout!
     // ## Array Cardio Day 1
 
@@ -31,28 +32,50 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    var fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
+    console.table(fifteen);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    var fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
+    console.log(fullNames);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    var sortByBirthdate = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
+    console.table(sortByBirthdate);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    var sumLives = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0);
+    console.log(sumLives);
 
     // 5. Sort the inventors by years lived
+    var sortByYearsLived = inventors.sort((a, b) => (a.passed - a.year) > (b.passed - b.year) ? -1 : 1);
+    console.table(sortByYearsLived);
+
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
-
+    // var list = Array.from(document.querySelectorAll('.mw-category a'));
+    // list.map(link => link.textContent).filter(name => name.includes('de'));
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    var sortedPeople = people.map(person => person.split(',')).sort((a,b) => a[0] > b[0] ? 1 : -1).map(array => array[0] + array[1]);
+    console.log(sortedPeople);
 
     // 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 summary = data.reduce(function(obj, item) {
+      if (!obj[item]) {
+        obj[item] = 0;
+      }
+      obj[item]++;
+      return obj;
+    }, {});
+    console.log(summary);
 
   </script>
 </body>

From 68f59acb470dd656060d4809884d12aee92c3aa2 Mon Sep 17 00:00:00 2001
From: Gabriel Hilal <gabrielhilal@gmail.com>
Date: Fri, 13 Jan 2017 16:47:33 -0200
Subject: [PATCH 6/7] 04 - JS Arrays

---
 04 - Array Cardio Day 1/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index c275dfbc99..bea3db45c0 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -7,7 +7,7 @@
 <body>
   <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
   <script>
-    "use strict"
+    "use strict";
     // Get your shorts on - this is an array workout!
     // ## Array Cardio Day 1
 

From 5db72926118ff75fb079cee06c19100c21f9f834 Mon Sep 17 00:00:00 2001
From: Gabriel Hilal <gabrielhilal@gmail.com>
Date: Fri, 13 Jan 2017 16:48:02 -0200
Subject: [PATCH 7/7] 05 - Flex Panel

---
 05 - Flex Panel Gallery/index-START.html | 31 ++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..18f9baa94d 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;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -54,8 +60,17 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      justify-content: center;
+      align-items: center;
+      display: flex;
     }
 
+    .panel > *:first-child { transform: translateY(-100%); }
+    .panel.open-active > *:first-child { transform: translateY(0); }
+    .panel > *:last-child { transform: translateY(100%); }
+    .panel.open-active > *:last-child { transform: translateY(0); }
+
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -67,6 +82,7 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
@@ -107,10 +123,21 @@
   </div>
 
   <script>
+  "use strict";
+  var panels = document.querySelectorAll('.panel');
 
-  </script>
-
+  panels.forEach(panel => panel.addEventListener('click', toggleOpen));
 
+  function toggleOpen() {
+    /*jshint validthis: true */
+    this.classList.toggle('open');
 
+    this.addEventListener('transitionend', function(event) {
+      if(event.propertyName != 'flex-grow') return;
+      console.log(event);
+      this.classList.toggle('open-active');
+    });
+  }
+  </script>
 </body>
 </html>