challenge solved

PULL_REQUEST_TEMPLATE.md

@@ -2,14 +2,15 @@
 
 Solución al reto:
 
-Nombre:
-Usuario Platzi:
-Correo Electronico:
+Nombre: Adrian Perez    
+Usuario Platzi: adrianjose
+Correo Electronico: [email protected]
 
+GitHub Page: https://adrianjp2.github.io/js-challenge/public/
 ## Reto:
 
-- [ ] Primer problema
-- [ ] Segundo problema
-- [ ] Tercer problema
-- [ ] Cuarto Problema
-- [ ] Quinto Problema
+- [*] Primer problema
+- [*] Segundo problema
+- [*] Tercer problema
+- [*] Cuarto Problema
+- [*] Quinto Problema

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="..."/>
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 

src/index.js

@@ -1,31 +1,58 @@
-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 => {
+const getData = (api) => {
+  let offset = null;
+  if (localStorage.getItem("offset")) {
+    offset = localStorage.getItem("offset");
+  } else {
+    offset = 5;
+  }
+  api += "?offset=" + offset + "&limit=10";
+
   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));
-}
+    .then((response) => response.json())
+    .then((response) => {
+      console.log(response);
+        let products = response;
+        let output = products.map((product) => {
+          let template = '<article class="Card"> <img src="'+product.images[0]+'" /> <h2> '+product.description+' <small>$ '+product.price+'</small> </h2>    </article>';
+          return template;
+        });
+        let newItem = document.createElement("section");
+        newItem.classList.add("Item");
+        newItem.innerHTML = output;
+        $app.appendChild(newItem);
+        if(response.length == 0){
+          intersectionObserver.disconnect();
+          let message = document.createElement("section");
+          message.innerHTML = 'Todos los productos Obtenidos';
+          $app.appendChild(message);
+        } else {
+          offset = response.slice(-1)[0].id + 1;
+          localStorage.setItem("offset", offset);
+        }
+      }).catch((error) => console.log(error));
+};
 
-const loadData = () => {
-  getData(API);
-}
+const loadData = async () => {
+  localStorage.removeItem('offset');
+  await getData(API);
+};
 
 const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      getData(API)
+    }
+  });
 }, {
-  rootMargin: '0px 0px 100% 0px',
+  root: null,
+  rootMargin: "0px",
+  threshold: 0.25
 });
 
-intersectionObserver.observe($observe);
+window.addEventListener("load", function () {
+  intersectionObserver.observe($observe);
+});