Passo 2: Adicionando despesas e o total
Um formulário de verdade: nome, valor e categoria, com validação, e um total geral formatado como dinheiro de verdade.
Estudar esta lição interativa →O formulário é um <form> de verdade, com três campos que têm label: nome, valor e uma categoria (escolhida entre casa, lazer, transporte e outros). O Enter envia, e quando algo está errado a tela diz o quê (numa mensagem com role="alert", que leitores de tela anunciam), em vez de ignorar o clique em silêncio. Antes de adicionar, duas checagens simples: o nome não pode estar vazio, e o valor precisa ser um número maior que zero (Number(valor) > 0, cuidando também do caso em que a conversão falha e vira NaN, que a comparação > 0 já descarta sozinha). Passando dessas checagens, a despesa entra no array e a lista é re-renderizada, exatamente como no carrinho de compras.
A novidade de verdade é o total formatado: em vez de escrever "R$ " + total.toFixed(2).replace(".", ",") na mão (o jeito usado no projeto da lista de compras), aqui usamos new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(total), um recurso nativo do JavaScript que já sabe formatar valores monetários corretamente, incluindo separador de milhar, para qualquer moeda e qualquer local do mundo, sem você reinventar essa lógica.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione uma despesa (nome, valor e categoria) e observe o total formatado crescer.
Na hora de desenhar cada linha da lista, o nome da despesa entra na tela com createElement e textContent, e não com innerHTML. Esse nome foi digitado por uma pessoa (e, no passo 4, fica guardado no navegador): se alguém digitar algo como <img src=x onerror="...">, o innerHTML trataria isso como HTML de verdade e rodaria o código, enquanto o textContent só mostra o texto digitado. Teste você mesmo: adicione uma despesa chamada <b>oi</b> e veja que ela aparece exatamente assim, com os sinais, sem virar negrito.
Intl.NumberFormat é como confiar num caixa eletrônico em vez de contar notas na mão: o formato de moeda tem regras específicas (onde vai a vírgula, onde vai o ponto, quantas casas decimais) que variam de país para país, e o próprio JavaScript já sabe seguir essas regras, sem você precisar decorar nenhuma.