diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index ddfff263..84a49189 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -1,15 +1,16 @@ ## DESCRIPTION -Solución al reto: +Solución al reto: Ethereum Developer Program -Nombre: +Nombre: omar salas Usuario Platzi: -Correo Electronico: +Correo Electronico: oemsalas@gmail.com ## Reto: -- [ ] Primer problema -- [ ] Segundo problema -- [ ] Tercer problema -- [ ] Cuarto Problema -- [ ] Quinto Problema +- [x] Primer problema +- [x] Segundo problema +- [x] Tercer problema +- [x] Cuarto Problema +- [x] Quinto Problema +- [x] bonus => https://oemsalas.github.io/js-challenge/public/index.html \ No newline at end of file diff --git a/public/index.html b/public/index.html index 5f8fbe0d..7d4fe7fd 100755 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,9 @@ - + PlatziStore + + @@ -19,4 +21,4 @@

PlatziStore

- \ No newline at end of file + diff --git a/src/index.js b/src/index.js index eb2631c2..596dbc78 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 INIT_PAGE = 5; +const MAX_PAGE_SIZE = 10; + +localStorage.clear(); + +localStorage.setItem('pagination', INIT_PAGE); + +const getData = async (url_api) => { + try { + const response = await fetch(`${url_api}?offset=${localStorage.getItem('pagination')}&limit=${MAX_PAGE_SIZE}`); + const products = await response.json(); + let productRender = products.map((product) => ` +
+ +

+ ${product.title} + ${product.price} +

+
+ `); + let newItem = document.createElement('section'); + newItem.classList.add('Items'); + newItem.innerHTML = productRender.join(''); + $app.appendChild(newItem); + } catch (err) { console.log(err); } } -const loadData = () => { - getData(API); +const loadData = async () => { + await getData(API); } -const intersectionObserver = new IntersectionObserver(entries => { - // logic... +const intersectionObserver = new IntersectionObserver((entries, self) => { + const currentPage = +localStorage.getItem('pagination'); + + if (entries[0].isIntersecting && window.scrollY!==0) { + const nextPage = currentPage + MAX_PAGE_SIZE; + localStorage.setItem('pagination', nextPage); + loadData(); + } + if (currentPage>200) { + self.unobserve($observe); + let newItem = document.createElement('section'); + newItem.classList.add('Empty'); + newItem.innerHTML = `

Todos los productos Obtenidos

`; + $app.appendChild(newItem); + } }, { rootMargin: '0px 0px 100% 0px', }); +loadData(); + intersectionObserver.observe($observe);