entrega js challenge platzi

PULL_REQUEST_TEMPLATE.md

@@ -1,15 +1,16 @@
 ## DESCRIPTION
 
-Solución al reto:
+Solución al reto: Ethereum Developer Program
 
-Nombre:
+Nombre: omar salas
 Usuario Platzi:
-Correo Electronico:
+Correo Electronico: [email protected]
 
 ## Reto:
 
-- [ ] Primer problema
-- [ ] Segundo problema
-- [ ] Tercer problema
-- [ ] Cuarto Problema
-- [ ] Quinto Problema
+- [x] Primer problema
+- [x] Segundo problema
+- [x] Tercer problema
+- [x] Cuarto Problema
+- [x] Quinto Problema
+- [x] bonus => https://oemsalas.github.io/js-challenge/public/index.html

public/index.html

@@ -5,7 +5,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title></title>
+  <title>PlatziStore</title>
+  <meta name="keywords" content="PlatziStore, Comercio Electrónico">
+  <meta name="description" content="Tienda Online">
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 
@@ -19,4 +21,4 @@ <h1>PlatziStore</h1>
 
 <script type="text/javascript" src="../src/index.js"></script>
 
-</html>
+</html>

src/index.js

@@ -2,30 +2,56 @@ const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
 
-const getData = api => {
-  fetch(api)
-    .then(response => response.json())
-    .then(response => {
-      let products = response;
-      let output = products.map(product => {
-        // template
-      });
-      let newItem = document.createElement('section');
-      newItem.classList.add('Item');
-      newItem.innerHTML = output;
-      $app.appendChild(newItem);
-    })
-    .catch(error => console.log(error));
+const INIT_PAGE = 5;
+const MAX_PAGE_SIZE = 10;
+
+localStorage.clear();
+
+localStorage.setItem('pagination', INIT_PAGE);
+
+const getData = async (url_api) => {
+  try {
+    const response = await fetch(`${url_api}?offset=${localStorage.getItem('pagination')}&limit=${MAX_PAGE_SIZE}`);
+    const products = await response.json();
+    let productRender = products.map((product) => `
+      <article class="Card">
+        <img src="${product.images[0]}"/>
+        <h2>
+          ${product.title}
+          <small>${product.price}</small>
+        </h2>
+      </article>
+    `);
+    let newItem = document.createElement('section');
+    newItem.classList.add('Items');
+    newItem.innerHTML = productRender.join('');
+    $app.appendChild(newItem);
+  } catch (err) { console.log(err); }
 }
 
-const loadData = () => {
-  getData(API);
+const loadData = async () => {
+  await getData(API);
 }
 
-const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
+const intersectionObserver = new IntersectionObserver((entries, self) => {
+  const currentPage = +localStorage.getItem('pagination');
+
+  if (entries[0].isIntersecting && window.scrollY!==0) {
+    const nextPage = currentPage + MAX_PAGE_SIZE;
+    localStorage.setItem('pagination', nextPage);
+    loadData();
+  } 
+  if (currentPage>200) {
+    self.unobserve($observe);
+    let newItem = document.createElement('section');
+    newItem.classList.add('Empty');
+    newItem.innerHTML = `<h1>Todos los productos Obtenidos</h1>`;
+    $app.appendChild(newItem);
+  }
 }, {
   rootMargin: '0px 0px 100% 0px',
 });
 
+loadData();
+
 intersectionObserver.observe($observe);