scripts.js

const Modal = {
  toggle() {
    document.querySelector(".modal-overlay").classList.toggle("active");
  },
};

const Theme = {
  load() {
    const isDark = Storage.get("dev.finances:isDark");
    DOM.loadColorPalette(isDark);
    DOM.loadThemeImage(isDark);
  },

  switch() {
    const isDark = Storage.get("dev.finances:isDark");
    DOM.loadColorPalette(!isDark);
    DOM.loadThemeImage(!isDark);
    Storage.set("dev.finances:isDark", !isDark);
  },
};

const Storage = {
  get(key) {
    return JSON.parse(localStorage.getItem(key)) || false;
  },

  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
};

const Transaction = {
  all: Storage.get("dev.finances:transactions"),

  add(transaction) {
    Transaction.all.push(transaction);
    App.reload();
  },

  remove(index) {
    Transaction.all.splice(index, 1);
    App.reload();
  },

  incomes() {
    let income = 0;
    Transaction.all.forEach((transaction) => {
      if (transaction.amount >= 0) {
        income += transaction.amount;
      }
    });
    return income;
  },

  expenses() {
    let expense = 0;
    Transaction.all.forEach((transaction) => {
      if (transaction.amount < 0) {
        expense += transaction.amount;
      }
    });
    return expense;
  },

  total() {
    return Transaction.incomes() + Transaction.expenses();
  },
};

const DOM = {
  transactionsContainer: document.querySelector("#data-table tbody"),

  addTransaction(transaction, index) {
    const tr = document.createElement("tr");
    tr.innerHTML = DOM.innerHTMLTransaction(transaction, index);
    tr.dataset.index = index;

    DOM.transactionsContainer.appendChild(tr);
  },

  innerHTMLTransaction(transaction, index) {
    const CSSclass = transaction.amount >= 0 ? "income" : "expense";

    const amount = Utils.formatCurrency(transaction.amount);

    const html = `
      <td class="description">${transaction.description}</td>
      <td class="${CSSclass}">${amount}</td>
      <td class="date">${transaction.date}</td>
      <td><img onclick="Transaction.remove(${index})" src="./assets/minus.svg" alt="Remover transação" /></td>
    `;
    return html;
  },

  clearTransactions() {
    DOM.transactionsContainer.innerHTML = "";
  },

  updateBalance() {
    document.getElementById("incomesDisplay").innerHTML = Utils.formatCurrency(
      Transaction.incomes()
    );
    document.getElementById("expensesDisplay").innerHTML = Utils.formatCurrency(
      Transaction.expenses()
    );
    document.getElementById("totalDisplay").innerHTML = Utils.formatCurrency(
      Transaction.total()
    );

    DOM.updateTotalCardColor();
  },

  updateTotalCardColor() {
    const totalCard = document.querySelector(".card.total");
    if (Transaction.total() >= 0) {
      totalCard.classList.add("positive");
      totalCard.classList.remove("negative");
    } else {
      totalCard.classList.add("negative");
      totalCard.classList.remove("positive");
    }
  },

  loadThemeImage(isDark) {
    const switcher = document.getElementById("theme-mode");
    if (isDark == true) {
      switcher.setAttribute("src", "./assets/moon.svg");
    } else {
      switcher.setAttribute("src", "./assets/sun.svg");
    }
  },

  loadColorPalette(isDark) {
    const body = document.querySelector("body");

    if (isDark == true) {
      body.classList.add("dark");
    } else {
      body.classList.remove("dark");
    }
  },
};

const Form = {
  description: document.querySelector("input#description"),
  amount: document.querySelector("input#amount"),
  date: document.querySelector("input#date"),

  getValues() {
    return {
      description: Form.description.value,
      amount: Form.amount.value,
      date: Form.date.value,
    };
  },

  validateField() {
    const { description, amount, date } = Form.getValues();

    if (
      description.trim() === "" ||
      amount.trim() === "" ||
      date.trim() === ""
    ) {
      throw new Error("Por favor, preencha todos os campos.");
    }
  },

  formatValues() {
    let { description, amount, date } = Form.getValues();

    amount = Utils.formatAmount(amount);
    date = Utils.formatDate(date);

    return { description, amount, date };
  },

  clearFields() {
    Form.description.value = "";
    Form.amount.value = "";
    Form.date.value = "";
  },

  submit(event) {
    event.preventDefault();

    try {
      Form.validateField();
      const transaction = Form.formatValues();
      Transaction.add(transaction);
      Form.clearFields();
      Modal.toggle();
    } catch (error) {
      alert(error.message);
    }
  },
};

const Utils = {
  formatCurrency(value) {
    const signal = Number(value) < 0 ? "-" : "";

    value = String(value).replace(/\D/g, "");
    value = Number(value) / 100;
    value = value.toLocaleString("pt-BR", {
      style: "currency",
      currency: "BRL",
    });

    return signal + value;
  },

  formatAmount(value) {
    return Math.round(Number(value) * 100);
  },

  formatDate(date) {
    const splittedDate = date.split("-");
    return `${splittedDate[2]}/${splittedDate[1]}/${splittedDate[0]}`;
  },
};

const App = {
  init() {
    Theme.load();

    Transaction.all.forEach((transaction, index) => {
      DOM.addTransaction(transaction, index)
    });

    DOM.updateBalance();

    Storage.set("dev.finances:transactions", Transaction.all);
  },

  reload() {
    DOM.clearTransactions();
    App.init();
  },
};

App.init();