Retos solucionados: Cristian Buenaventura

PULL_REQUEST_TEMPLATE.md

@@ -2,9 +2,9 @@
 
 Solución al reto:
 
-Nombre:
-Usuario Platzi:
-Correo Electronico:
+Nombre:Cristian Buenaventura
+Usuario Platzi:Cristian Buenaventura
+Correo Electronico:cristianbuenaventura15@gmail.com
 
 ## Reto:
 

public/index.html

@@ -5,7 +5,11 @@
   <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>
+  <meta
+      name="description"
+      content="Web site that show the information of Platzi FakeApi"
+    />
+  <title>PlatziStore</title>
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 

src/index.js

@@ -2,30 +2,61 @@ 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));
+
+localStorage.removeItem('pagination');  
+const limit = 10;
+
+const getData = async api => {
+  const pagination = localStorage.getItem('pagination') || 1;
+  const offset = pagination * limit - 6;
+  let output;
+  try {
+    const getData = await fetch(`${api}?offset=${offset}&limit=${limit}`);
+    const response = await getData.json();
+
+    if (response.length) {
+      output = response.map(product => {
+        return `
+            <article class="Card">
+              <img src="${product.images[0]}" />
+              <h2>
+                ${product.title}
+                <small>$ ${product.price}</small>
+              </h2>
+            </article>
+          `;
+      })
+    } else {
+      intersectionObserver.unobserve($observe);
+      output = `
+        <h2>Todos los productos Obtenidos</h2>
+      `
+    };
+
+    let newItem = document.createElement('section');
+    newItem.classList.add('Item');
+    newItem.innerHTML = output;
+    $app.appendChild(newItem);
+  } catch (error) {
+    consol.log(error);
+  }    
+  localStorage.setItem('pagination', (parseInt(pagination) + 1));
 }
 
 const loadData = () => {
   getData(API);
 }
 
+
 const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      loadData();
+    }
+  })
 }, {
   rootMargin: '0px 0px 100% 0px',
 });
 
 intersectionObserver.observe($observe);
+