script.js

// Seleciona os elementos do formulario | Obtendo os dados do formulario
const form = document.querySelector("form");
const amount = document.getElementById("amount");
const expense = document.getElementById("expense");
const category = document.getElementById("category");

// Seleciona os elementos da lista
const expenseList = document.querySelector("ul");
const expensesTotal = document.querySelector("aside header h2");
const expenseQuantity = document.querySelector("aside header p span");

// Captura o evento de input para formatar o valor.
amount.oninput = () => {
  // Obtem valor atual do input e remove os caracteres nao numericos.
  let value = amount.value.replace(/\D/g, "");

  // Tranformar o valor em centavos (exemplo: 150/100 = 1.5 equivalente a R$ 1,50)
  value = Number(value) / 100;

  // Atualiza o valor do input
  amount.value = formatCurrencyBRL(value);
};

// Funcao que formata o valor para o padrao BRL
function formatCurrencyBRL(value) {
  // Formata o valor no padrao BRL
  value = value.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL",
  });

  // Retorna o valor formatado
  return value;
}

// Captura o evento de submit de formulario para obter os valores.
form.onsubmit = (e) => {
  // Previne o comportamento padrao de recarregar a pagina
  e.preventDefault();

  // Cria um objeto com os detalhes na nova despesa.
  const newExpense = {
    id: new Date().getTime(),
    expense: expense.value,
    category_id: category.value,
    category_name: category.options[category.selectedIndex].text,
    amount: amount.value,
    create_at: new Date(),
  };

  console.log(newExpense);
  expenseAdd(newExpense);
};

// Adiciona um novo item na lista
function expenseAdd(newExpense) {
  try {
    // Cria o elemento para adicionar o item (li) na lista (ul).
    const expenseItem = document.createElement("li");
    expenseItem.classList.add("expense");

    // Cria o icone da categoria
    const expenseIcon = document.createElement("img");
    expenseIcon.setAttribute("src", `img/${newExpense.category_id}.svg`);
    expenseIcon.setAttribute("alt", newExpense.category_name);

    // Criar a informacao da despesa
    const expenseInfo = document.createElement("div");
    expenseInfo.classList.add("expense-info");

    // Criar o nome da despesa.
    const expenseName = document.createElement("strong");
    expenseName.textContent = newExpense.expense;

    // Criar a categoria da despesa.
    const expenseCategory = document.createElement("span");
    expenseCategory.textContent = newExpense.category_name;

    // Adiciona nome e categoria na div das informacoes da despesa.
    expenseInfo.append(expenseName, expenseCategory);

    // Criar o valor da despesa.
    const expenseAmount = document.createElement("span");
    expenseAmount.classList.add("expense-amount");
    expenseAmount.innerHTML = `<small>R$</small>${newExpense.amount.replace("R$", "")}`;

    // Criar o icone de remover
    const removeIcon = document.createElement("img");
    removeIcon.classList.add("remove-icon");
    removeIcon.setAttribute("src", "img/remove.svg");
    removeIcon.setAttribute("alt", "remover");

    // Adiciona as informacoes no item.
    expenseItem.append(expenseIcon, expenseInfo, expenseAmount, removeIcon);

    // Adiciona o item na lista
    expenseList.append(expenseItem);

    // Limpa o formulario para adicionar um novo item.
    formClear();

    // Atualiza os totais
    updateTotals();
  } catch (error) {
    alert("Nao foi possivel atualizar a lista de despesas.");
    console.error(error);
  }
}

// Atualiza os totais.
function updateTotals() {
  try {
    // Recupera todos os itens (li) da lista (ul)
    const items = expenseList.children;

    // Atualiza a quantidade de itens da lista
    expenseQuantity.textContent = `${items.length} ${items.length > 1 ? "despesas" : "despesa"}`;

    // Variavel para incrementar o total
    let total = 0;
    // Percorre cada item (li) da lista (ul)
    for (let item = 0; item < items.length; item++) {
      const itemAmount = items[item].querySelector(".expense-amount");

      // Remover caracteres nao numericos e substitui a virgula pelo ponto.
      let value = itemAmount.textContent
        .replace(/[^\d,]/g, "")
        .replace(",", ".");

      // Converte o valor para float
      value = parseFloat(value);

      // Verifica se eh um numero valido
      if (isNaN(value)) {
        return alert(
          "Nao foi possivel calcular o total. O valor nao parece ser um numero",
        );
      }
      // Incrementar o valor total.
      total += Number(value);
    }

    // Cria a span para adicionar o R$ formatado.
    const symbolBRL = document.createElement("small");
    symbolBRL.textContent = "R$";

    // Formata o valor e remove o R$ que sera exibido pela small com um estilo customizado
    total = formatCurrencyBRL(total).toUpperCase().replace("R$", "");

    // Limpa o conteudo do elemento
    expensesTotal.innerHTML = "";

    // Adiciona o simbolo da moeda e o valor total formatado
    expensesTotal.append(symbolBRL, total);
  } catch (error) {
    alert("Nao foi possivel atualizar os totais");
    console.log(error);
  }
}

// Evento que captura o clique nos itens da lista.
expenseList.addEventListener("click", (e) => {
  // Verifica se o elemento clicado eh o icone de remover.
  if (e.target.classList.contains("remove-icon")) {
    // Obtem a li pai do elemento clicado.
    const item = e.target.closest(".expense"); // .closest -> o pai mais proximo

    // Remove o item da lista
    item.remove();
    console.log(e);
  }

  // Atualiza os totais da lista
  updateTotals();
});

function formClear() {
  // Limpa os inputs.
  expense.value = "";
  category.value = "";
  amount.value = "";

  // // Coloca o foco no input de amount.
  // expense.focus();
}