From 82dc0a944c4b35f2de7269a2e62a4b3033271680 Mon Sep 17 00:00:00 2001
From: rhondarobot <rrachellej@gmail.com>
Date: Sat, 7 Apr 2018 17:08:08 -0700
Subject: [PATCH] clock

---
 02 - JS + CSS Clock/index-START.html        | 25 +++++++++++-
 04 - Array Cardio Day 1/index-START.html    |  2 +
 05 - Flex Panel Gallery/index-FINISHED.html |  1 +
 05 - Flex Panel Gallery/index-START.html    | 42 +++++++++++++++++++-
 06 - Type Ahead/index-START.html            |  6 +++
 15 - LocalStorage/index-START.html          | 44 ++++++++++++++++++++-
 6 files changed, 115 insertions(+), 5 deletions(-)

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..f55ef1dd3d 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -58,15 +58,36 @@
     .hand {
       width:50%;
       height:6px;
-      background:black;
+      background: orange;
       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>
-
+    const hourHand =  document.querySelector('.hour-hand');
+    const minuteHand = document.querySelector('.min-hand');
+    const secondHand = document.querySelector('.second-hand');
+    function setDate() {
+      const now = new Date();
+      const seconds = now.getSeconds();
+      const mins = now.getMinutes();
+      const hours = now.getHours();
+      const secondsDegrees = ((seconds / 60) * 360) + 90; // the added 90 was to offset the original 90deg
+      // set in the .hand styles so that the seconds will be in line with the clock, instead of just random
+      // seconds / 60 === 1. 1 * 360 = 360 degrees of rotation.  add 90 to offset the prev. declared 90º
+      const minsDegrees = (( mins / 60) * 360) + 90;
+      const hoursDegrees = (( hours / 12) * 360) + 90;
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+      minuteHand.style.transform = `rotate(${minsDegrees}deg)`;
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+    }
+  setInterval(setDate, 1000);
 
   </script>
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..171142248c 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -33,6 +33,8 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const 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
diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html
index 243f8a221d..adb9060f5f 100644
--- a/05 - Flex Panel Gallery/index-FINISHED.html	
+++ b/05 - Flex Panel Gallery/index-FINISHED.html	
@@ -44,6 +44,7 @@
       background-position:center;
       flex: 1;
       justify-content: center;
+      align-items: center;
       display: flex;
       flex-direction: column;
     }
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..1654ba8f91 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,29 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
+    .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 +94,7 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
@@ -107,10 +135,20 @@
   </div>
 
   <script>
+  const panels = document.querySelectorAll('.panel');
 
-  </script>
-
+  function toggleOpen() {
+    this.classList.toggle('open');
+  }
 
+  function toggleActive(e) {
+    if(e.propertyName.includes('flex')) {
+      this.classList.toggle('open-active');
+    }
+  }
+  panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+  panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+  </script>
 
 </body>
 </html>
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..1c6084788c 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,12 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+const cities = [];
+
+const prom = fetch(endpoint);
+console.log(prom);
+
+
 </script>
   </body>
 </html>
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..9cff733498 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -22,13 +22,55 @@ <h2>LOCAL TAPAS</h2>
     <form class="add-items">
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
+      <input type="button" value="- Remove Item">
     </form>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+
+function addItem(e) {
+  e.preventDefault();
+  const text = (this.querySelector('[name=item]')).value; //`this` is the form tag
+  const item = {
+    text,
+    done: false
+  };
+  items.push(item); //pushing item into the above items[]
+  populateList(items,itemsList);
+  localStorage.setItem('items', JSON.stringify(items));
+  this.reset();//resets the form 
+}
+
+function populateList(plates = [], platesList) {
+  platesList.innerHTML = plates.map((plate, i) => {
+    return `
+      <li>
+        <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''}/>
+        <label for="item${i}">${plate.text}</label>
+      </li>
+    `;
+  }).join('');
+}
+
+function toggleDone(e) {
+  if (!e.target.matches('input')) return;//skip this unless it's an input
+  const el = e.target;
+  const index = el.dataset.index;
+  items[index].done = !items[index].done;
+  localStorage.setItem('items', JSON.stringify(items));
+  populateList(items, itemsList);
+  }
+}
+
+
+  addItems.addEventListener('submit', addItem);//submit because a person might click/press enter
+  itemsList.addEventListener('click', toggleDone);
+  populateList(items, itemsList);
+
+
 
 </script>