From 70a408b9744be316f487385f3fb889909cfcad47 Mon Sep 17 00:00:00 2001 From: adrian Date: Sun, 12 Jun 2022 17:49:00 -0400 Subject: [PATCH 1/3] challenge solved --- public/index.html | 3 +- src/index.js | 73 ++++++++++++++++++++++++++++++++--------------- 2 files changed, 52 insertions(+), 24 deletions(-) diff --git a/public/index.html b/public/index.html index 5f8fbe0d..e6aed258 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 eb2631c2..ed13b463 100755 --- a/src/index.js +++ b/src/index.js @@ -1,31 +1,58 @@ -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 => { +const getData = (api) => { + let offset = null; + if (localStorage.getItem("offset")) { + offset = localStorage.getItem("offset"); + } else { + offset = 5; + } + api += "?offset=" + offset + "&limit=10"; + 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)); -} + .then((response) => response.json()) + .then((response) => { + console.log(response); + let products = response; + let output = products.map((product) => { + let template = '

'+product.description+' $ '+product.price+'

'; + return template; + }); + let newItem = document.createElement("section"); + newItem.classList.add("Item"); + newItem.innerHTML = output; + $app.appendChild(newItem); + if(response.length == 0){ + intersectionObserver.disconnect(); + let message = document.createElement("section"); + message.innerHTML = 'Todos los productos Obtenidos'; + $app.appendChild(message); + } else { + offset = response.slice(-1)[0].id + 1; + localStorage.setItem("offset", offset); + } + }).catch((error) => console.log(error)); +}; -const loadData = () => { - getData(API); -} +const loadData = async () => { + localStorage.removeItem('offset'); + await getData(API); +}; const intersectionObserver = new IntersectionObserver(entries => { - // logic... + entries.forEach((entry) => { + if (entry.isIntersecting) { + getData(API) + } + }); }, { - rootMargin: '0px 0px 100% 0px', + root: null, + rootMargin: "0px", + threshold: 0.25 }); -intersectionObserver.observe($observe); +window.addEventListener("load", function () { + intersectionObserver.observe($observe); +}); From ddf3d16e3c8c58667169b7c3793d4e14c02d32b1 Mon Sep 17 00:00:00 2001 From: adrian Date: Sun, 12 Jun 2022 17:59:33 -0400 Subject: [PATCH 2/3] change informaciont Pull request --- PULL_REQUEST_TEMPLATE.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index ddfff263..8dca88d9 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: Adrian Perez +Usuario Platzi: adrianjose +Correo Electronico: adrianperez1223@gmail.com ## Reto: -- [ ] Primer problema -- [ ] Segundo problema -- [ ] Tercer problema -- [ ] Cuarto Problema -- [ ] Quinto Problema +- [*] Primer problema +- [*] Segundo problema +- [*] Tercer problema +- [*] Cuarto Problema +- [*] Quinto Problema From 8ea8077db92a20389be1d3f7d7269530cee493c4 Mon Sep 17 00:00:00 2001 From: adrian Date: Sun, 12 Jun 2022 18:03:15 -0400 Subject: [PATCH 3/3] add GitHub Page --- PULL_REQUEST_TEMPLATE.md | 1 + 1 file changed, 1 insertion(+) diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index 8dca88d9..ae9f15f1 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -6,6 +6,7 @@ Nombre: Adrian Perez Usuario Platzi: adrianjose Correo Electronico: adrianperez1223@gmail.com +GitHub Page: https://adrianjp2.github.io/js-challenge/public/ ## Reto: - [*] Primer problema