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í.
Muy bueno, pero las monedas de conversión (symbols) son muy limitadas, por ejemplo para Colombia no existe.