Sesión 2: Desarrollo práctico de un conversor de divisas

Laboratorio 2: Construcción de una página web que permita la conversión de divisas.
El laboratorio 2 consistió, por medio del uso de JavaScript, en elaborar una página web dinámica donde se debía permitir el uso de conversión de divisas con la utilización preferiblemente de una API. La idea principalmente, es brindar una serie de divisas donde el usuario puede seleccionar por medio de un check aquellas que considere como favoritas para posteriormente, realizar la conversión de monedas.
El resultado obtenido fue el siguiente:

• Seleccionar la divisa que se desea convertir.

• Marcar las divisas que se desean transformar según la divisa seleccionada (favoritas).

• Ingresar el valor de la moneda, y automáticamente se efectuan las respectivas conversiones.

• Página web: Convertidor de divisas
• Repositorio de la página web: ConversorDivisas

• Algunos elementos JavaScript incorporados en la construcción de la página web:

• Manejo de DOM y llamada a función:

// Refrescar los labels cuando se selecciona una divisa
function selecDivisa(codigoISO, nombre){
  document.getElementById("paisSeleccionado_span").innerHTML = codigoISO;
  document.getElementById("paisSeleccionado_btn").innerHTML = nombre;
  cerrarPanelDivisas();
}

• Declaración de datos y DOM:

// Insertar elementos en la tabla de favoritos
function insertarItemTablaFav(bandera, codigoISO, simbolo, nombre) {
  var table = document.getElementById("tabla_divisas_favoritas");
  var row = table.insertRow(1);
  var cell_bandera = row.insertCell(0);
  var cell_codigoISO = row.insertCell(1);
  var cell_simbolo = row.insertCell(2);
  var cell_nombre = row.insertCell(3);
  var cell_input = row.insertCell(4);
  cell_bandera.innerHTML = "<img banderas="" class="" codigoiso="" img-rounded="" img="" png="" src="" />";
  cell_codigoISO.innerHTML = codigoISO;
  cell_simbolo.innerHTML = simbolo;
  cell_nombre.innerHTML = nombre;
  cell_input.innerHTML = "" + "0.0" + "<br />
"; //"<input class="" form-control="" name="" placeholder="" search="" text="" type="" />";
}

• Declaración de datos, DOM, ciclo for, sentencia condicional if y llamada a función:

// Encargado de convertir la divisa
function convertirDivisa()
{
  var codigoISOSeleccionado = document.getElementById("paisSeleccionado_span");
  var valorDivisaIngresado = document.getElementById("valorDivisaIngr");
  
  var table, tr, divisaInput, divisaCodigoFav, i;
  table = document.getElementById("tabla_divisas_favoritas");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) 
  {
    divisaInput = tr[i].getElementsByTagName("td")[4];
    divisaCodigoFav = tr[i].getElementsByTagName("td")[1];

    if (divisaInput) 
    {
      servicioDivisas(codigoISOSeleccionado.textContent, divisaCodigoFav.textContent, valorDivisaIngresado.value, divisaInput);
    }
  }
}