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 @@
-
+
+
+ PlatziStore
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 `
+ ${item.id} - ${item.title} $${item.price}
+ `;
+ });
+};
+
+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);