platzi · Jhogakuse · Jun 10, 2022 · Jun 10, 2022 · Jun 10, 2022 · Jun 10, 2022
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-cayman
diff --git a/public/images/free-store-icon-2017-thumb.png b/public/images/free-store-icon-2017-thumb.png
diff --git a/public/index.html b/public/index.html
@@ -5,15 +5,19 @@
   <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>
+  <link rel="icon" type="image/x-icon" href="images/free-store-icon-2017-thumb.png">
+  <title>Platzi Store</title>
   <link type="text/css" href="styles.css" rel="stylesheet">
+  <meta name="description" content="A challenge from platzi">
+  <meta name="keywords" content="platzi, store, challenge, students, retos, estudiantes, tienda">
 </head>
 
 <body>
   <div class="Main">
-    <h1>PlatziStore</h1>
+    <h1>Platzi Store</h1>
     <div id="app"></div>
     <div id="observe"></div>
+    <div id="lastMsg" class="hide">Todos los productos Obtenidos</div>
   </div>
 </body>
 

diff --git a/public/styles.css b/public/styles.css
@@ -46,6 +46,18 @@ body {
   justify-content: space-between;
 }
 
+#lastMsg {
+  text-align: center;
+}
+
+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
 @keyframes fade {
   from {
     opacity: 0;

diff --git a/src/index.js b/src/index.js
@@ -1,31 +1,119 @@
 const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
+const $lastMsg = document.getElementById('lastMsg');
 
-const getData = api => {
-  fetch(api)
+const MAX_PRODUCTS_LIST = 200;
+const MAX_NUM_ITEMS = 10;
+const START_ITEM = 1;
+let page = 1;
+let marginTop = 100;
+let loadMoreProducts = false;
+
+/**
+ * Returns the index of the first product according to the page number
+ * @returns A number
+ */
+const startOfQuantity = () => {
+  if (page < 2) {
+    return START_ITEM - 1;
+  }
+  else {
+    return MAX_NUM_ITEMS * (page - 1) + (START_ITEM - 1);
+  }
+} 
+
+/**
+ * Returns the index of the last product according to the page number
+ * @returns 
+ */
+const endOfQuantity = () => {
+  return MAX_NUM_ITEMS * page + (START_ITEM - 1);
+}
+
+const itemCard = (item) => {
+  return '<article class="Card">' +
+  '<img src="' + item.images[0] + '" alt="' + item.description + '"/>' +
+    '<h2>' + item.title +
+      '<small>$ ' + item.price + '</small>' +
+    '</h2>' + 
+  '</article>';
+}
+
+const getData = async api => {
+  fetch(api + `?offset=${startOfQuantity()}&limit=${MAX_NUM_ITEMS}`)
     .then(response => response.json())
     .then(response => {
       let products = response;
       let output = products.map(product => {
-        // template
-      });
+        return product;
+      })
+      .filter( x => x !== undefined );
+      let elements = Object.values(output)
+      .map((value) => {
+        return itemCard(value);
+      })
+      .join('');
+
       let newItem = document.createElement('section');
-      newItem.classList.add('Item');
-      newItem.innerHTML = output;
+      newItem.classList.add('Items');
+      newItem.innerHTML = elements;
       $app.appendChild(newItem);
+
+      loadMoreProducts = true;
+      page++;
     })
     .catch(error => console.log(error));
 }
 
-const loadData = () => {
-  getData(API);
+const loadData = async () => {
+  await getData(API);
 }
 
 const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
+  entries.forEach(entry => {
+    if (entry.intersectionRatio > 0 && endOfQuantity() <= MAX_PRODUCTS_LIST) {
+      if (loadMoreProducts) {
+        loadMoreProducts = false;
+        loadData();
+      } 
+    } else {
+      if (endOfQuantity() > MAX_PRODUCTS_LIST) {
+        intersectionObserver.unobserve(entry.target);
+        finalMsg();
+      }
+    }
+  });
 }, {
-  rootMargin: '0px 0px 100% 0px',
+  rootMargin: '0px 0px 0px 0px',
 });
 
-intersectionObserver.observe($observe);
+
+// const getStorage = () => {
+//   let pagination = parseInt(localStorage.getItem('pagination'));
+//   if (pagination === null) {
+//     localStorage.setItem('pagination', 1);
+//   } else {
+//     if (MAX_PRODUCTS_LIST < MAX_NUM_ITEMS * pagination + (START_ITEM - 1)) {
+//       pagination = 0;
+//     }
+//     let nextPage = ++pagination; 
+//     localStorage.setItem('pagination', nextPage);
+//     page = nextPage;
+//   }
+// }
+
+const finalMsg = () => {
+  $lastMsg.classList.add('show');
+}
+
+(async function() {
+  // getStorage();
+  await loadData()
+  .then(
+    () => {
+      intersectionObserver.observe($observe);
+    }
+  );
+
+})();