done 5 and 6

05 - Flex Panel Gallery/index-START.html

@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display:flex;
     }
 
     .panel {
@@ -41,6 +42,9 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -54,8 +58,20 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-
+  .panel > p:first-child{
+    transform: translateY(-100%);
+  }
+  .panel > p:last-child{
+    transform: translateY(100%);
+  }
+  .open-active p{
+    transform: translateY(0) !important;
+  }
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -68,6 +84,7 @@
 
     .panel.open {
       font-size:40px;
+      flex-grow: 5;
     }
 
     .cta {
@@ -107,7 +124,30 @@
   </div>
 
   <script>
-
+(function(){
+  let panels = document.querySelectorAll('.panel');
+  let currentPanel; 
+  function togglePanel(){
+    currentPanel = this;
+    this.classList.add('open');
+    closeOtherPanels(this);
+  }
+
+  function togglePanelText(e){
+    if(e.propertyName == "flex-grow" && e.target == currentPanel) this.classList.add('open-active');
+  }
+
+  function closeOtherPanels(target){
+    panels.forEach(panel => {
+      if(panel !== target) panel.classList.remove('open', 'open-active');
+    });
+  }
+
+  panels.forEach(panel => {
+    panel.addEventListener('click', togglePanel);
+    panel.addEventListener('transitionend', togglePanelText);
+  });
+})();
   </script>
 
 

06 - Type Ahead/index-START.html

@@ -15,8 +15,40 @@
     </ul>
   </form>
 <script>
-const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+  //http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
+  function numberWithCommas(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
+  //data source
+  const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+  fetch(endpoint)
+    .then(response => response.json())
+    .then(json => typeAhead(json))
+
+  function typeAhead(data){
+    const input = document.querySelector('.search');
+    const resultList = document.querySelector('.suggestions');
+
+    function filterList(){
+      let val = this.value;
+      let rx = new RegExp(val, 'gi');
+      resultList.innerHTML = data.reduce((list, item) =>{
+        if(item.city.match(rx) || item.state.match(rx)) {
+          let nCity = item.city.replace(rx, `<span class="hl">${val}</span>`);
+          let nState = item.state.replace(rx, `<span class="hl">${val}</span>`);
+          list += `<li>
+            <span class="nam">${nCity}, ${nState}</span>
+            <span class="populatio">${numberWithCommas(item.population)}</span>
+          </li>`;
+        }
+        return list;
+      }, '');
+    }
+
+    input.addEventListener('change', filterList);
+    input.addEventListener('keyup', filterList);
+  }
 </script>
   </body>
 </html>