diff --git a/src/index.js b/src/index.js index 7a07752..38146dc 100644 --- a/src/index.js +++ b/src/index.js @@ -1,38 +1,81 @@ -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 => { fetch(api) .then(response => response.json()) .then(response => { - const characters = response.results; - let output = characters.map(character => { - return ` -
- -

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

-
- ` - }).join(''); - let newItem = document.createElement('section'); - newItem.classList.add('Items'); - newItem.innerHTML = output; - $app.appendChild(newItem); + const characters = response.results + saveInLocalStorage(response.info.next) + let output = characters + .map(character => { + return ` +
+ +

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

+
+ ` + }) + .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 = api => { + getData(api) +} + +const saveInLocalStorage = next_fetch => { + localStorage.setItem('next_fetch', next_fetch) } -const loadData = () => { - getData(API); +const printMessage = () => { + const output = ` +
+

No se encontraron mas personajes

+
+ ` + + let newItem = document.createElement('section') + newItem.classList.add('message') + newItem.innerHTML = output + $observe.appendChild(newItem) } +let h = 0 +const intersectionObserver = new IntersectionObserver( + entries => { + if (entries[0].isIntersecting) { + console.log(`localstoeg${localStorage}`) + + h = h + 1 + + if (!localStorage.getItem('next_fetch')) { + localStorage.removeItem('next_fetch') + console.log('ya no hay mas personajes22222') + } + if (h === 35) { + localStorage.removeItem('next_fetch') + console.log('ya no hay mas personajes') + loadData(`${API}/?page=${h}`) + printMessage() + return (h = 0) + } -const intersectionObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - loadData(); + if (localStorage.getItem('next_fetch')) { + } + loadData(`${API}/?page=${h}`) + console.log(localStorage.getItem('next_fetch')) + } + }, + { + rootMargin: '0px 0px 100% 0px' } -}, { - rootMargin: '0px 0px 100% 0px', -}); +) -intersectionObserver.observe($observe); \ No newline at end of file +intersectionObserver.observe($observe) \ No newline at end of file