Proyecto conversor de divisas usando una API con JavaScript

Accediendo a los inputs

  • Comprobaremos este enlace a la API con el valor actual de diferentes divisas respecto al euro.

  • Crearemos un campo dataset en cada input con el valor al cambio con el nombre que queramos:

index.html

<input class="valor" type="number" data-cambio="1"/>
<input class="valor" type="number" data-cambio="1.125"/>
<input class="valor" type="number" data-cambio="125.86"/> 
<input class="valor" type="number" data-cambio="0.8647"/> 
  • Crearemos un script para establecer los valores iniciales de los inputs usando el método forEach que tienen los arrays en JavaScript:

scripts.js

let inputs = document.querySelectorAll(".valor");
inputs.forEach(function mostrarValor(input) {
  console.log(input.value);           // mostramos el valor
  console.log(input.dataset.cambio);  // mostramos el cambio
});
  • La función puede ser anónima, sin tener nombre:
inputs.forEach(function (input) {
  • Incluso se puede simplificar a una función flecha:
inputs.forEach((input) => {
  • Como vemos nos sobra un paréntesis:
inputs.forEach(input => {
  • Finalmente trasladamos el código JavaScript a un fichero scripts.js separado y lo cargamos justo antes de cerrar el body:
<script src="scripts.js" type="text/javascript"></script>