Resumen: usar JavaScript del lado del cliente para consultar el tipo de cambio de divisas actual; por ejemplo, convertir el precio del dólar hoy comparado con el euro; etcétera, usando un servicio web de exchangeratesapi.
Conversión de monedas con JavaScript
Vamos a usar una API que ya expliqué, en conjunto con la función global fetch de JavaScript. Puedes usar cualquier URL que mencioné, por ahora mostraré 2 ejemplos sencillos.
Consumir API con fetch – Ejemplo 1
Veamos el primer ejemplo. Para ello necesitamos HTML para incluir el script; como es corto, lo colocamos en el mismo archivo y queda así:
Lo único que hacemos es consultar la URL (línea 13), decodificar como JSON e imprimir los resultados. Si ejecutas el archivo y abres la consola con F12 podrás ver el resultado:
Ahora podrías acceder a la propiedad base
, date
o rates
y mostrar los valores, multiplicarlos, etcétera.
Si quieres prueba el resultado aquí.
Mostrar valores en HTML
Debido a que podemos usar JavaScript para manipular el DOM, podemos mostrar a cuánto equivale el dólar en pesos mexicanos.
De manera simple podemos definir dos elementos en donde vamos a descargar los datos. Primero veamos el HTML:
Tenemos dos elementos con id, el primero es la fecha y el segundo el resultado. Ahora veamos el script de JavaScript en donde consultamos la API de cambio de divisas:
Comenzamos definiendo los elementos del DOM. Después invocamos a fetch
y cuando tenemos la respuesta extraemos los valores más importantes como lo son el precio y la fecha.
Más tarde establecemos la propiedad textContent
de los elementos del DOM de tal manera que muestren los resultados; así que se ve así:
Como ves modificamos los elementos HTML y colocamos el tipo de cambio; obviamente esto puede llevarse a cabo de otras formas y se pueden agregar elementos como un input
para hacer un conversor de unidades, etcétera.
Prueba el ejemplo aquí.
Conclusión
No olvides que puedes consumir más datos interesantes; solo cambia la ruta de fetch
y usa los datos de acuerdo a la respuesta.
Mira el tutorial anterior aquí.
Muy bueno, pero las monedas de conversión (symbols) son muy limitadas, por ejemplo para Colombia no existe.