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í:

See the gist on github.

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:

See the gist on github.

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:

See the gist on github.

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í.