JavaScript – API para conversión de divisas

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Probando API de divisas</title>
    </head>
    <body>
        Abre la consola
        <script>
        console.log("Consultando...");
        fetch("https://api.exchangeratesapi.io/latest?base=USD&symbols=MXN")
        .then(respuesta => respuesta.json())
        .then(respuestaDecodificada => {
            console.log(respuestaDecodificada);
        });
    </script>
    </body>
</html>

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:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Probando API de divisas</title>
    </head>
    <body>
        El dólar en la fecha <span id="fecha"></span> (USD) equivale a
        <strong id="resultado"></strong> MXN
        <script src="script.js"></script>
    </body>
</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:

const $resultado = document.querySelector("#resultado"),
    $fecha = document.querySelector("#fecha");

fetch("https://api.exchangeratesapi.io/latest?base=USD&symbols=MXN")
    .then(respuesta => respuesta.json())
    .then(respuestaDecodificada => {
        const precioDolarHoyEnMXN = respuestaDecodificada.rates.MXN;
        const fechaActualizacion = respuestaDecodificada.date;
        $fecha.textContent = fechaActualizacion;
        $resultado.textContent = precioDolarHoyEnMXN;
    });

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

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

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/

Siguiente C - Número múltiplo de otro »

Anterior « API de cambio de divisas | exchangeratesapi

Ver comentarios

Alexander Flórez dice:

junio 18, 2020 en 4:05 pm

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