Está imágen y tratar de aprender más sobre Fetch me animaron a hacer un ejercicio “sencillo” con la API de Pokémon.
Ve el proyecto aquí: https://achezeta.github.io/PokeDay/
En este blog te cuento cómo lo hice y el proceso con HTML y JS, pero pueden encontrar todos los archivos en el repositorio al final de este texto.
HTML
Sin duda de las partes más básicas, mi HTML cuenta con un input del tipo fecha, un botón que sirve de disparador y un div donde se mostrará el pokémon.
JS
El código Javascript de este programa tuvo varias tareas:
- Consumir la API.
- Conseguir el número de día que representaba la fecha en el año.
FETCH
Fetch es un método que permite interactuar con los datos de manera asíncrona.
Este tipo de funcionalidad se conseguía previamente haciendo uso de
XMLHttpRequest. Fetch proporciona una mejor alternativa que puede ser empleada fácilmente por otras tecnologías como Service Workers. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP. Utilizando Fetch - MDN
Obtener los datos
Para obtener los datos creé la función getPokemon, en ella usé fetch().
Fetch necesita como parámetro la URL, en este caso de la API de Pokémon. Esta URL funciona así: ‘Base de la URL + parámetro de búsqueda’, que puede ser nombre, tipo o habilidad, por ejemplo:
https://pokeapi.co/api/v2/pokemon/1/mostrará los datos de Bulbasaurhttps://pokeapi.co/api/v2/pokemon/mostrará los primeros 20https://pokeapi.co/api/v2/pokemon/?limit=808mostrará todos los pokemones (807)
Obtener el número de día
Una de las partes que me tomó más tiempo de lo esperado fue entender cómo convertir una fecha a número de día.
La fórmula no parece tan difícil: restar a 365 o 366 el número de días que han transcurrido y asignarle un pokémon según el número obtenido. Pero la ejecución me hizo conocer algunos métodos que desconocía.
Date.parse()transforma una cadena con la representación de una fecha y hora, y devuelve el número de milisegundos. Date.parse() - MDN
Así que usé este método para convertir la fecha seleccionada y la fecha inicial a milisegundos.
Para la fecha inicial la obtuve usando .slice y concatenando 01-01. Usar 00 como día de inicio hace que la fecha no sea válida y no pueda parsearse.
Resté la fecha seleccionada a la fecha inicial, el resultado lo dividí entre 86400000 (que son los milisegundos en un día), lo redondeé y le sumé uno.
Buscar & Mostrar
Usé dos funciones distintas:
searchPoke: para detectar si el input es una fecha o si está vacía.renderPokemon: para imprimir en eldivel pokémon usando template string.
Al inicio del documento declaré la variable userIdPokemon que fetch tomó para hacer la petición.
El código completo de JS sería este:
El código final lo pueden encontrar en mi repositorio.
Y si quieres seguir experimentando, puedes leer y usar alguna de las API que se proponen en DataLovers, un proyecto del bootcamp de Laboratoria que te ayudará a practicar con Fetch, JSON, Objetos, Arrays y otros temas.
Siéntete libre de forkear este proyecto, modificarlo, compartirlo o dejar feedback que sin duda me ayudará a mejorar.
❤
Este post fue originalmente publicado en Medium.