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.
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.
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í.
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í.
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í.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios
Muy bueno, pero las monedas de conversión (symbols) son muy limitadas, por ejemplo para Colombia no existe.