diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index ddfff263..f3df0444 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -1,15 +1,17 @@ ## DESCRIPTION -Solución al reto: +Solución al reto: -Nombre: -Usuario Platzi: -Correo Electronico: +Nombre: María Agustina Cassi +Usuario Platzi: tinicassi +Correo Electronico: m.agustina.cassi@gmail.com ## Reto: -- [ ] Primer problema -- [ ] Segundo problema -- [ ] Tercer problema -- [ ] Cuarto Problema -- [ ] Quinto Problema +- [💚] Primer problema +- [💚] Segundo problema +- [💚] Tercer problema +- [💚] Cuarto Problema +- [💚] Quinto Problema + +Gracias por la oportunidad Platzi, los quiero!!!! 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/package.json b/package.json index ed1a7bea..b288e653 100755 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "start": "live-server --open=public --entry-file=index.html", - "e2e": "cypress open" + "e2e": "cypress open", }, "repository": { "type": "git", diff --git a/public/index.html b/public/index.html index 5f8fbe0d..65c00a8a 100755 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,8 @@
-

PlatziStore

+

Platzi Store 💚

+

Somos un comercio en línea con una gran cantidad de productos a comercializar. #NuncaParesDeAprender

diff --git a/public/styles.css b/public/styles.css index ada53a1a..c75eb18a 100755 --- a/public/styles.css +++ b/public/styles.css @@ -32,13 +32,13 @@ body { animation-name: fade; } -.Card img { +.Card-img { width: 100%; height: auto; border-radius: 5px 5px 0 0; } -.Card h2 { +.Card-h2 { font-size: 18px; font-weight: 300; padding: 5px 10px; diff --git a/src/index.js b/src/index.js index eb2631c2..59ace022 100755 --- a/src/index.js +++ b/src/index.js @@ -1,31 +1,65 @@ -const $app = document.getElementById('app'); -const $observe = document.getElementById('observe'); -const API = 'https://api.escuelajs.co/api/v1/products'; +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 => { +const limit = 10; + +window.addEventListener("beforeunload", ()=> { + localStorage.removeItem("pagination") +}) + +const getData = (api, offset, limit) => { + const endpoint = `${API}?offset=${offset}&limit=${limit}`; + fetch(endpoint) + .then((response) => response.json()) + .then((response) => { let products = response; + if(products.length > 0){ let output = products.map(product => { - // template - }); - let newItem = document.createElement('section'); - newItem.classList.add('Item'); - newItem.innerHTML = output; + return `
+ ${product.title}/ +

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

+
`; + }); + let newItem = document.createElement("section"); + newItem.classList.add("Items"); + newItem.innerHTML = output.join(""); $app.appendChild(newItem); + }else{ + let finalMessage = document.createElement("p") + finalMessage.innerText = "Todos los productos obtenidos 📦" + $app.appendChild(finalMessage) + intersectionObserver.unobserve($observe) + } }) - .catch(error => console.log(error)); -} + .catch((error) => console.error(error)); +}; -const loadData = () => { - getData(API); -} +const loadData = async () => { + if(!localStorage.getItem("pagination")){ + let pagination = await localStorage.setItem("pagination", 5) + let obtainData = await getData(API, localStorage.getItem("pagination"), limit) + }else{ + let offset = await parseInt(localStorage.getItem("pagination")) + limit; + let changeStorage = await localStorage.setItem("pagination", offset) + let obtainData = await getData(API, localStorage.getItem("pagination"), limit) + } +}; -const intersectionObserver = new IntersectionObserver(entries => { - // logic... -}, { - rootMargin: '0px 0px 100% 0px', -}); +const intersectionObserver = new IntersectionObserver( + (entries) => { + entries.forEach(entry => { + if(entry.intersectionRatio > 0){ + loadData() + } + }) + }, + { + rootMargin: "0px 0px 100% 0px", + } +); intersectionObserver.observe($observe);