text: const Modal = {
      open() {
        document.querySelector('.modal-overlay').classList.add('active');
      },
    
      close() {
        document.querySelector('.modal-overlay').classList.remove('active');
      }
    };
    
    const Storage = {
      key: 'dev.finances:transactions',
    
      get() {
        const storedTransactions = JSON.parse(localStorage.getItem(Storage.key));
    
        if (Array.isArray(storedTransactions)) {
          return storedTransactions;
        } else {
          return [];
        }
      },
    
      set(transactions) {
        localStorage.setItem(Storage.key, JSON.stringify(transactions));
      }
    };
    
    const Transaction = {
      all: Storage.get(),
    
      add(transaction) {
        Transaction.all.push(transaction);
        App.reload();
      },
    
      remove(index) {
        Transaction.all.splice(index, 1);
        App.reload();
      },
    
      incomes() {
        let income = 0;
    
        Transaction.all.forEach(function (transaction) {
          if (transaction.amount > 0) {
            income += transaction.amount;
          }
        });
    
        return income;
      },
    
      expenses() {
        let expense = 0;
    
        Transaction.all.forEach(function (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 alt="Remover transação" onclick="Transaction.remove(${index})" src="assets/minus.svg" /></td>
        `;
    
        return html;
      },
    
      updateBalance() {
        document.getElementById('incomeDisplay').innerHTML = Utils.formatCurrency(
          Transaction.incomes()
        );
        document.getElementById('expenseDisplay').innerHTML = Utils.formatCurrency(
          Transaction.expenses()
        );
        document.getElementById('totalDisplay').innerHTML = Utils.formatCurrency(
          Transaction.total()
        );
      },
    
      clearTransactions() {
        DOM.transactionsContainer.innerHTML = '';
      }
    };
    
    const Utils = {
      formatAmount(value) {
        value = value * 100;
    
        return Math.round(value);
      },
    
      formatDate(date) {
        const splittedDate = date.split('-');
    
        return `${splittedDate[2]}/${splittedDate[1]}/${splittedDate[0]}`;
      },
    
      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;
      }
    };
    
    const App = {
      init() {
        Transaction.all.forEach(DOM.addTransaction);
    
        DOM.updateBalance();
    
        Storage.set(Transaction.all);
      },
    
      reload() {
        DOM.clearTransactions();
        App.init();
      }
    };
    
    const Form = {
      description: document.querySelector('#description'),
      amount: document.querySelector('#amount'),
      date: document.querySelector('#date'),
    
      getValues() {
        return {
          description: Form.description.value,
          amount: Form.amount.value,
          date: Form.date.value
        };
      },
    
      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 = '';
      },
    
      validateFields() {
        const { description, amount, date } = Form.getValues();
    
        if (
          description.trim() === '' ||
          amount.trim() === '' ||
          date.trim() === ''
        ) {
          throw new Error('Por favor, preencha todos os campos');
        }
      },
    
      submit(event) {
        event.preventDefault();
    
        try {
          Form.validateFields();
    
          const transaction = Form.formatValues();
    
          Transaction.add(transaction);
    
          Form.clearFields();
          Modal.close();
        } catch (error) {
          alert(error.message);
        }
      }
    };
    
    App.init();