diff --git a/_config.yml b/_config.yml new file mode 100644 index 00000000..c4192631 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-cayman \ No newline at end of file diff --git a/public/images/free-store-icon-2017-thumb.png b/public/images/free-store-icon-2017-thumb.png new file mode 100644 index 00000000..92a46a45 Binary files /dev/null and b/public/images/free-store-icon-2017-thumb.png differ diff --git a/public/index.html b/public/index.html index 5f8fbe0d..ffb76774 100755 --- a/public/index.html +++ b/public/index.html @@ -5,15 +5,19 @@ - + + Platzi Store + +
-

PlatziStore

+

Platzi Store

+
Todos los productos Obtenidos
diff --git a/public/styles.css b/public/styles.css index ada53a1a..0d9171be 100755 --- a/public/styles.css +++ b/public/styles.css @@ -46,6 +46,18 @@ body { justify-content: space-between; } +#lastMsg { + text-align: center; +} + +.hide { + display: none; +} + +.show { + display: block; +} + @keyframes fade { from { opacity: 0; diff --git a/src/index.js b/src/index.js index eb2631c2..1f4f310a 100755 --- a/src/index.js +++ b/src/index.js @@ -1,31 +1,119 @@ const $app = document.getElementById('app'); const $observe = document.getElementById('observe'); const API = 'https://api.escuelajs.co/api/v1/products'; +const $lastMsg = document.getElementById('lastMsg'); -const getData = api => { - fetch(api) +const MAX_PRODUCTS_LIST = 200; +const MAX_NUM_ITEMS = 10; +const START_ITEM = 1; +let page = 1; +let marginTop = 100; +let loadMoreProducts = false; + +/** + * Returns the index of the first product according to the page number + * @returns A number + */ +const startOfQuantity = () => { + if (page < 2) { + return START_ITEM - 1; + } + else { + return MAX_NUM_ITEMS * (page - 1) + (START_ITEM - 1); + } +} + +/** + * Returns the index of the last product according to the page number + * @returns + */ +const endOfQuantity = () => { + return MAX_NUM_ITEMS * page + (START_ITEM - 1); +} + +const itemCard = (item) => { + return '
' + + '' + item.description + '' + + '

' + item.title + + '$ ' + item.price + '' + + '

' + + '
'; +} + +const getData = async api => { + fetch(api + `?offset=${startOfQuantity()}&limit=${MAX_NUM_ITEMS}`) .then(response => response.json()) .then(response => { let products = response; let output = products.map(product => { - // template - }); + return product; + }) + .filter( x => x !== undefined ); + let elements = Object.values(output) + .map((value) => { + return itemCard(value); + }) + .join(''); + let newItem = document.createElement('section'); - newItem.classList.add('Item'); - newItem.innerHTML = output; + newItem.classList.add('Items'); + newItem.innerHTML = elements; $app.appendChild(newItem); + + loadMoreProducts = true; + page++; }) .catch(error => console.log(error)); } -const loadData = () => { - getData(API); +const loadData = async () => { + await getData(API); } const intersectionObserver = new IntersectionObserver(entries => { - // logic... + entries.forEach(entry => { + if (entry.intersectionRatio > 0 && endOfQuantity() <= MAX_PRODUCTS_LIST) { + if (loadMoreProducts) { + loadMoreProducts = false; + loadData(); + } + } else { + if (endOfQuantity() > MAX_PRODUCTS_LIST) { + intersectionObserver.unobserve(entry.target); + finalMsg(); + } + } + }); }, { - rootMargin: '0px 0px 100% 0px', + rootMargin: '0px 0px 0px 0px', }); -intersectionObserver.observe($observe); + +// const getStorage = () => { +// let pagination = parseInt(localStorage.getItem('pagination')); +// if (pagination === null) { +// localStorage.setItem('pagination', 1); +// } else { +// if (MAX_PRODUCTS_LIST < MAX_NUM_ITEMS * pagination + (START_ITEM - 1)) { +// pagination = 0; +// } +// let nextPage = ++pagination; +// localStorage.setItem('pagination', nextPage); +// page = nextPage; +// } +// } + +const finalMsg = () => { + $lastMsg.classList.add('show'); +} + +(async function() { + // getStorage(); + await loadData() + .then( + () => { + intersectionObserver.observe($observe); + } + ); + +})(); \ No newline at end of file