platzi · ricardoher12 · Jun 12, 2022 · Jun 12, 2022 · Jun 12, 2022 · Jun 12, 2022
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -2,14 +2,14 @@
 
 Solución al reto:
 
-Nombre:
-Usuario Platzi:
-Correo Electronico:
+Nombre: Ricardo Hernandez
+Usuario Platzi: ricardo.hernandezr2
+Correo Electronico: ricardo.hernandezr2@gmai.com
 
 ## 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 link to app: https://ricardoappjs.netlify.app/public/
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -5,8 +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="Pagina donde econtraras todos los articulos de la Platzi Store">
+  <title>Platzi Store</title>
   <link type="text/css" href="styles.css" rel="stylesheet">
+  <meta name="keywords" content="platzi,store,js"/>  
+  <meta name="author" content="Ricardo Hernandez" />
 </head>
 
 <body>

diff --git a/src/index.js b/src/index.js
@@ -1,31 +1,68 @@
 const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
+const LIMIT = 10;
+const PAGINATION = "pagination";
+const INITIAL_PAGINATION = 5;
+const LAST_ID = 200;
+let isFinished = false;
 
-const getData = api => {
-  fetch(api)
+localStorage.clear();
+
+const getPagination = () => {
+  return localStorage.getItem(PAGINATION) || INITIAL_PAGINATION;
+}
+
+const getData = async (api, pagination) => {
+  const url = `${api}?offset=${pagination}&limit=${LIMIT}`;
+  fetch(url)
     .then(response => response.json())
     .then(response => {
       let products = response;
-      let output = products.map(product => {
-        // template
-      });
+      let output = products.reduce((acc, product) => {
+        if(product.id === LAST_ID) {
+          isFinished = true;
+        }
+        return (acc + 
+        `<article class="Card">
+        <img src="${product.images[0]}" alt="${product.description}" />
+        <h2>
+         ${product.title}
+          <small>$ ${product.price}</small>
+        </h2>
+      </article>`);
+      }, "");
       let newItem = document.createElement('section');
       newItem.classList.add('Item');
       newItem.innerHTML = output;
       $app.appendChild(newItem);
+      localStorage.setItem(PAGINATION, parseInt(pagination) + LIMIT);
     })
     .catch(error => console.log(error));
 }
 
-const loadData = () => {
-  getData(API);
+const  loadData = async () => {
+  const pagination = getPagination();
+  await getData(API, pagination);
 }
 
 const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
+
+  if(entries[0].isIntersecting) {
+      if(isFinished) {
+      let newItem = document.createElement('section');
+      newItem.classList.add('message');
+      newItem.innerHTML = 'Todos Los Productos Obtenidos';
+      intersectionObserver.unobserve($observe);
+      $app.appendChild(newItem);
+      intersectionObserver.unobserve($observe);
+      } else {
+        loadData();
+      }
+    } 
 }, {
   rootMargin: '0px 0px 100% 0px',
+  threshold: 1,
 });
 
 intersectionObserver.observe($observe);