Passo 1: Adicionar itens (em memória)
O carrinho começa simples: um array na memória do navegador, que se perde a cada recarregamento. É o problema que o resto do módulo resolve.
Estudar esta lição interativa →Terceiro projeto: uma lista de compras, e desta vez o protagonista não é a interface, é a persistência: fazer os dados sobreviverem além de uma única visita à página, o problema que o localStorage resolve (você já viu o começo dele no módulo Ponte do curso de JS; aqui ele vira o coração do projeto). Antes de chegar lá, este primeiro passo constrói a base: um array itens, cada item como { id, nome, preco, qtd }, crescendo a cada envio do formulário. Ele é um <form> de verdade, com três campos que têm label: o item, o preço (aceita 9,90 ou 9.90) e a quantidade. Por ser um formulário, apertar Enter também adiciona, e cada campo inválido mostra o motivo numa mensagem logo abaixo, em vez de simplesmente não acontecer nada. Nesta versão a tela só mostra quantos itens o array tem; desenhar a lista é o passo 2.
Por que cada item tem um id próprio, além do nome? Porque nomes podem se repetir ("Leite" duas vezes, por exemplo), mas o id nunca. No passo de remoção, mais à frente, é o id que vai garantir que apagamos o item certo, mesmo que dois tenham o mesmo nome.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione itens: o array cresce e a contagem acima da lista acompanha. Desenhar a lista na tela é o próximo passo.
Se este fosse um site publicado de verdade (lembre-se: aqui no ambiente de prática cada Rodar reinicia do zero), adicionar itens e recarregar a página os apagaria, porque um array comum só existe enquanto a página está aberta. Guarde essa observação: é exatamente o problema que o passo 3 resolve.