Implementando el resumen

Introducción

En este laboratorio, situado en el bullicioso entorno de startups de "FinTech Valley", te convertirás en Alex, un joven ingeniero de software encargado de mejorar el sistema de seguimiento financiero de una empresa tecnológica en rápido crecimiento. El equipo financiero de la empresa necesita una forma dinámica de visualizar la salud financiera general de la organización. Tu objetivo es implementar una característica en su aplicación de contabilidad basada en la web existente que calcule y muestre el ingreso total, los gastos totales y el balance neto, brindando información financiera en tiempo real.

Puntos de conocimiento:

• Array.prototype.filter()
• Array.prototype.reduce()

Filtrar y reducir

Los métodos Array.prototype.filter() y Array.prototype.reduce() de JavaScript son herramientas poderosas para la manipulación de arrays, lo que hace que el procesamiento de datos sea más eficiente y conciso. Estos métodos se utilizan para filtrar elementos en un array y para acumular valores de elementos de array, respectivamente.

Filtrar

El método filter() crea un nuevo array con todos los elementos que pasan la prueba implementada por la función proporcionada. No modifica el array original, sino que devuelve un nuevo array.

Sintaxis:

let result = array.filter(function (element, index, array) {
  // Condición de prueba
  return true; // o false
});

• element: El elemento actual que se está procesando en el array.
• index (opcional): El índice del elemento actual.
• array (opcional): El array en el que se llama a filter.

Por ejemplo, filtrar números mayores que 10.

let numbers = [5, 12, 8, 130, 44];
let filtered = numbers.filter(function (number) {
  return number > 10;
});
console.log(filtered); // Salida: [12, 130, 44]

Reducir

El método reduce() ejecuta una función reductora (que proporcionas) en cada elemento del array, lo que da como resultado un solo valor de salida.

Sintaxis:

let result = array.reduce(function (
  acumulador,
  valorActual,
  índiceActual,
  array
) {
  // Devuelve el resultado acumulado
  return acumulador + valorActual;
}, valorInicial);

• acumulador: Acumula los valores devueltos por la devolución de llamada; es el valor acumulado devuelto previamente en la última invocación de la devolución de llamada, o valorInicial, si se proporciona.
• valorActual: El elemento actual que se está procesando en el array.
• índiceActual (opcional): El índice del elemento actual que se está procesando.
• array (opcional): El array en el que se llamó a reduce.

Por ejemplo, calcular la suma de todos los números en un array.

let numbers = [5, 12, 8, 130, 44];
let total = numbers.reduce(function (acumulador, number) {
  return acumulador + number;
}, 0);
console.log(total); // Salida: 199

Teniendo en cuenta el uso de estos dos métodos, el siguiente paso es calcular el total de tus ingresos y gastos.

Implementar la lógica de cálculo resumido

En este paso, implementarás la lógica para calcular el ingreso total, los gastos totales y el balance. Esto implica agregar funciones de JavaScript que recorran los registros de transacciones, sumen los ingresos y gastos y calculen el balance neto.

Escribe lo siguiente en script.js:

document.addEventListener("DOMContentLoaded", function () {
  const updateSummary = () => {
    const totalIncome = records
      .filter((record) => record.type === "income")
      .reduce((acc, record) => acc + parseFloat(record.amount), 0);
    const totalExpense = records
      .filter((record) => record.type === "expense")
      .reduce((acc, record) => acc + parseFloat(record.amount), 0);
    const balance = totalIncome - totalExpense;

    totalIncomeEl.textContent = `Total Income: ${totalIncome}`;
    totalExpenseEl.textContent = `Total Expense: ${totalExpense}`;
    balanceEl.textContent = `Balance: ${balance}`;
  };

  // Función para guardar los registros en localStorage y actualizar la interfaz de usuario
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
    updateSummary();
  };
  renderRecords();
  updateSummary();
});

Esta función de JavaScript, updateSummary, calcula el ingreso total y los gastos a partir del array de registros y actualiza el balance. Luego, actualiza el contenido de texto de los elementos HTML respectivos en la sección resumen.

Resumen

En este laboratorio, has emprendido un viaje por el panorama financiero de una empresa de startups en "FinTech Valley". Has desempeñado el papel de Alex, mejorando una herramienta de contabilidad basada en la web para proporcionar resúmenes financieros en tiempo real. Al integrar una característica de resumen dinámica, has permitido al equipo financiero obtener rápidas informaciones sobre el estado financiero de la empresa, lo que demuestra el poder de combinar HTML, CSS y JavaScript para crear aplicaciones web interactivas e informativas. A través de esta experiencia, has aprendido cómo manipular el DOM utilizando JavaScript y has mejorado tu comprensión del desarrollo de aplicaciones en el mundo real.