Passo 3: Filtrando por categoria
Um painel de verdade deixa você enxergar só o que importa agora. Filtrar por categoria reaproveita a mesma renderização, aplicada a um pedaço do array.
Estudar esta lição interativa →A função filtrarPorCategoria(lista, categoria) é pequena, mas central: se categoria for "todas", ela devolve a lista completa sem tocar em nada; senão, devolve só as despesas cuja categoria bate com o filtro, usando .filter(). O truque de design aqui é que renderizar() nunca precisa saber se está mostrando tudo ou um pedaço: ela sempre recebe "a lista para mostrar" já pronta, e trata os dois casos com o mesmo código, sem nenhum if especial dentro dela.
Uma variável filtroAtual guarda qual categoria está selecionada agora, os botões de filtro alternam essa variável ao serem clicados (destacando o botão ativo com uma classe CSS), e tanto a lista quanto o total geral passam a ser calculados sobre o resultado filtrado, não sobre o array completo. Assim, o total sempre corresponde exatamente ao que está visível na tela.
Um painel de despesas também precisa responder à pergunta "para onde vai o meu dinheiro?", e para isso este passo ganhou um resumo por categoria, com uma barra proporcional para cada uma. A conta mora numa função pura, totalPorCategoria(lista), que devolve um objeto como { casa: 180.5, lazer: 45, ... }; a barra mais cheia é a categoria de maior gasto (100% do trilho) e as outras são proporcionais a ela. De propósito, o resumo mostra sempre o total geral e ignora o filtro: ele é o panorama, enquanto a lista abaixo é o detalhe.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione despesas em categorias diferentes e clique nos filtros: a lista e o total se ajustam ao que está selecionado.
Um erro comum aqui é continuar calculando o total a partir de despesas (o array completo) mesmo depois de aplicar um filtro visual na lista. Isso deixaria a tela mentindo: a lista mostraria só "lazer", mas o total somaria tudo. A correção é sempre calcular o total sobre o mesmo resultado filtrado usado para desenhar a lista.