Somos comercio en línea con una gran cantidad de productos a comercializar. Estamos por lanzar nuestra implementación y necesitamos resolver los problemas que presenta nuestra aplicación.
PlatziStore tiene varios bugs, tareas sin completar y recursos a implementar para su lanzamiento oficial.
npm install
npm run start
http://localhost:8080/public/
const $app = document.getElementById("app");
const $observe = document.getElementById("observe");
const API = "https://api.escuelajs.co/api/v1/products";
Función llamada ‘getData’ que se encarga de hacer Fetch a una API y debe de construir un elemento nuevo en el DOM.
const getData = (api) => {
fetch(api)
.then((response) => response.json())
.then((response) => {
const products = response;
})
.catch((error) => console.log(error));
};
Función encargada de obtener de los Productos.
const loadData = () => {
getData(API);
};
Intersection Observer
const intersectionObserver = new IntersectionObserver(
(entries) => {
// logic...
},
{
rootMargin: "0px 0px 100% 0px",
}
);
intersectionObserver.observe($observe);
<article class="Card">
<img src="imagen.png" />
<h2>
Producto
<small>$ Precio</small>
</h2>
</article>
Cuando cerramos la pestaña o recargamos la pagina se debe de volver a mostrar los primeros 10 Productos.
La API utilizada “fakeAPI” retorna 200 productos, utilizaremos la paginación propuesta en su documentación para obtener los productos en bloques de 10, cuando la última petición sea ejecutada debes de mostrar un mensaje “Todos los productos Obtenidos”, a su vez debes de destruir el intersection observer.
Desplegar la aplicación en alguno de los siguientes servicios: GitHub Pages, Netlify, Vercel.
Debes de hacer un “Fork” de este proyecto, revolver los problemas y crear un Pull Request hacia este repositorio.
Si alguien quiere agregar o mejorar algo, lo invito a colaborar directamente en este repositorio: js-challenge
js-challenge se lanza bajo la licencia MIT.