Excelente!

Vamos criar um exemplo de CRUD (Create, Read, Update, Delete) em

JavaScript para um controle de finanças pessoal, com a funcionalidade de gerar
relatórios por período, utilizando o armazenamento local do navegador (localStorage)
para persistir os dados.

Classe Transacao:

JavaScript

class Transacao {
constructor(id, data, descricao, valor, tipo) {
this.id = id;
this.data = data;
this.descricao = descricao;
this.valor = valor;
this.tipo = tipo; // 'receita' ou 'despesa'
}
}

Classe GerenciadorFinancasLocal:

JavaScript

class GerenciadorFinancasLocal {
constructor(chaveLocalStorage = 'financas') {
this.chave = chaveLocalStorage;
this.inicializar();
}

inicializar() {
if (!localStorage.getItem(this.chave)) {
localStorage.setItem(this.chave, JSON.stringify([]));
}
}

#gerarIdUnico() {
return Date.now().toString(36) + Math.random().toString(36).substring(2, 15);
}

#lerTransacoes() {
const transacoesJSON = localStorage.getItem(this.chave);
return transacoesJSON ? JSON.parse(transacoesJSON) : [];
}

#salvarTransacoes(transacoes) {
localStorage.setItem(this.chave, JSON.stringify(transacoes));
}

adicionarTransacao(data, descricao, valor, tipo) {

 const transacoes = this.#lerTransacoes();
const novaTransacao = new Transacao(this.#gerarIdUnico(), data, descricao,
parseFloat(valor), tipo);
transacoes.push(novaTransacao);
this.#salvarTransacoes(transacoes);
this.atualizarInterface(); // Chamada para atualizar a exibição
}

obterTodasTransacoes() {
return this.#lerTransacoes();
}

obterTransacao(id) {
const transacoes = this.#lerTransacoes();
return transacoes.find(transacao => transacao.id === id);
}

atualizarTransacao(id, novaData, novaDescricao, novoValor, novoTipo) {

const transacoes = this.#lerTransacoes();
const index = transacoes.findIndex(transacao => transacao.id === id);
if (index !== -1) {
if (novaData) transacoes[index].data = novaData;
if (novaDescricao) transacoes[index].descricao = novaDescricao;
if (novoValor) transacoes[index].valor = parseFloat(novoValor);
if (novoTipo) transacoes[index].tipo = novoTipo;
this.#salvarTransacoes(transacoes);
this.atualizarInterface(); // Chamada para atualizar a exibição
return true;
}
return false;
}

removerTransacao(id) {
const transacoes = this.#lerTransacoes();
const transacoesFiltradas = transacoes.filter(transacao => transacao.id !== id);
this.#salvarTransacoes(transacoesFiltradas);
this.atualizarInterface(); // Chamada para atualizar a exibição
return true;
}

gerarRelatorio(dataInicio, dataFim) {
const transacoes = this.#lerTransacoes();
const relatorio = {
receitas: [],
despesas: [],
total_receitas: 0,
total_despesas: 0,
saldo_periodo: 0
};
 transacoes.forEach(transacao => {
if (transacao.data >= dataInicio && transacao.data <= dataFim) {
if (transacao.tipo === 'receita') {
relatorio.receitas.push(transacao);
relatorio.total_receitas += transacao.valor;
} else if (transacao.tipo === 'despesa') {
relatorio.despesas.push(transacao);
relatorio.total_despesas += transacao.valor;
}
}
});

relatorio.saldo_periodo = relatorio.total_receitas - relatorio.total_despesas;

return relatorio;
}

// Métodos para interagir com a interface HTML (serão implementados no HTML/JS)

atualizarInterface() {
// Implementação para atualizar a tabela de transações e o relatório na página HTML
this.exibirTransacoes();
this.exibirRelatorio();
}

exibirTransacoes() {
const tabelaTransacoes = document.getElementById('lista-transacoes');
if (!tabelaTransacoes) return;
tabelaTransacoes.innerHTML = '';
const transacoes = this.obterTodasTransacoes();
if (transacoes.length === 0) {
tabelaTransacoes.innerHTML = '<tr><td colspan="5">Nenhuma transação
registrada.</td></tr>';
return;
}
transacoes.forEach(transacao => {
const row = tabelaTransacoes.insertRow();
row.insertCell().textContent = transacao.id;
row.insertCell().textContent = transacao.data;
row.insertCell().textContent = transacao.descricao;
row.insertCell().textContent = parseFloat(transacao.valor).toFixed(2);
row.insertCell().textContent = transacao.tipo;
const acoesCell = row.insertCell();
const botaoEditar = document.createElement('button');
botaoEditar.textContent = 'Editar';
botaoEditar.addEventListener('click', () => this.preencherFormularioEdicao(transacao.id));
acoesCell.appendChild(botaoEditar);
const botaoExcluir = document.createElement('button');
botaoExcluir.textContent = 'Excluir';
botaoExcluir.addEventListener('click', () => this.removerTransacao(transacao.id));
acoesCell.appendChild(botaoExcluir);
});
 }

exibirRelatorio(dataInicioRelatorio = '2025-04-01', dataFimRelatorio = '2025-04-30') {

const relatorio = this.gerarRelatorio(dataInicioRelatorio, dataFimRelatorio);
const receitasLista = document.getElementById('relatorio-receitas');
const despesasLista = document.getElementById('relatorio-despesas');
const totalReceitas = document.getElementById('total-receitas');
const totalDespesas = document.getElementById('total-despesas');
const saldoPeriodo = document.getElementById('saldo-periodo');

if (receitasLista) {
receitasLista.innerHTML = relatorio.receitas.map(r => `<li>${r.data}: ${r.descricao} -
${parseFloat(r.valor).toFixed(2)}</li>`).join('');
}
if (despesasLista) {
despesasLista.innerHTML = relatorio.despesas.map(d => `<li>${d.data}: ${d.descricao} -
${parseFloat(d.valor).toFixed(2)}</li>`).join('');
}
if (totalReceitas) {
totalReceitas.textContent = parseFloat(relatorio.total_receitas).toFixed(2);
}
if (totalDespesas) {
totalDespesas.textContent = parseFloat(relatorio.total_despesas).toFixed(2);
}
if (saldoPeriodo) {
saldoPeriodo.textContent = parseFloat(relatorio.saldo_periodo).toFixed(2);
}
}

preencherFormularioEdicao(id) {
const transacao = this.obterTransacao(id);
if (transacao) {
document.getElementById('editar-id').value = transacao.id;
document.getElementById('editar-data').value = transacao.data;
document.getElementById('editar-descricao').value = transacao.descricao;
document.getElementById('editar-valor').value = transacao.valor;
document.getElementById('editar-tipo').value = transacao.tipo;
document.getElementById('modal-editar').style.display = 'block';
}
}

salvarEdicaoTransacao() {
const id = document.getElementById('editar-id').value;
const data = document.getElementById('editar-data').value;
const descricao = document.getElementById('editar-descricao').value;
const valor = document.getElementById('editar-valor').value;
const tipo = document.getElementById('editar-tipo').value;
this.atualizarTransacao(id, data, descricao, valor, tipo);
document.getElementById('modal-editar').style.display = 'none';
}
 fecharModalEditar() {
document.getElementById('modal-editar').style.display = 'none';
}
}

// Inicialização do gerenciador
const gerenciadorFinancas = new GerenciadorFinancasLocal();

// Funções para interação com o formulário (no HTML)

document.addEventListener('DOMContentLoaded', () => {
gerenciadorFinancas.exibirTransacoes();
gerenciadorFinancas.exibirRelatorio();

const formularioAdicionar = document.getElementById('form-adicionar');

if (formularioAdicionar) {
formularioAdicionar.addEventListener('submit', function(event) {
event.preventDefault();
const data = document.getElementById('data').value;
const descricao = document.getElementById('descricao').value;
const valor = document.getElementById('valor').value;
const tipo = document.getElementById('tipo').value;
gerenciadorFinancas.adicionarTransacao(data, descricao, valor, tipo);
formularioAdicionar.reset();
});
}

const formularioEditar = document.getElementById('form-editar');

if (formularioEditar) {
formularioEditar.addEventListener('submit', function(event) {
event.preventDefault();
gerenciadorFinancas.salvarEdicaoTransacao();
});
}

const botaoFecharModal = document.getElementById('fechar-modal');

if (botaoFecharModal) {
botaoFecharModal.addEventListener('click',
gerenciadorFinancas.fecharModalEditar.bind(gerenciadorFinancas));
}

const botaoGerarRelatorio = document.getElementById('gerar-relatorio-btn');

if (botaoGerarRelatorio) {
botaoGerarRelatorio.addEventListener('click', () => {
const dataInicioRelatorio = document.getElementById('relatorio-inicio').value;
const dataFimRelatorio = document.getElementById('relatorio-fim').value;
gerenciadorFinancas.exibirRelatorio(dataInicioRelatorio, dataFimRelatorio);
});
}
});
Estrutura HTML (exemplo básico):

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controle de Finanças Pessoal</title>
<style>
/* Estilos básicos */
body { font-family: sans-serif; }
h2, h3 { margin-top: 20px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
form label { display: block; margin-bottom: 5px; }
form input[type="text"], form input[type="number"], form input[type="date"], form select {
width: 100%; padding: 8px; margin-bottom: 10px; box-sizing: border-box; }
button { padding: 10px 15px; cursor: pointer; margin-right: 5px; }
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%;
overflow: auto; background-color: rgba(0,0,0,0.4); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px
solid #888; width: 80%; }
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer;
}
</style>
</head>
<body>
<h1>Controle de Finanças Pessoal</h1>

<h2>Adicionar Transação</h2>
<form id="form-adicionar">
<label for="data">Data:</label>
<input type="date" id="data" required>

<label for="descricao">Descrição:</label>
<input type="text" id="descricao" required>

<label for="valor">Valor:</label>
<input type="number" id="valor" step="0.01" required>

<label for="tipo">Tipo:</label>
<select id="tipo" required>
<option value="receita">Receita</option>
<option value="despesa">Despesa</option>
</select>
 <button type="submit">Adicionar</button>
</form>

<h2>Lista de Transações</h2>
<table id="lista-transacoes">
<thead>
<tr>
<th>ID</th>
<th>Data</th>
<th>Descrição</th>
<th>Valor</th>
<th>Tipo</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<h2>Gerar Relatório</h2>
<div>
<label for="relatorio-inicio">Data de Início:</label>
<input type="date" id="relatorio-inicio">
<label for="relatorio-fim">Data de Fim:</label>
<input type="date" id="relatorio-fim">
<button id="gerar-relatorio-btn">Gerar Relatório</button>
</div>

<h3>Relatório do Período</h3>
<div>
<h4>Receitas:</h4>
<ul id="relatorio-receitas"></ul>
<p><strong>Total de Receitas:</strong> <span id="total-receitas">0.00</span></p>
</div>
<div>
<h4>Despesas:</h4>
<ul id="relatorio-despesas"></ul>
<p><strong>Total de Despesas:</strong> <span id="total-despesas">0.00</span></p>
</div>
<div>
<h3>Saldo do Período: <span id="saldo-periodo">0.00</span></h3>
</div>

<div id="modal-editar" class="modal">

<div class="modal-content">
<span id="fechar-modal" class="close-button">&times;</span>
<h2>Editar Transação</h2>
<form id="form-editar">
<input type="hidden" id="editar-id">
 <label for="editar-data">Data:</label>
<input type="date" id="editar-data" required>

<label for="editar-descricao">Descrição:</label>
<input type="text" id="editar-descricao" required>

<label for="editar-valor">Valor:</label>
<input type="number" id="editar-valor" step="0.01" required>

<label for="editar-tipo">Tipo:</label>
<select id="editar-tipo" required>
<option value="receita">Receita</option>
<option value="despesa">Despesa</option>
</select>

<button type="submit">Salvar Edição</button>

</form>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

Arquivo script.js (onde o código JavaScript acima estará):

1.​ Salve o código JavaScript em um arquivo chamado script.js no mesmo
diretório do seu arquivo HTML.
2.​ Abra o arquivo HTML (index.html ou o nome que você escolher) no seu
navegador.

Explicação:
1.​ Transacao Class: Representa uma transação financeira com propriedades
como id, data, descricao, valor e tipo.​

2.​ GerenciadorFinancasLocal Class:​

○​ constructor(): Inicializa o gerenciador e a chave para o localStorage.

○​ inicializar(): Cria a chave no localStorage com um array vazio se não
existir.
○​ #gerarIdUnico(): Um método privado para gerar IDs únicos para cada
transação.
○​ #lerTransacoes(): Método privado para ler as transações do localStorage e
convertê-las para objetos JavaScript.
○​ #salvarTransacoes(): Método privado para salvar o array de transações
no localStorage como JSON.
○​ adicionarTransacao(): Cria uma nova transação