wesbos#15

brandonjunus · brandonjunus · commit 76b50dac121d · 2019-01-11T12:05:34.000-08:00
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
@@ -60,14 +60,18 @@ <h1>Slide in on Scroll</h1>
 
   let last_known_scroll_position = window.scrollY;
   let imgs = document.querySelectorAll('img');
-  window.addEventListener('scroll', () => {
+  let detectScroll = () => {
     last_known_scroll_position = window.scrollY;
+    console.log(last_known_scroll_position);
     for (let i = 0; i < imgs.length; i++) {
       if (last_known_scroll_position >= imgs[i].y) {
         imgs[i].classList.add('active');
       }
     }
-  })
+  }
+  let detectScroll2 = debounce(detectScroll);
+  
+  window.addEventListener('scroll', detectScroll2);
   </script>
 
   <style>
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
@@ -28,7 +28,40 @@ <h2>LOCAL TAPAS</h2>
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+
+  itemsList.addEventListener('click', (e) => {
+    console.dir(e.target);
+    if (e.target.matches('input')) {
+      alert('hello');
+    }
+  })
+
+  addItems.addEventListener('submit', (e) => {
+    e.preventDefault();
+    let submitText = document.querySelector('.add-items input[type="text"]');
+    let items = localStorage.getItem('items');
+    if (!items) {
+      items = []
+    } else {
+      items = JSON.parse(items);
+    }
+    console.log('items', items);
+    items.push(submitText.value);
+    localStorage.setItem('items', JSON.stringify(items));
+  })
+  let tapas = localStorage.getItem('items')
+  if (tapas) {
+    tapas = JSON.parse(tapas);
+    itemsList.innerHTML = '';
+    console.log(tapas);
+    for (let i = 0; i < tapas.length; i++){
+      itemsList.innerHTML += `
+        <li>
+          <input type="checkbox" data-index=${i} id="item${i}" ${tapas[i].done ? 'checked' : ''} />
+          <label for="item${i}">${tapas[i]}</label>
+        </li>`
+    }
+  }
 
 </script>
 
