Este ejercicio consiste en desarrollar una aplicación web con todos los personajes disney de la historia, que nos permita marcar y desmarcar los personajes como favoritos y guardarlos en localStorage.
🔸HTML
🔸CSS
🔸Saas
🔸JavaScript
🔸GULP + Starterkit proporcionado por Adalab
🔸GitHub Pages
✅ Llamada a una API
✅ Búsqueda en API
✅ Paginación
✅ Guardar datos en LocalStorage
✅ Diseño mobile first
📍Estructura básica:
- Listar todos los personajes de la primera página que obtendremos de la siguiente API
- Incluir un campo de texto y un botón para buscar un personaje por su nombre.
- Mostrar una lista con tarjetas con los resultados que incluya el nombre
- En caso de que alguno de los personajes no tenga imagen, mostrar una imagen de relleno.
- Crear una sección de favoritos. Al clickar en alguna de las tarjetas el personaje se añadirá a la parte izquierda de la pantalla, debajo del formulario de búsqueda.
- Almacenar el listado de favoritos en el localStorage.
💫Bonus
- Al hacer click sobre el botón de buscar conectarse al API.
- Por cada personaje contenido en el resultado de la búsqueda pintar una tarjeta que muestre imagen del personaje y nombre.
- Los personajes favoritos siempre deben aparecer aunque la usuaria realice otra búsqueda.
- Borrar favoritos. Incluir un icono para poder eliminar la tarjeta del listado.
🛫 Mejoras personales sobre el ejercicio
- Sección donde se muestran los favoritos.
- botón para poder mostrar u ocultar los favoritos incluidos.
- icono en cada tarjeta para añadir o eliminar un favorito.
- Paginación.
- Diseño responsive.
Para arrancar el proyecto, descarga el repositorio y ejecuta la siguiente línea en tu terminal, para instalar la carpeta node modules.
npm install
Para poder visualizar la página en el navegador ejecuta:
npm start
En la carpeta src puedes encontrar los archivos del desarrollo del proyecto
En la carpeta docs se encuentran los archivos subidos en GitHubPages.
Este proyecto está creado con node y gulp. Incluye un motor de plantillas HTML, el preprocesador SASS, un servidor local y otras herramientas que nos ayudarán a trabajar más cómodamente, automatizando tareas.