Passo 2: Renderizando a lista e o total
O array de itens ganha vida na tela: cada item vira uma linha, e o total é recalculado a cada mudança.
Estudar esta lição interativa →Duas peças novas aqui. A primeira é a função renderizar(): toda vez que o array itens muda, ela limpa a lista (lista.innerHTML = "") e a reconstrói inteira com forEach, do zero. Pode parecer desperdício reconstruir tudo em vez de só acrescentar o item novo, mas esse padrão ("o array é a verdade, a tela é só um reflexo dele") evita uma classe inteira de bugs de dessincronia entre dados e tela, e é o mesmo raciocínio por trás de frameworks modernos de interface, só que feito à mão aqui.
A segunda é totalCarrinho(itens), que usa reduce para somar preco * qtd de cada item num único número. Repare que ela recebe a lista como parâmetro, em vez de ler a variável global itens direto: isso a deixa uma função pura, testável sozinha, exatamente o padrão do desafio final.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione alguns itens e observe o total crescer.
O exemplo guarda o preço digitado como número decimal (9.9, por exemplo) por simplicidade e usa toFixed(2) para arredondar na tela. Mas o computador representa decimais em binário, e somas como 0.1 + 0.2 dão 0.30000000000000004. Em um produto de verdade, o mais seguro é guardar o dinheiro em centavos inteiros (990 em vez de 9.9) e só dividir por 100 na hora de mostrar. Repare também que a função moeda() dá o mesmo formato (R$ 9,90, com vírgula) para a linha e para o total.
reduce é como um caixa de mercado passando cada produto e ajustando o valor no visor a cada item: começa em zero, e a cada item soma o subtotal daquela linha ao total acumulado até ali.