Mise en œuvre du bilan

Introduction

Dans ce laboratoire, situé dans la dynamique scène des startups du "FinTech Valley", vous allez prendre la place d'Alex, un jeune ingénieur logiciel chargé d'améliorer le système de suivi financier d'une société de technologies en rapide croissance. L'équipe financière de l'entreprise a besoin d'un moyen dynamique de visualiser l'état financier global de l'organisation. Votre objectif est d'implémenter une fonctionnalité dans leur application de comptabilité basée sur le web existante qui calcule et affiche le revenu total, les dépenses totales et le solde net, fournissant des informations financières en temps réel.

Points de connaissance:

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

Skills Graph

Filter and Reduce

Les méthodes Array.prototype.filter() et Array.prototype.reduce() de JavaScript sont des outils puissants pour la manipulation d'ensembles, rendant le traitement des données plus efficace et concise. Ces méthodes sont respectivement utilisées pour filtrer les éléments d'un ensemble et pour accumuler les valeurs des éléments d'un ensemble.

Filter

La méthode filter() crée un nouvel ensemble avec tous les éléments qui passent le test implémenté par la fonction fournie. Elle ne modifie pas l'ensemble original mais renvoie un nouvel ensemble.

Syntaxe :

let result = array.filter(function (element, index, array) {
  // Condition de test
  return true; // ou false
});

• element : L'élément actuel en cours de traitement dans l'ensemble.
• index (optionnel) : L'index de l'élément actuel.
• array (optionnel) : L'ensemble sur lequel filter est appelé.

Par exemple, filtrer les nombres supérieurs à 10.

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

Reduce

La méthode reduce() exécute une fonction réductrice (que vous fournissez) sur chaque élément de l'ensemble, donnant en résultat une seule valeur de sortie.

Syntaxe :

let result = array.reduce(function (
  accumulator,
  currentValue,
  currentIndex,
  array
) {
  // Retourner le résultat accumulé
  return accumulator + currentValue;
}, initialValue);

• accumulator : Accumule les valeurs de retour de la fonction de rappel ; c'est la valeur accumulée précédemment renvoyée dans la dernière invocation de la fonction de rappel, ou initialValue, si elle est fournie.
• currentValue : L'élément actuel en cours de traitement dans l'ensemble.
• currentIndex (optionnel) : L'index de l'élément actuel en cours de traitement.
• array (optionnel) : L'ensemble sur lequel reduce a été appelé.

Par exemple, calculer la somme de tous les nombres d'un ensemble.

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

Ayant à l'esprit l'utilisation de ces deux méthodes, l'étape suivante consiste à calculer le total de vos revenus et dépenses.

Implémenter la logique de calcul du bilan

Dans cette étape, vous allez implémenter la logique pour calculer le revenu total, les dépenses totales et le solde. Cela implique d'ajouter des fonctions JavaScript qui parcourent les enregistrements des transactions, additionnent les revenus et les dépenses et calculent le solde net.

Écrivez ce qui suit dans 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();
});

Cette fonction JavaScript, updateSummary, calcule le revenu total et les dépenses à partir du tableau records et met à jour le solde. Elle met ensuite à jour le contenu textuel des éléments HTML respectifs dans la section de synthèse.

Synthèse

Dans ce laboratoire, vous avez entrepris un voyage dans le paysage financier d'une startup du "FinTech Valley". Vous avez joué le rôle d'Alex, améliorant un outil de comptabilité basé sur le web pour fournir des synthèses financières en temps réel. En intégrant une fonction de synthèse dynamique, vous avez permis à l'équipe financière de prendre immédiatement connaissance de l'état financier de l'entreprise, illustrant le pouvoir de la combinaison de HTML, CSS et JavaScript pour créer des applications web interactives et informatives. Grâce à cette expérience, vous avez appris à manipuler le DOM à l'aide de JavaScript et amélioré votre compréhension du développement d'applications dans le monde réel.