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:

Consultando tipo de cambio con JavaScript y API

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.

Relacionado:  2 maneras de invertir arreglos en JavaScript

Más tarde establecemos la propiedad textContent de los elementos del DOM de tal manera que muestren los resultados; así que se ve así:

Mostrando precio del dólar hoy con JavaScript (según MXN)

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


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 579 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

1 Comment

Alexander Flórez · junio 18, 2020 a las 4:05 pm

Muy bueno, pero las monedas de conversión (symbols) son muy limitadas, por ejemplo para Colombia no existe.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: