diff --git a/package-lock.json b/package-lock.json
index a9762c5a..0091cca1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,18 @@
{
- "name": "escuelajs-reto-05",
+ "name": "js-challenge",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
- "name": "escuelajs-reto-05",
+ "name": "js-challenge",
"version": "1.0.0",
- "license": "ISC",
+ "license": "MIT",
"dependencies": {
"cypress": "10.0.1"
},
"devDependencies": {
- "live-server": "^1.2.2"
+ "live-server": "1.2.2"
}
},
"node_modules/@colors/colors": {
diff --git a/public/index.html b/public/index.html
index 5f8fbe0d..ca65d044 100755
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,8 @@
-
+ PlatziStore
+
diff --git a/src/index.js b/src/index.js
index eb2631c2..d595e78a 100755
--- a/src/index.js
+++ b/src/index.js
@@ -2,14 +2,30 @@ const $app = document.getElementById('app');
const $observe = document.getElementById('observe');
const API = 'https://api.escuelajs.co/api/v1/products';
+
+let ofsset = 5;
+const LIMIT = 10;
+window.localStorage.setItem('pagination', 0);
+
const getData = api => {
fetch(api)
.then(response => response.json())
.then(response => {
let products = response;
- let output = products.map(product => {
- // template
- });
+
+ if (products.length == 0) {
+ alert("Todos los productos Obtenidos");
+ intersectionObserver.disconnect();
+ }
+
+ let output = products.map((product) => {
+ return (`
+
+
+ Producto ${product.price}
+
+ `)
+ }).join('');
let newItem = document.createElement('section');
newItem.classList.add('Item');
newItem.innerHTML = output;
@@ -18,12 +34,18 @@ const getData = api => {
.catch(error => console.log(error));
}
-const loadData = () => {
- getData(API);
+const loadData = async () => {
+ offset = (LIMIT * parseInt(window.localStorage.getItem('pagination'))) - 5;
+ await getData(`${API}?offset=${offset}&limit=${LIMIT}`);
}
const intersectionObserver = new IntersectionObserver(entries => {
- // logic...
+ entries.forEach(entry => {
+ if (entry.intersectionRatio > 0) {
+ window.localStorage.setItem('pagination', parseInt(window.localStorage.getItem('pagination')) + 1);
+ loadData();
+ }
+ });
}, {
rootMargin: '0px 0px 100% 0px',
});