diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index ddfff263..0c13bf9a 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: Edwin Olaff Cuba Davila +Usuario Platzi: edwinolaffcubadavila +Correo Electronico: edwincubad@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 diff --git a/public/index.html b/public/index.html index 5f8fbe0d..55a433c2 100755 --- a/public/index.html +++ b/public/index.html @@ -1,22 +1,21 @@ + + + + + PlatziStore + + + - - - - - - - + +
+

PlatziStore

+
+
+
+ - -
-

PlatziStore

-
-
-
- - - - - \ No newline at end of file + + diff --git a/src/index.js b/src/index.js index eb2631c2..5d608a1a 100755 --- a/src/index.js +++ b/src/index.js @@ -2,30 +2,65 @@ 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 intersectionObserver = new IntersectionObserver(entries => { - // logic... -}, { - rootMargin: '0px 0px 100% 0px', -}); +localStorage.clear(); + +const PAGINTAION_STORAGE = 'pagination'; +const initialPagination = 5; + +const getData = async (api) => { + const response = await fetch(api); + const products = await response.json(); + + if (!products.length) { + intersectionObserver.unobserve($observe); + const message = document.createElement('p'); + message.innerHTML = 'Todos los productos Obtenidos'; + return $app.appendChild(message); + } + + const output = products.map( + (product) => ` +
+ +

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

+
+ `, + ); + + const newItem = document.createElement('section'); + newItem.classList.add('Items'); + newItem.innerHTML = output.join(''); + $app.appendChild(newItem); +}; + +const getNewPagination = () => { + const pagination = localStorage.getItem(PAGINTAION_STORAGE); + localStorage.setItem(PAGINTAION_STORAGE, pagination ? Number(pagination) + 10 : initialPagination); + return localStorage.getItem(PAGINTAION_STORAGE); +}; + +const loadData = async () => { + const pagination = getNewPagination(); + const objPAarams = { offset: pagination, limit: 10 }; + const strParams = new URLSearchParams(objPAarams).toString(); + const PARAMETERIZED_API = `${API}?${strParams}`; + await getData(PARAMETERIZED_API); +}; + +let = false; +const intersectionObserver = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting) { + loadData(); + } + }, + { + rootMargin: '0px 0px 100% 0px', + threshold: 1, + }, +); intersectionObserver.observe($observe);