platzi · agustinacassi · Jun 14, 2022 · Jun 14, 2022 · Jun 14, 2022
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -1,15 +1,17 @@
 ## DESCRIPTION
 
-Solución al reto:
+Solución al reto: 
 
-Nombre:
-Usuario Platzi:
-Correo Electronico:
+Nombre: María Agustina Cassi
+Usuario Platzi: tinicassi
+Correo Electronico: [email protected]
 
 ## Reto:
 
-- [ ] Primer problema
-- [ ] Segundo problema
-- [ ] Tercer problema
-- [ ] Cuarto Problema
-- [ ] Quinto Problema
+- [💚] Primer problema
+- [💚] Segundo problema
+- [💚] Tercer problema
+- [💚] Cuarto Problema
+- [💚] Quinto Problema
+
+Gracias por la oportunidad Platzi, los quiero!!!! 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "live-server --open=public --entry-file=index.html",
-    "e2e": "cypress open"
+    "e2e": "cypress open",
   },
   "repository": {
     "type": "git",

diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,8 @@
 
 <body>
   <div class="Main">
-    <h1>PlatziStore</h1>
+    <h1>Platzi Store 💚</h1>
+    <p>Somos un comercio en línea con una gran cantidad de productos a comercializar. #NuncaParesDeAprender</p>
     <div id="app"></div>
     <div id="observe"></div>
   </div>

diff --git a/public/styles.css b/public/styles.css
@@ -32,13 +32,13 @@ body {
   animation-name: fade;
 }
 
-.Card img {
+.Card-img {
   width: 100%;
   height: auto;
   border-radius: 5px 5px 0 0;
 }
 
-.Card h2 {
+.Card-h2 {
   font-size: 18px;
   font-weight: 300;
   padding: 5px 10px;

diff --git a/src/index.js b/src/index.js
@@ -1,31 +1,65 @@
-const $app = document.getElementById('app');
-const $observe = document.getElementById('observe');
-const API = 'https://api.escuelajs.co/api/v1/products';
+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 => {
+const limit = 10;
+
+window.addEventListener("beforeunload", ()=> {
+  localStorage.removeItem("pagination")
+})
+
+const getData = (api, offset, limit) => {
+  const endpoint = `${API}?offset=${offset}&limit=${limit}`;
+  fetch(endpoint)
+    .then((response) => response.json())
+    .then((response) => {
       let products = response;
+      if(products.length > 0){
       let output = products.map(product => {
-        // template
-      });
-      let newItem = document.createElement('section');
-      newItem.classList.add('Item');
-      newItem.innerHTML = output;
+        return `<article class="Card">
+        <img class="Card-img" src=${product.images[0]} alt=${product.title}/>
+        <h2 class="Card-h2">
+          ${product.title}
+          <small>$ ${product.price}</small>
+        </h2>
+      </article>`;
+      }); 
+      let newItem = document.createElement("section");
+      newItem.classList.add("Items"); 
+      newItem.innerHTML = output.join("");
       $app.appendChild(newItem);
+    }else{
+      let finalMessage = document.createElement("p")
+      finalMessage.innerText = "Todos los productos obtenidos 📦"
+      $app.appendChild(finalMessage)
+      intersectionObserver.unobserve($observe)
+    }
     })
-    .catch(error => console.log(error));
-}
+    .catch((error) => console.error(error));
+};
 
-const loadData = () => {
-  getData(API);
-}
+const loadData = async () => {
+  if(!localStorage.getItem("pagination")){
+    let pagination = await localStorage.setItem("pagination", 5)
+    let obtainData = await getData(API, localStorage.getItem("pagination"), limit)
+  }else{
+    let offset = await parseInt(localStorage.getItem("pagination")) + limit;
+    let changeStorage = await localStorage.setItem("pagination", offset)
+    let obtainData = await getData(API, localStorage.getItem("pagination"), limit)
+  }
+};
 
-const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
-}, {
-  rootMargin: '0px 0px 100% 0px',
-});
+const intersectionObserver = new IntersectionObserver(
+  (entries) => {
+    entries.forEach(entry => {
+      if(entry.intersectionRatio > 0){
+        loadData()
+      } 
+    })
+  },
+  {
+    rootMargin: "0px 0px 100% 0px",
+  }
+);
 
 intersectionObserver.observe($observe);