Implementando o Resumo

Introdução

Neste laboratório, ambientado no agitado cenário de startups do "Vale da FinTech", você se colocará no lugar de Alex, um engenheiro de software em ascensão encarregado de aprimorar o sistema de rastreamento financeiro de uma empresa de tecnologia em rápido crescimento. A equipe financeira da empresa precisa de uma maneira dinâmica de visualizar a saúde financeira geral da organização. Seu objetivo é implementar um recurso em seu aplicativo de contabilidade baseado na web existente que calcule e exiba a receita total, as despesas totais e o saldo líquido, fornecendo informações financeiras em tempo real.

Pontos de Conhecimento:

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

Filtrar e Reduzir

Os métodos Array.prototype.filter() e Array.prototype.reduce() do JavaScript são ferramentas poderosas para manipulação de arrays, tornando o processamento de dados mais eficiente e conciso. Esses métodos são usados para filtrar elementos em um array e para acumular valores de elementos de array, respectivamente.

Filter

O método filter() cria um novo array com todos os elementos que passam no teste implementado pela função fornecida. Ele não altera o array original, mas retorna um novo array.

Sintaxe:

let result = array.filter(function (element, index, array) {
  // Condição de teste
  return true; // ou false
});

• element: O elemento atual sendo processado no array.
• index (opcional): O índice do elemento atual.
• array (opcional): O array no qual filter é chamado.

Por exemplo, filtrando números maiores que 10.

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

Reduce

O método reduce() executa uma função redutora (que você fornece) em cada elemento do array, resultando em um único valor de saída.

Sintaxe:

let result = array.reduce(function (
  accumulator,
  currentValue,
  currentIndex,
  array
) {
  // Retorna o resultado acumulado
  return accumulator + currentValue;
}, initialValue);

• accumulator: Acumula os valores de retorno do callback; é o valor acumulado retornado anteriormente na última invocação do callback, ou initialValue, se fornecido.
• currentValue: O elemento atual sendo processado no array.
• currentIndex (opcional): O índice do elemento atual sendo processado.
• array (opcional): O array no qual reduce foi chamado.

Por exemplo, calculando a soma de todos os números em um array.

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

Com o uso desses dois métodos em mente, o próximo passo é calcular o total de sua receita e despesa.

Implementar a Lógica de Cálculo do Resumo

Nesta etapa, você implementará a lógica para calcular a receita total, as despesas totais e o saldo. Isso envolve adicionar funções JavaScript que iteram sobre os registros de transações, somam a receita e as despesas e calculam o saldo líquido.

Escreva o seguinte em 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}`;
  };

  // Function to save records to localStorage and update the UI
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
    updateSummary();
  };
  renderRecords();
  updateSummary();
});

Esta função JavaScript, updateSummary, calcula a receita total e as despesas a partir do array records e atualiza o saldo. Em seguida, ela atualiza o conteúdo de texto dos respectivos elementos HTML na seção de resumo.

Resumo

Neste laboratório, você embarcou em uma jornada pelo cenário financeiro de uma startup na "FinTech Valley". Você desempenhou o papel de Alex, aprimorando uma ferramenta de contabilidade baseada na web para fornecer resumos financeiros em tempo real. Ao integrar um recurso de resumo dinâmico, você permitiu que a equipe financeira obtivesse insights imediatos sobre a situação financeira da empresa, ilustrando o poder de combinar HTML, CSS e JavaScript para criar aplicações web interativas e informativas. Através desta experiência, você aprendeu a manipular o DOM usando JavaScript e aprimorou sua compreensão do desenvolvimento de aplicações do mundo real.