Escuelajs-reto-05
Reto 5 Septiembre 28: Curso de Fundamentos de JavaScript
100tifi.co
Somos un directorio de personajes de la serie animada "Rick and Morty". Estamos por lanzar nuestra implementación y necesitamos resolver los problemas que presenta nuestra aplicación.
https://100tifi.co tiene un Bug, al llegar al final del listado de personajes se realiza una petición a la API ya que implementamos un "intersection observer" pero vuelve a obtener los mismos personajes y necesitamos cargar la lista completa de 468 personajes conforme hagamos scroll.
Debug
Visita el sitio web: https://100tifi.co
Instalación
npm install
Ejecución
npm run start
Documentación
- Variable llamada $app donde haremos render de nuestra app.
- Elemento del DOM que sera Observado.
- Constante 'API': Utilizamos la API de Rick and Morty.
const $app = document.getElementById('app');
const $observe = document.getElementById('observe');
const API = 'https://rickandmortyapi.com/api/character/';
Función llamada 'getData' que se encarga de hacer Fetch a una API y construye un elemento nuevo en el DOM.
const getData = api => {
fetch(api)
.then(response => response.json())
.then(response => {
const characters = response.results;
let output = characters.map(character => {
return `
<article class="Card">
<img src="${character.image}" />
<h2>${character.name}<span>${character.species}</span></h2>
</article>
`
}).join('');
let newItem = document.createElement('section');
newItem.classList.add('Items');
newItem.innerHTML = output;
$app.appendChild(newItem);
})
.catch(error => console.log(error));
}
Función encargada de hacer Fetch de los personajes.
const loadData = () => {
getData(API);
}
Intersection Observer
const intersectionObserver = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
loadData();
}
}, {
rootMargin: '0px 0px 100% 0px',
});
intersectionObserver.observe($observe);
RETO
Primer problema
- Guarda en localStorage la URL de la siguiente petición de personajes obtenida en la primera llamada a la API.
- Utiliza el nombre para la llave: 'next_fetch'.
- Comprueba que se ha guardado el valor 'next_fetch' en localStorage.
Segundo Problema
- Obten los datos almacenados en localStorage de la llave: 'next_fetch'.
- Valida que exista un valor en 'next_fetch' o regresa el primer llamado de la API.
- Actualiza la función loadData() a Async/Await.
Tercer Problema
Cuando cerramos la pestaña o recargamos la pagina se debe de volver a mostrar los primeros 20 personajes.
- Mostrar los primeros 20 personajes al recargar
- Eliminar el localStorage.
Cuarto Problema (Opcional)
La API utilizada "RickAndMortyApi.com" tiene 25 paginas de 20 personajes cada una, cuando la ultima petición sea ejecutada y el valor 'next' no sea entregado debes de mostrar un mensaje "Ya no hay personajes", a su vez debes de destruir el intersection observer.
- Implementar mensaje: "Ya no hay personajes...".
- Deja de observar el elemento "observe".
Enviar solución de reto
Debes de crear un "Fork" de este proyecto, revolver los problemas y crear un Pull Request hacia este repositorio.
Contribuir
Si alguien quiere agregar o mejorar algo, lo invito a colaborar directamente en este repositorio: escuelajs-reto-05
Licencia
escuelajs-reto-05 se lanza bajo la licencia MIT.