script.js

const toggleModal = function() {
    document
      .querySelector('.modal-overlay')
      .classList
      .toggle('active')
}

const Storage = {
  get() {
    return JSON.parse(localStorage.getItem("youfinance:transactions")) || []
  },

  set(transactions) {
    localStorage.setItem("youfinance:transactions", 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((transaction) => {
      if(transaction.amount > 0) {
        income = income + transaction.amount
      }
    })
    return income
  },
  expenses() {
    let expense = 0
    Transaction.all.forEach((transaction) => {
      if(transaction.amount < 0) {
        expense = expense + transaction.amount
      }
    })
    return expense
  },
  total() {
    return Transaction.incomes() + Transaction.expenses()
  }
}

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 DOM = {
  transactionsContainer: document.querySelector('#data-table tbody'),

  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="Remove   transaction">
    </td>
    `

    return html;
  },

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

    DOM.transactionsContainer.appendChild(tr)
  },

  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 App = {

  init() {
    Transaction.all.forEach(DOM.addTransaction)
    DOM.updateBalance()
    Storage.set(Transaction.all)
  },

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

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,
    }
  },

  validateFields() {
    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
    }
  },

  saveTransaction(transaction) {
    Transaction.add(transaction)
  },

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

  submit(event) {
    event.preventDefault()

    try {
      Form.validateFields()
      const transaction = Form.formatValues()
      Form.saveTransaction(transaction)
      Form.clearFields()
      toggleModal()

    } catch (error) {
      alert(error.message)
    }
  }
}

App.init()