From f861dfe225b182671c76b86f773d5db099b584a4 Mon Sep 17 00:00:00 2001 From: adriana_ardila Date: Sun, 4 Oct 2020 21:52:47 -0500 Subject: [PATCH] all the challenge steps completed --- PULL_REQUEST_TEMPLATE.md | 13 ++++--- public/index.html | 34 ++++++++--------- src/index.js | 80 ++++++++++++++++++++++++++++------------ 3 files changed, 80 insertions(+), 47 deletions(-) diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index fb4df26..feed8a1 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -2,11 +2,12 @@ Solución al reto 03 de Escuela de JavaScript -Nombre: -Usuario Platzi: +Nombre: Adriana Ardila +Usuario Platzi: @ardila_adri ## Reto: - - [ ] Primer problema - - [ ] Segundo problema - - [ ] Tercer problema - - [ ] Cuarto Problema (Opcional) \ No newline at end of file + +- [x] Primer problema +- [x] Segundo problema +- [x] Tercer problema +- [x] Cuarto Problema (Opcional) diff --git a/public/index.html b/public/index.html index 26ad443..b9af8f8 100644 --- a/public/index.html +++ b/public/index.html @@ -1,22 +1,20 @@ + + + + + EscuelaJS Reto 03 + + - - - - - EscuelaJS Reto 05 - - + +
+

100tifi.co

+
+
+
+ - -
-

100tifi.co

-
-
-
- - - - - \ No newline at end of file + + diff --git a/src/index.js b/src/index.js index 7a07752..808d68c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,38 +1,72 @@ -const $app = document.getElementById('app'); -const $observe = document.getElementById('observe'); -const API = 'https://rickandmortyapi.com/api/character/'; +const $app = document.getElementById("app"); +const $observe = document.getElementById("observe"); +const API = "https://rickandmortyapi.com/api/character/"; -const getData = api => { +const getData = (api) => { fetch(api) - .then(response => response.json()) - .then(response => { + .then((response) => response.json()) + .then((response) => { const characters = response.results; - let output = characters.map(character => { - return ` + const nextURL = response.info.next; + urlSavedLocalStorage(nextURL); + let output = characters + .map((character) => { + return `

${character.name}${character.species}

- ` - }).join(''); - let newItem = document.createElement('section'); - newItem.classList.add('Items'); + `; + }) + .join(""); + let newItem = document.createElement("section"); + newItem.classList.add("Items"); newItem.innerHTML = output; $app.appendChild(newItem); }) - .catch(error => console.log(error)); -} + .catch((error) => console.log(error)); +}; + +const loadData = async (url) => { + if (url === "null") { + alert("Ya no hya personajes..."); + intersectionObserver.unobserve($observe); + } else { + await getData(url); + } +}; + +const intersectionObserver = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting) { + loadData(getDataLocalStorage()); + } + }, + { + rootMargin: "0px 0px 100% 0px", + } +); -const loadData = () => { - getData(API); +intersectionObserver.observe($observe); + +const urlSavedLocalStorage = (url) => { + localStorage.setItem("next_fetch", url); +}; + +function getDataLocalStorage() { + const urlSave = localStorage.getItem("next_fetch"); + + if (urlSave) { + return urlSave; + } else { + return API; + } } -const intersectionObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - loadData(); +const removeLocalStorage = () => { + if (localStorage.getItem("next_fetch")) { + localStorage.removeItem("next_fetch"); } -}, { - rootMargin: '0px 0px 100% 0px', -}); +}; -intersectionObserver.observe($observe); \ No newline at end of file +window.addEventListener("DOMContentLoaded", removeLocalStorage);