Passo 1: A estrutura e o array de despesas
Todo painel de controle começa com dados. Aqui, cada despesa é um objeto, e a lista inteira nasce de um array.
Estudar esta lição interativa →Último projeto do curso, e o mais completo de todos: um dashboard de despesas, que reúne praticamente tudo que você praticou nos cinco projetos anteriores, arrays de objetos, renderização a partir de dados, formulários, filtros, cálculos e persistência, num painel só. Cada despesa é um objeto no formato { id, nome, valor, categoria }, guardado num array chamado despesas, e a função renderizar() reconstrói a lista inteira a partir dele com forEach, exatamente como você já fez na lista de compras e no jogo da memória: o array é a verdade, a tela é só o reflexo dele.
Esta primeira versão nasce com três despesas já escritas à mão no array, só para você ver o "molde" funcionando antes de conseguir adicionar despesas de verdade; isso fica para o passo 2.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Três despesas fixas, só para ver a renderização funcionando. Nenhum formulário ainda.
Um objeto com um id, alguns dados e uma categoria de texto é exatamente o mesmo molde do carrinho de compras ({ id, nome, preco, qtd }) e do quiz ({ texto, opcoes, certa }). Reconhecer esse padrão, "dados reais viram um array de objetos parecidos", é uma das habilidades mais valiosas que este curso inteiro tentou construir.