diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..e54ad944
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index ad46b308..b84d4365 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,3 +59,8 @@ typings/
# next.js build output
.next
+
+#mac
+.DS_Store
+
+
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
index ddfff263..3218aa46 100644
--- a/PULL_REQUEST_TEMPLATE.md
+++ b/PULL_REQUEST_TEMPLATE.md
@@ -2,14 +2,14 @@
Solución al reto:
-Nombre:
-Usuario Platzi:
-Correo Electronico:
+Nombre: Eduardo
+Usuario Platzi: masterarias
+Correo Electronico: e@masterarias.com
## Reto:
-- [ ] Primer problema
-- [ ] Segundo problema
-- [ ] Tercer problema
-- [ ] Cuarto Problema
-- [ ] Quinto Problema
+- [✅] Primer problema
+- [✅] Segundo problema
+- [✅] Tercer problema
+- [✅] Cuarto Problema
+- [✅] Quinto Problema -> https://masterarias.github.io/
diff --git a/cypress/e2e/test.cy.js b/cypress/e2e/test.cy.js
index 6c7dfd4e..18e648b6 100644
--- a/cypress/e2e/test.cy.js
+++ b/cypress/e2e/test.cy.js
@@ -13,17 +13,17 @@ describe("PlatziStore Tests", () => {
});
it("Obtener los primeros 10 Productos", () => {
- cy.get('*[class^="Items"]').find('article').should('have.length', 10)
+ cy.get('*[class^="Item"]').find('article').should('have.length', 10)
});
it('Desplácese hacia abajo y renderice nuevos productos', () => {
cy.scrollTo('bottom')
- cy.get('*[class^="Items"]').should('have.length', 2);
+ cy.get('*[class^="Item"]').should('have.length', 2);
});
it('Comprobar el nombre del Producto', () => {
cy.scrollTo('bottom');
- cy.get('*[class^="Items"]').find('article').find('h2').eq(0).should('exist');
+ cy.get('*[class^="Item"]').find('article').find('h2').eq(0).should('exist');
});
});
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 5f8fbe0d..12a3a894 100755
--- a/public/index.html
+++ b/public/index.html
@@ -5,8 +5,9 @@
-
+ PlatziStore
+
diff --git a/src/index.js b/src/index.js
index eb2631c2..d1688a04 100755
--- a/src/index.js
+++ b/src/index.js
@@ -2,30 +2,60 @@ 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));
+localStorage.clear('pagination');
+
+const getData = async api => {
+ let current = parseInt(localStorage.getItem('pagination'));
+ if (current > 200) {
+ $observe.innerHTML = "Todos los productos Obtenidos
";
+ intersectionObserver.unobserve($observe);
+ return;
+ }
+ const getData = await fetch(`${api}?offset=${current}&limit=10`);
+ const response = await getData.json();
+ let products = response;
+ let output = products.map(product => {
+ return `
+ 
+
+ ${product.title}
+ $ ${product.price}
+
+ `;
+ }).join('');
+ let newItem = document.createElement('section');
+ newItem.classList.add('Item');
+ newItem.innerHTML = output;
+ $app.appendChild(newItem);
}
const loadData = () => {
getData(API);
}
+
const intersectionObserver = new IntersectionObserver(entries => {
- // logic...
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const check = localStorage.getItem("pagination");
+ if (!check) {
+ localStorage.setItem("pagination", 5);
+ }
+ else
+ {
+ localStorage.setItem("pagination", parseInt(check) + 10);
+ }
+
+
+
+ loadData();
+ }
+ })
}, {
rootMargin: '0px 0px 100% 0px',
});
intersectionObserver.observe($observe);
+
+
+