Proyecto terminado

public/index.html

@@ -5,7 +5,8 @@
   <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="description" content="Esta es la última guía de productos disponibles en Platzi." />
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 

src/index.js

@@ -2,14 +2,30 @@ const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
 
+
+let ofsset = 5;
+const LIMIT = 10;
+window.localStorage.setItem('pagination', 0);
+
 const getData = api => {
   fetch(api)
     .then(response => response.json())
     .then(response => {
       let products = response;
-      let output = products.map(product => {
-        // template
-      });
+
+      if (products.length == 0) {
+        alert("Todos los productos Obtenidos");
+        intersectionObserver.disconnect();
+      }
+
+      let output = products.map((product) => {
+        return (`
+                  <article class="Card">
+                    <img src="${product.category.image}"  />
+                    <h2>Producto <small>${product.price}</small></h2>
+                  </article>
+                `)
+      }).join('');
       let newItem = document.createElement('section');
       newItem.classList.add('Item');
       newItem.innerHTML = output;
@@ -18,12 +34,18 @@ const getData = api => {
     .catch(error => console.log(error));
 }
 
-const loadData = () => {
-  getData(API);
+const loadData = async () => {
+  offset = (LIMIT * parseInt(window.localStorage.getItem('pagination'))) - 5;
+  await getData(`${API}?offset=${offset}&limit=${LIMIT}`);
 }
 
 const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
+  entries.forEach(entry => {
+    if (entry.intersectionRatio > 0) {
+      window.localStorage.setItem('pagination', parseInt(window.localStorage.getItem('pagination')) + 1);
+      loadData();
+    }
+  });
 }, {
   rootMargin: '0px 0px 100% 0px',
 });