O que vais construir
Uma calculadora a funcionar de verdade, feita só com HTML, CSS e JavaScript, que podes levar e adaptar.
Código 100% próprio e aberto. Livre para usares e adaptares.
Em quase todas as apps repetimos as mesmas camadas, como construir uma casa: o HTML põe as coisas na mesa (a estrutura), o CSS veste-as (a aparência), e o JavaScript é a linguagem que lhes dá vida (o que reage ao toque). No fim, a memória guarda o que importa. Não precisas de decorar — vais reconhecê-las em cada passo. E há um truque de criador: antes de cada passo, diz em voz alta “quando eu faço X, a app deve fazer Y”. Isso transforma-te de quem copia em quem cria.
Primeiro pomos as coisas na mesa: um sítio para o número (o visor) e os botões (0 a 9, +, −, ×, ÷, =). Sem cor, sem reação — só o que existe. É o esqueleto.
<div class="calc">
<div class="visor" id="agora">0</div>
<div class="teclas">
<button data-num="7">7</button>
<button data-op="+">+</button>
<button data-acao="igual">=</button>
</div>
</div>Acrescenta uma linha pequena por cima do número para mostrar a conta a ser feita. Estruturaste informação nova.
Montaste a casa seguindo o plano. O salto a criador é mudá-la sozinho. Tenta estas três — da mais simples à mais corajosa — sem receita. Se travares, pede à tua IA; mas tenta primeiro, e diz antes «quando eu fizer isto, a app deve…».
O que construíste é teu. Abre a Prova Viva, clona para a tua IA, e faz crescer — uma cor nova, um botão novo, ou A Calculadora no teu telemóvel.