From d8244b6e53d83614af64fdb8ceb19875a6b36d63 Mon Sep 17 00:00:00 2001
From: Vaibhav Gupta <vaigup@amazon.com>
Date: Sun, 3 Jun 2018 11:07:42 +0530
Subject: [PATCH 1/5] Solution1

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..f089c771a5 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,6 +58,27 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  let keys = Array.from(document.getElementsByClassName('key'));
+  let audioElems = Array.from(document.getElementsByTagName('audio'));
+
+  document.onkeypress = function(event){
+    let key = event.which || event.keyCode;
+    let targetAudio = audioElems.filter((audioElem) => +audioElem.getAttribute('data-key') === key)[0];
+    targetAudio.currentTime = 0;
+    targetAudio.play();
+
+  }
+  audioElems.forEach(function(audioElem){
+    let key = audioElem.getAttribute('data-key');
+    let targetKeyElem = keys.filter((keyElem) => keyElem.getAttribute('data-key') === key)[0];
+    
+    audioElem.onplay = function(){
+      targetKeyElem.classList.add('playing');
+    };
+    audioElem.onended = function(){
+      targetKeyElem.classList.remove('playing');
+    };
+  });
 
 </script>
 

From 2c873849b3b2212f8f8218502a797705394df3ee Mon Sep 17 00:00:00 2001
From: Vaibhav Gupta <vaigup@amazon.com>
Date: Sun, 3 Jun 2018 12:16:43 +0530
Subject: [PATCH 2/5] Solution 2

---
 02 - JS and CSS Clock/index-START.html | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index ee7eaefb1f..a249ce2ed9 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -62,12 +62,31 @@
       background:black;
       position: absolute;
       top:50%;
+      transform: rotate(90deg);
+      transform-origin: 100%;
+      transition: all 0.07s;
+      transition-timing-function: cubic-bezier(0.1, 1.55, 1, 1);
     }
 
   </style>
-
+    
   <script>
+    let secondHand = document.querySelector('.second-hand');
+    let minuteHand = document.querySelector('.min-hand');
+    let hourHand = document.querySelector('.hour-hand');
+    function setTime(){
+      const date = new Date();
+      const secondsDeg = date.getSeconds()/60 * 360 + 90;
+      const minutesDeg = date.getMinutes()/60 * 360 + 90;
+      const hourDeg = (date.getHours() % 12)/12 * 360 + 90;
+      secondHand.style.transform = `rotate(${secondsDeg}deg)`;
+      minuteHand.style.transform = `rotate(${minutesDeg}deg)`;
+      hourHand.style.transform = `rotate(${hourDeg}deg)`;
 
+    }
+    setInterval(function(){
+      setTime();
+    }, 1000);
 
   </script>
 </body>

From 9cac471f50c954a50adc63222de56266b8258d58 Mon Sep 17 00:00:00 2001
From: Vaibhav Gupta <vaigup@amazon.com>
Date: Sun, 3 Jun 2018 12:31:53 +0530
Subject: [PATCH 3/5] Solution3

---
 03 - CSS Variables/index-START.html | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 8a4f0d556e..ad9ac9ee19 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -26,6 +26,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       misc styles, nothing to do with CSS variables
     */
 
+    :root {
+      --base: yellow;
+      --blur: 10px;
+      --spacing: 10px;
+
+    }
+
     body {
       text-align: center;
       background: #193549;
@@ -35,6 +42,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       font-size: 50px;
     }
 
+    img {
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .hl {
+      color: var(--base);
+    }
+
     .controls {
       margin-bottom: 50px;
     }
@@ -45,6 +62,14 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('input');
+    inputs.forEach((input) => {
+      input.addEventListener('change', function(){
+        let value = this.value;
+        let sizing = this.dataset.sizing || '';
+        document.documentElement.style.setProperty(`--${this.name}`, `${value}${sizing}`);
+      });
+    })
   </script>
 
 </body>

From 8c1a53ad393b7dd6795b392282767674da8d9957 Mon Sep 17 00:00:00 2001
From: Vaibhav Gupta <vaigup@amazon.com>
Date: Sun, 3 Jun 2018 13:41:35 +0530
Subject: [PATCH 4/5] Solution4

---
 04 - Array Cardio Day 1/index-START.html | 11 ++++++++--
 05 - Flex Panel Gallery/index-START.html | 27 ++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..7791445a65 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,17 +31,24 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
-
+    const inventors1500 = inventors.filter(inventor => 1500 < inventor.year && inventor.year < 1600 );
+    console.log(inventors1500);
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
-
+    const firstNameLastName = inventors.map((inventor) => ({first: inventor.first, last: inventor.last}));
+    console.log(firstNameLastName);
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    inventors.sort((inventor1, inventor2) => inventor1.year - inventor2.year);
+    console.log(inventors);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const years = inventors.reduce((acc, inventor) => acc + inventor.passed - inventor.year, 0);
+    console.log(years);
 
     // 5. Sort the inventors by years lived
+    
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index c6509bed02..cc4274d43a 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,10 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
     }
 
 
@@ -54,6 +59,10 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      display:flex;
+      justify-content: center;
+      align-items: center;
+      flex: 1 0 auto;
     }
 
     .panel p {
@@ -67,9 +76,15 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
+    .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); }
+
   </style>
 
 
@@ -102,6 +117,18 @@
   </div>
 
   <script>
+    var panels = document.querySelectorAll('.panel');
+    panels.forEach(panel => {
+      panel.addEventListener('click', function(){
+        this.classList.toggle('open');
+      });
+      panel.addEventListener('transitionend', function(event){
+        if(event.propertyName.includes('flex')){
+          this.classList.toggle('open-active');
+        }
+      });
+    });
+
 
   </script>
 

From f8305e7eea3b185a2b12369c8ae55a8e8c069cc9 Mon Sep 17 00:00:00 2001
From: Vaibhav Gupta <vaigup@amazon.com>
Date: Sun, 3 Jun 2018 14:17:07 +0530
Subject: [PATCH 5/5] Solution6

---
 06 - Type Ahead/index-START.html | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..f661ba5bbf 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -16,7 +16,36 @@
   </form>
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+const city = [];
+fetch(endpoint)
+  .then(response => response.json())
+  .then(data => city.push(...data));
+let search = document.querySelector('.search');
+let suggestions = document.querySelector('.suggestions');
 
+
+function filterResults(toMatch, cities){
+  return cities.filter((place) => {
+    let regex = new RegExp(toMatch, 'i');
+    return place.city.match(regex) || place.state.match(regex);
+  });
+}
+
+function displayResults(){
+  let html = filterResults(this.value, city).map(place => {
+    let regex = new RegExp(this.value, 'gi');
+    let city = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+    let state = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+    return `
+      <li>
+        <span class="name">${city}, ${state}</span>
+        <span class="population">${place.population}</span>
+      </li>
+    `;
+  }).join('');
+  suggestions.innerHTML = html;
+}
+search.addEventListener('keyup', displayResults);
 </script>
   </body>
 </html>