lesson wesbos#15 done

xchinaskix · xchinaskix · commit d08d7ae0ed72 · 2018-12-24T19:55:25.000+02:00
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
@@ -7,6 +7,20 @@
 </head>
 <body>
 <script>
+  const secret = 'remars';
+  const ev = [];
+
+  document.addEventListener('keyup', (e) => {
+    ev.push(e.key);
+    console.log(ev);
+    ev.splice(-secret.length -1, ev.length - secret.length);
+
+    if (ev.join('').includes(secret)) {
+      console.log('ding dong');
+      cornify_add();
+    }
+
+  })
 </script>
 </body>
 </html>
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
@@ -58,6 +58,26 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const slideImages = document.querySelectorAll('.slide-in');
+
+    function scrolled(e) {
+      slideImages.forEach(image => {
+        const slideInAt = (window.scrollY + window.innerHeight) - image.height / 2;
+        const imageBottom = image.offsetTop + image.height;
+        const isHalfShow =  slideInAt > image.offsetTop;
+        const isNotScrolledPast = window.scrollY < imageBottom;
+        if (isHalfShow && isNotScrolledPast) {
+          image.classList.add('active');
+        } else {
+          image.classList.remove('active');
+        }
+        
+      });
+      
+    } 
+
+    window.addEventListener('scroll', debounce(scrolled));
+
   </script>
 
   <style>
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
@@ -14,6 +14,14 @@
 
     // and we want to make a copy of it.
 
+    const play1 = players.slice();
+    const play2 = [].concat(players);
+    const play3 = Array.from(players);
+    const play4 = [...players];
+
+    console.log(players, play1, play2, play3, play4);
+    
+
     // You might think we can just do something like this:
 
     // however what happens when we update that array?
@@ -43,6 +51,13 @@
     };
 
     // and think we make a copy:
+    console.clear();
+    const per = Object.assign({}, person);
+    const per1 = {...person};
+    const per2 = JSON.parse(JSON.stringify(person));
+
+    console.log(per, per1, per2, person);
+    
 
     // how do we take a copy instead?
 
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
@@ -28,7 +28,43 @@ <h2>LOCAL TAPAS</h2>
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+
+  function addToList(e) {
+    e.preventDefault();
+    const text = (this.querySelector('[name=item]')).value;
+    const item = {text, chosen: false};
+    items.push(item);
+    // console.log(items);
+    reRenderList(items, itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+    this.reset();
+  }
+
+  function reRenderList(itemList = [], listOfItems) {
+    listOfItems.innerHTML = itemList.map((item, i) => {
+      return `
+        <li>
+          <input type="checkbox" data-index=${i} id="item${i}" ${item.chosen ? 'checked' : ''} />
+          <label for="item${i}">${item.text}</label>
+        </li>
+      `;
+    }).join('');
+  }
+
+  function doCheck(e) {
+    if (!e.target.matches('input')) return;
+    const index = e.target.dataset.index;
+    items[index].chosen = !items[index].chosen;
+    localStorage.setItem('items', JSON.stringify(items));
+    reRenderList(items, itemsList);
+    console.log(index);
+
+  }
+
+  addItems.addEventListener('submit', addToList);
+  itemsList.addEventListener('click', doCheck);
+  reRenderList(items, itemsList);
 
 </script>
 
diff --git a/15 - LocalStorage/square-regular.svg b/15 - LocalStorage/square-regular.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" data-prefix="far" data-icon="square" class="svg-inline--fa fa-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"></path></svg>
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
@@ -8,6 +8,7 @@
       justify-content: center;
       align-items: center;
       text-align: center;
+      /* font-family: Segoe UI Symbol, Symbola; */
       font-family: Futura,"Trebuchet MS",Arial,sans-serif;
     }
 
@@ -61,12 +62,13 @@
     }
 
     .plates input + label:before {
-      content: '⬜️';
+      /* background-image: url('./square-regular.svg'); */
+      content: '⦵';
       margin-right: 10px;
     }
 
     .plates input:checked + label:before {
-      content: '🌮';
+      content: '🍥';
     }
 
     .add-items {

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`	`justify-content: center;`
`9`	`9`	`align-items: center;`
`10`	`10`	`text-align: center;`
	`11`	`+ /* font-family: Segoe UI Symbol, Symbola; */`
`11`	`12`	`font-family: Futura,"Trebuchet MS",Arial,sans-serif;`
`12`	`13`	`}`
`13`	`14`
`@@ -61,12 +62,13 @@`
`61`	`62`	`}`
`62`	`63`
`63`	`64`	`.plates input + label:before {`
`64`		`- content: '⬜️';`
	`65`	`+ /* background-image: url('./square-regular.svg'); */`
	`66`	`+ content: '⦵';`
`65`	`67`	`margin-right: 10px;`
`66`	`68`	`}`
`67`	`69`
`68`	`70`	`.plates input:checked + label:before {`
`69`		`- content: '🌮';`
	`71`	`+ content: '🍥';`
`70`	`72`	`}`
`71`	`73`
`72`	`74`	`.add-items {`