Projeto 1: Contador Simples

Um contador simples é um ótimo primeiro projeto porque ele junta várias peças importantes do JavaScript em algo pequeno, visual e fácil de testar. Pense nele como um “mini laboratório”: você clica em botões e vê, na hora, o resultado na tela. Isso ajuda muito a entender como o JavaScript conversa com o HTML.

Neste projeto, a ideia é ter um número na tela e dois botões: um para aumentar e outro para diminuir. Parece simples (e é!), mas por trás disso você pratica conceitos centrais: variáveis, funções, eventos, manipulação do DOM e atualização de interface.

O que você está treinando sem perceber

Quando você cria um contador, você está treinando:

• Estado da aplicação: o valor atual do contador (a “memória” do programa).
• Manipulação do DOM: pegar um elemento da página e trocar o texto dele.
• Eventos: reagir ao clique do usuário.
• Funções: organizar ações repetitivas (incrementar, decrementar, renderizar).
• Fluxo lógico: decidir regras, como impedir número negativo (se quiser).

Em outras palavras: você começa a sair do JavaScript “parado” e entra no JavaScript interativo, que reage ao usuário.

Estrutura mental do projeto

Uma forma simples de pensar no contador:

1. Criar uma variável contador com valor inicial 0.
2. Mostrar esse valor na tela.
3. Quando clicar em “+”, somar 1.
4. Quando clicar em “-”, subtrair 1.
5. Atualizar a tela sempre que o valor mudar.

Essa sequência é o coração de muitos sistemas reais: guardar dado → mudar dado → refletir no visual.

Exemplo completo (HTML + CSS + JS no mesmo arquivo)

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Contador Simples</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: grid;
      place-items: center;
      min-height: 100vh;
      margin: 0;
      background: #f4f6f8;
    }

    .card {
      background: white;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      text-align: center;
      width: 280px;
    }

    h1 {
      margin-top: 0;
      font-size: 1.3rem;
      color: #333;
    }

    #valor {
      font-size: 3rem;
      margin: 16px 0 20px;
      color: #111;
    }

    .botoes {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    button {
      border: none;
      border-radius: 8px;
      padding: 10px 16px;
      font-size: 1rem;
      cursor: pointer;
    }

    #diminuir {
      background: #ffdddd;
    }

    #aumentar {
      background: #d9fdd3;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>Contador</h1>
    <p id="valor">0</p>
    <div class="botoes">
      <button id="diminuir">-1</button>
      <button id="aumentar">+1</button>
    </div>
  </div>

  <script>
    let contador = 0;

    const valorElemento = document.getElementById("valor");
    const botaoAumentar = document.getElementById("aumentar");
    const botaoDiminuir = document.getElementById("diminuir");

    function atualizarTela() {
      valorElemento.textContent = contador;
    }

    botaoAumentar.addEventListener("click", function () {
      contador++;
      atualizarTela();
    });

    botaoDiminuir.addEventListener("click", function () {
      contador--;
      atualizarTela();
    });
  </script>
</body>
</html>

Entendendo as partes mais importantes

• let contador = 0;
  É a “caixinha” que guarda o valor atual.

• document.getElementById(...)
  É como procurar, no HTML, o elemento certo para manipular.

• addEventListener("click", ...)
  Diz ao JavaScript: “quando esse botão for clicado, execute esta ação”.

• textContent
  Atualiza o texto do elemento na página.

• atualizarTela()
  Evita repetição e deixa o código mais organizado.

Melhorias simples que você pode adicionar depois

Depois de fazer a versão básica, você pode evoluir:

• Botão para zerar o contador.
• Regra para não deixar valor ficar negativo.
• Mudança de cor quando o número for positivo, zero ou negativo.
• Salvar valor no localStorage para manter mesmo ao recarregar a página.

Perceba como um projeto pequeno vira um campo de treino completo. É exatamente isso que fortalece sua base.