Refund - Sistema de Reembolso

Este é um projeto de uma aplicação para gestão de solicitações de reembolso, desenvolvido durante o curso de JavaScript da Rocketseat. A aplicação permite adicionar despesas, categorizá-las, visualizar uma lista dinâmica de solicitações e acompanhar o total acumulado em tempo real.

🚀 Tecnologias Utilizadas

• HTML5: Estrutura da página e formulários.
• CSS3: Estilização moderna e responsiva.
• JavaScript (ES6+): Lógica da aplicação e manipulação dinâmica do conteúdo.

🧠 Conceitos de JavaScript Aplicados

O projeto foi construído utilizando conceitos fundamentais e avançados de JavaScript para garantir uma experiência de usuário fluida.

1. DOM (Document Object Model)

A manipulação do DOM é o coração deste projeto. O JavaScript interage com o HTML para capturar dados e atualizar a interface.

• Seleção de Elementos: Utilização de querySelector e getElementById.
• Criação Dinâmica: Uso de document.createElement para gerar novos itens de despesa na lista.
• Eventos: Captura de eventos como onsubmit (formulário), oninput (formatação em tempo real) e addEventListener (delegação de eventos para remoção de itens).

const form = document.querySelector("form");
const expenseList = document.querySelector("ul");

2. Functions (Funções)

As funções foram utilizadas para organizar a lógica em blocos reutilizáveis e especializados, como formatação de moeda, adição de itens e atualização de totais.

• Funções Nomeadas: formatCurrencyBRL, expenseAdd, updateTotals.
• Arrow Functions: Utilizadas em manipuladores de eventos.

function formatCurrencyBRL(value) {
  return value.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL",
  });
}

3. Repetição e Iteração

Para calcular o valor total das despesas, a aplicação percorre todos os itens da lista dinamicamente.

• Laço For: Utilizado para iterar sobre os elementos filhos (li) da lista de despesas e somar seus valores.

for (let item = 0; item < items.length; item++) {
  const itemAmount = items[item].querySelector(".expense-amount");
  // Lógica de soma...
}

4. Métodos de Texto (Strings)

Métodos de manipulação de strings e Expressões Regulares (RegEx) foram essenciais para tratar os dados de entrada e formatar a exibição.

• .replace(): Utilizado para remover caracteres não numéricos (/\D/g) e formatar valores monetários.
• .toUpperCase(): Para padronização visual.
• Template Literals: Para construção dinâmica de caminhos de imagens e classes HTML.

let value = amount.value.replace(/\D/g, "");

5. Objetos

Os dados de cada despesa são estruturados em objetos, facilitando o transporte e a organização das informações entre as funções.

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

🛠️ Funcionalidades

• Formatação de Moeda: O campo de valor formata automaticamente enquanto o usuário digita (padrão BRL).
• Adição de Despesas: Adiciona itens à lista com ícone correspondente à categoria.
• Cálculo Automático: Atualiza a quantidade de itens e o valor total sempre que uma despesa é adicionada ou removida.
• Remoção de Itens: Permite excluir solicitações da lista clicando no ícone de lixeira.
• Tratamento de Erros: Feedback ao usuário através de try...catch e alertas.

🏁 Como Executar

1. Clone este repositório.
2. Abra o arquivo index.html diretamente no seu navegador ou utilize uma extensão como a Live Server no VS Code.

---

Projeto desenvolvido para fins de estudo e prática de fundamentos de JavaScript.