Passo 2: Digitando números
Hora de dar vida ao visor: cada clique num número deve aparecer na tela, formando o valor dígito a dígito.
Estudar esta lição interativa →Com onze botões de entrada (os dez dígitos e o ponto), escrever onze addEventListener repetidos seria repetitivo e frágil (se você acrescentar um botão, teria que lembrar de conectar mais um). Em vez disso, selecionamos todos de uma vez com querySelectorAll(".btn.num") e percorremos o resultado com forEach, ligando a mesma lógica em cada um. É o mesmo hábito de "código que se repete vira função ou loop" que você já pratica desde o Módulo 4 do curso de JS.
O número sendo digitado mora numa variável chamada atual, e ela é texto, não number: pense em "37" sendo construído dígito a dígito, "3" e depois "37", uma concatenação de caracteres, não uma soma. Só na hora de calcular de verdade (próximo passo) é que convertemos para number. Os botões % e ± ainda não reagem a nada neste passo: eles só ganham vida no passo 4, quando a calculadora já sabe fechar uma conta.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Clique nos números e veja o visor crescer. Clique em C para limpar.
Sem cuidado, clicar no ponto duas vezes formaria 1.2.3, que não é número nenhum (Number("1.2.3") vira NaN). Por isso o clique no ponto é ignorado quando atual.includes(".") já é verdadeiro, e um ponto digitado primeiro vira "0.".
Sem tratamento, clicar em "0" e depois "7" mostraria "07". A linha atual = atual === "0" ? digito : atual + digito resolve isso: se o visor ainda mostra só o "0" inicial, o próximo dígito substitui em vez de concatenar. Repare que é o mesmo padrão de ternário que você já usou no módulo Ponte do curso de JS.