From 42a3858ab56d4b0eb9664c6bd9c628ac01ea0a2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Mart=C3=ADnez=20Navarro?=
 <jose.martinez1@softwareone.com>
Date: Sat, 11 Jun 2022 15:54:02 -0500
Subject: [PATCH] Reto finalizado

---
 public/index.html |  4 ++-
 src/index.js      | 66 +++++++++++++++++++++++++++++++++--------------
 2 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/public/index.html b/public/index.html
index 5f8fbe0d..d0167fe1 100755
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,9 @@
   <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="descripcion" content="Ethereum en Platzi">
+  <meta name="author" content="Jose Luis Martinez">
+  <title>PlatziStore</title>
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 
diff --git a/src/index.js b/src/index.js
index eb2631c2..6ea680be 100755
--- a/src/index.js
+++ b/src/index.js
@@ -2,30 +2,56 @@ 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 => {
-      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));
-}
 
-const loadData = () => {
-  getData(API);
+const max = 10;
+let start = 5;
+let intersect = 1;
+const mensaje = "Todos los productos Obtenidos."
+const limit = 200;
+const addElement = (items) => {
+  return items.map((item) => {
+    return `<article class= "Card"><img src=${item.images[0]}/>
+              <h2>${item.id} - ${item.title} <small>$${item.price}</small></h2>
+              </article>`;
+  });
+};
+
+const getData = async (api) => {
+const response = await fetch(api);
+const data = await response.json();
+
+localStorage.removeItem("pagination");
+try{
+  let output = addElement(data);
+  let newItem = document.createElement("section");
+  newItem.classList.add("Items");
+  newItem.innerHTML = output.join("");
+  $app.append(newItem);
+
+  localStorage.setItem("pagination", parseInt(start));
+  start += 10; 
+}
+catch{
+  (error => console.log(error));
 }
+};
+
+const loadData = async () => {
+  let pagination = `?start=${start}&max=${max}`;
+  getData(API + pagination);
+};
 
 const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
-}, {
-  rootMargin: '0px 0px 100% 0px',
+// logic...
+if (entries[0].isIntersecting){
+loadData();  
+}else if (limit){
+document.getElementById(mensaje);
+$observe.innerHTML = mensaje;    
+intersectionObserver.disconnect();
+}}, 
+{
+rootMargin: '0px 0px 100% 0px',
 });
 
 intersectionObserver.observe($observe);