From 9fc0b43b9c7ce13d41765a339b0bb1a51ab44423 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliwen=20Melill=C3=A1n?= Date: Wed, 8 Jun 2022 12:59:28 -0400 Subject: [PATCH 1/7] Primer problema resuelto --- package-lock.json | 8 ++++---- public/index.html | 2 +- src/index.js | 22 ++++++++++++++++------ 3 files changed, 21 insertions(+), 11 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..ef11d587 100755 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,7 @@

PlatziStore

-
+
Loading...
diff --git a/src/index.js b/src/index.js index eb2631c2..093f8c7c 100755 --- a/src/index.js +++ b/src/index.js @@ -1,19 +1,25 @@ const $app = document.getElementById('app'); const $observe = document.getElementById('observe'); const API = 'https://api.escuelajs.co/api/v1/products'; +const initOffset = 5; +const productLength = 10; +localStorage.setItem("pagination", initOffset); const getData = api => { - fetch(api) + const actualOffset = parseInt(localStorage.getItem("pagination")); + fetch(`${api}?offset=${actualOffset}&limit=${productLength}`) .then(response => response.json()) .then(response => { let products = response; let output = products.map(product => { // template + return `${product.id}}` }); let newItem = document.createElement('section'); newItem.classList.add('Item'); newItem.innerHTML = output; $app.appendChild(newItem); + localStorage.setItem("pagination", actualOffset + productLength); }) .catch(error => console.log(error)); } @@ -22,10 +28,14 @@ const loadData = () => { getData(API); } -const intersectionObserver = new IntersectionObserver(entries => { - // logic... -}, { - rootMargin: '0px 0px 100% 0px', -}); +const intersectionObserver = new IntersectionObserver( + entries => + // logic... + entries.forEach(entry => { + if (entry.isIntersecting) loadData(); + }) + , { + rootMargin: '0px 0px 100% 0px', + }); intersectionObserver.observe($observe); From 5672b32fbfe8c0c34bcfdeafd2f3f8da7d6ca670 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliwen=20Melill=C3=A1n?= Date: Fri, 10 Jun 2022 17:14:22 -0400 Subject: [PATCH 2/7] Segundo problema resuelto --- public/index.html | 3 ++- src/index.js | 8 +++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index ef11d587..b4aea588 100755 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,8 @@ - + PlatziStore + diff --git a/src/index.js b/src/index.js index 093f8c7c..94ede3e8 100755 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,13 @@ const getData = api => { let products = response; let output = products.map(product => { // template - return `${product.id}}` + return `
+ +

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

+
` }); let newItem = document.createElement('section'); newItem.classList.add('Item'); From a9d682f75387e7c4e5ca7b067914498b0c0838ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliwen=20Melill=C3=A1n?= Date: Sat, 11 Jun 2022 17:29:41 -0400 Subject: [PATCH 3/7] Tercer problema resuelto --- src/index.js | 42 ++++++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/src/index.js b/src/index.js index 94ede3e8..dd75d7b7 100755 --- a/src/index.js +++ b/src/index.js @@ -1,41 +1,42 @@ const $app = document.getElementById('app'); const $observe = document.getElementById('observe'); const API = 'https://api.escuelajs.co/api/v1/products'; -const initOffset = 5; +const initOffset = 0; const productLength = 10; localStorage.setItem("pagination", initOffset); -const getData = api => { +const getData = async api => { const actualOffset = parseInt(localStorage.getItem("pagination")); - fetch(`${api}?offset=${actualOffset}&limit=${productLength}`) - .then(response => response.json()) - .then(response => { - let products = response; - let output = products.map(product => { - // template - return `
+ try { + let response = await fetch(`${api}?offset=${actualOffset}&limit=${productLength}`); + let products = await response.json(); + let output = products.map(product => { + // template + return `

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

` - }); - let newItem = document.createElement('section'); - newItem.classList.add('Item'); - newItem.innerHTML = output; - $app.appendChild(newItem); - localStorage.setItem("pagination", actualOffset + productLength); - }) - .catch(error => console.log(error)); + }); + let newItem = document.createElement('section'); + newItem.classList.add('Item'); + newItem.innerHTML = output; + $app.appendChild(newItem); + localStorage.setItem("pagination", actualOffset + productLength); + } + catch (error) { + console.log(error); + } } -const loadData = () => { - getData(API); +const loadData = async () => { + await getData(API); } const intersectionObserver = new IntersectionObserver( - entries => + async entries => // logic... entries.forEach(entry => { if (entry.isIntersecting) loadData(); @@ -45,3 +46,4 @@ const intersectionObserver = new IntersectionObserver( }); intersectionObserver.observe($observe); +window.onbeforeunload = () => localStorage.clear(); \ No newline at end of file From 27f02581a8db958c841942496b2d0e91eb663fb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliwen=20Melill=C3=A1n?= Date: Sat, 11 Jun 2022 17:40:06 -0400 Subject: [PATCH 4/7] Cuarto problema resuelto --- src/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index dd75d7b7..96a04e96 100755 --- a/src/index.js +++ b/src/index.js @@ -5,8 +5,10 @@ const initOffset = 0; const productLength = 10; localStorage.setItem("pagination", initOffset); +const getPagination = () => parseInt(localStorage.getItem("pagination")); + const getData = async api => { - const actualOffset = parseInt(localStorage.getItem("pagination")); + const actualOffset = getPagination(); try { let response = await fetch(`${api}?offset=${actualOffset}&limit=${productLength}`); let products = await response.json(); @@ -39,6 +41,11 @@ const intersectionObserver = new IntersectionObserver( async entries => // logic... entries.forEach(entry => { + if(getPagination()>=200) { + alert("Todos los productos Obtenidos"); + intersectionObserver.unobserve($observe); + return; + }; if (entry.isIntersecting) loadData(); }) , { From 48d175b5a6ca211bc4b67027a0d4bafb7d73a45a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliwen=20Melill=C3=A1n=20Raguileo?= Date: Sat, 11 Jun 2022 18:48:10 -0400 Subject: [PATCH 5/7] Fix responsive --- public/styles.css | 18 ++++++++++++++++++ src/index.js | 5 +++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/public/styles.css b/public/styles.css index ada53a1a..8d3e2d41 100755 --- a/public/styles.css +++ b/public/styles.css @@ -54,3 +54,21 @@ body { opacity: 1; } } + +@media (max-width: 680px){ + .Card h2{ + flex-direction: column; + align-items: center; + } + + .Card h2 small{ + padding: 10px 0px 0px 0px; + } + + .Items { + grid-template-columns: repeat(1, 1fr); + grid-gap: 1.5rem; + grid-row-gap: 1.5em; + display: grid; + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 96a04e96..8b7a4ac7 100755 --- a/src/index.js +++ b/src/index.js @@ -23,8 +23,8 @@ const getData = async api => {
` }); let newItem = document.createElement('section'); - newItem.classList.add('Item'); - newItem.innerHTML = output; + newItem.classList.add('Items'); + newItem.innerHTML = output.join(''); $app.appendChild(newItem); localStorage.setItem("pagination", actualOffset + productLength); } @@ -44,6 +44,7 @@ const intersectionObserver = new IntersectionObserver( if(getPagination()>=200) { alert("Todos los productos Obtenidos"); intersectionObserver.unobserve($observe); + $observe.innerHTML = ""; return; }; if (entry.isIntersecting) loadData(); From eacf748c2465e95abec3c0dbe82a48aed1b7194e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliwen=20Melill=C3=A1n=20Raguileo?= Date: Sat, 11 Jun 2022 18:49:21 -0400 Subject: [PATCH 6/7] Fix alerta de productos obtenidos --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 8b7a4ac7..382c3f86 100755 --- a/src/index.js +++ b/src/index.js @@ -41,7 +41,7 @@ const intersectionObserver = new IntersectionObserver( async entries => // logic... entries.forEach(entry => { - if(getPagination()>=200) { + if(getPagination()>200) { alert("Todos los productos Obtenidos"); intersectionObserver.unobserve($observe); $observe.innerHTML = ""; From a8a15d5b16c79169f6e4af55229318b8fe59637d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliwen=20Melill=C3=A1n=20Raguileo?= Date: Sat, 11 Jun 2022 19:49:04 -0400 Subject: [PATCH 7/7] Fix Obtener initialState del LocalStorage --- src/index.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/index.js b/src/index.js index 382c3f86..5be01067 100755 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,8 @@ const $app = document.getElementById('app'); const $observe = document.getElementById('observe'); const API = 'https://api.escuelajs.co/api/v1/products'; -const initOffset = 0; +const initOffset = 5; const productLength = 10; -localStorage.setItem("pagination", initOffset); const getPagination = () => parseInt(localStorage.getItem("pagination")); @@ -26,7 +25,6 @@ const getData = async api => { newItem.classList.add('Items'); newItem.innerHTML = output.join(''); $app.appendChild(newItem); - localStorage.setItem("pagination", actualOffset + productLength); } catch (error) { console.log(error); @@ -41,13 +39,18 @@ const intersectionObserver = new IntersectionObserver( async entries => // logic... entries.forEach(entry => { - if(getPagination()>200) { - alert("Todos los productos Obtenidos"); - intersectionObserver.unobserve($observe); - $observe.innerHTML = ""; - return; - }; - if (entry.isIntersecting) loadData(); + let pagination = getPagination(); + if (entry.isIntersecting) { + if(pagination>=200) { + alert("Todos los productos Obtenidos"); + intersectionObserver.unobserve($observe); + $observe.innerHTML = ""; + return; + }; + let actualOffset = pagination? pagination + productLength: initOffset; + localStorage.setItem("pagination", actualOffset); + loadData(); + } }) , { rootMargin: '0px 0px 100% 0px',