From 3b2ae38b067847d1ce877396bba17c7b28fa4af5 Mon Sep 17 00:00:00 2001 From: Cristian Buenaventura Date: Sat, 11 Jun 2022 17:20:01 -0500 Subject: [PATCH 1/3] problemas completados --- package-lock.json | 8 +++---- public/index.html | 6 ++++- src/index.js | 61 +++++++++++++++++++++++++++++++++++------------ 3 files changed, 55 insertions(+), 20 deletions(-) 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..21c1de72 100755 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,11 @@ - + + PlatziStore diff --git a/src/index.js b/src/index.js index eb2631c2..536e8711 100755 --- a/src/index.js +++ b/src/index.js @@ -2,30 +2,61 @@ 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.removeItem('pagination'); +const limit = 10; + +const getData = async api => { + const pagination = localStorage.getItem('pagination') || 1; + const offset = pagination * limit - 6; + let output; + try { + const getData = await fetch(`${api}?offset=${offset}&limit=${limit}`); + const response = await getData.json(); + + if (response.length) { + output = response.map(product => { + return ` +
+ +

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

+
+ `; + }) + } else { + intersectionObserver.unobserve($observe); + output = ` +

Todos los productos Obtenidos

+ ` + }; + + let newItem = document.createElement('section'); + newItem.classList.add('Item'); + newItem.innerHTML = output; + $app.appendChild(newItem); + } catch (error) { + consol.log(error); + } + localStorage.setItem('pagination', (parseInt(pagination) + 1)); } const loadData = () => { getData(API); } + const intersectionObserver = new IntersectionObserver(entries => { - // logic... + entries.forEach(entry => { + if (entry.isIntersecting) { + loadData(); + } + }) }, { rootMargin: '0px 0px 100% 0px', }); intersectionObserver.observe($observe); + From dc48594690541f31fa1fc6f9c00fbc4541354077 Mon Sep 17 00:00:00 2001 From: Cristian Buenaventura Date: Sat, 11 Jun 2022 17:31:28 -0500 Subject: [PATCH 2/3] problemas completados --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 21c1de72..f80c5403 100755 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ PlatziStore From 5d90e4ef95bbd25bd33e1102366cbe862bb3721d Mon Sep 17 00:00:00 2001 From: Cristian Buenaventura Date: Sat, 11 Jun 2022 17:42:20 -0500 Subject: [PATCH 3/3] changing h1 to h2 for problem 4 --- PULL_REQUEST_TEMPLATE.md | 6 +++--- src/index.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index ddfff263..cd93c5c0 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -2,9 +2,9 @@ SoluciĆ³n al reto: -Nombre: -Usuario Platzi: -Correo Electronico: +Nombre:Cristian Buenaventura +Usuario Platzi:Cristian Buenaventura +Correo Electronico:cristianbuenaventura15@gmail.com ## Reto: diff --git a/src/index.js b/src/index.js index 536e8711..9460da0a 100755 --- a/src/index.js +++ b/src/index.js @@ -29,7 +29,7 @@ const getData = async api => { } else { intersectionObserver.unobserve($observe); output = ` -

Todos los productos Obtenidos

+

Todos los productos Obtenidos

` };