Então, você quer ser um desenvolvedor web?

Você poderia assistir 50 horas de tutoriais, ou você poderia construir algo.

Um Tap Counter é o projeto "primeiro" canónico para desenvolvedores front-end. Cobre todos os fundamentos: variáveis, funções, ouvintes de eventos e manipulação do DOM.

Neste guia, não vamos dar-lhe o código de copiar e colar. Explicaremos a lógica de como um contador de toques funciona por baixo dos panos.

O fluxo lógico

Um aplicativo de contador faz três coisas:

1. Estado: Ele lembra um número (por exemplo, `count = 0`). 1. Evento: Espera por você clicar um botão. 1. Atualização: Quando clicado, ele faz `count = count + 1` e atualiza a tela.

Passo 1: O HTML (O Esqueleto)

Você precisa de um lugar para exibir o número e um botão para clicar.

```

0

É isso. É feio, mas existe.

Passo 2: O JavaScript (O Cérebro)

Esta é onde a magia acontece.

Precisamos dizer para o computador: "Ei, encontre aquele Botão. Quando alguém clicar nele, pegue o Número, adicione 1 e mostre-o novamente."

O código logicamente é assim:

``` let count = 0; // O Estado

function increase() { count++; // Adiciona 1 document.getElementById("number").innerText = count; // Atualizar a tela } ```

Passo 3: LocalStorage (A Memória)

O problema com o código acima? Se você atualizar a página, o contador volta para 0.

Para criar um contador útil (como um Tasbeeh ou contador de linhas), ele precisa lembrar.

Os navegadores têm um pequeno banco de dados chamado `localStorage`.

• Salvar: Toda vez que clicamos, estamos a dizer ao navegador: "Salvar 'count' permanentemente."
• Carregar: Quando a página carrega, perguntamos: "Você tem um número salvo?" Se sim, comece por ali.

Por que este projeto importa

Construir um contador de toques ensina você o conceito fundamental de Gerenciamento de Estado.

Se você estiver criando uma lista de tarefas, um carrinho de compras ou o Facebook, tudo isso é apenas versões sofisticadas de um Contador de Toques.

• Botão de Curtir do Facebook? Isso é um contador de toques.
• Contagem de retweet do Twitter? Isso é um contador de toques.
• Contagem de itens no carrinho da Amazon? Isso é um contador de toques.

Conclusão

Não use apenas ferramentas, construa-as. Abra um arquivo de texto, escreva aquelas dez linhas de código e veja seu próprio contador personalizado ganhar vida. É o primeiro passo para um mundo maior.