Projeto 3: Trocador de Cores de Fundo

Este projeto é pequeno no tamanho, mas gigante no aprendizado. O Trocador de Cores de Fundo mostra, de forma muito visual, como o JavaScript pode reagir a uma ação do usuário e mudar o que aparece na tela na mesma hora.

Pense assim: o HTML é a parede, o CSS é a tinta, e o JavaScript é a pessoa com o rolo na mão mudando a cor quando alguém pede. Esse é o coração da interatividade na web.

O que você vai praticar neste projeto

Mesmo sendo simples, este projeto reforça vários pilares importantes:

• Seleção de elementos com DOM.
• Escuta de eventos com clique.
• Manipulação de estilo com JavaScript.
• Uso de funções para organizar lógica.
• Uso de arrays para guardar opções de cor.
• Geração de valores aleatórios.
• Atualização de conteúdo textual na interface.

Ideia geral do funcionamento

A lógica pode ser resumida em poucos passos:

1. Criar um botão "Trocar cor".
2. Criar uma lista de cores possíveis.
3. Ao clicar no botão, escolher uma cor da lista.
4. Aplicar essa cor no fundo da página.
5. Mostrar o nome ou código da cor atual na tela.

Esse fluxo é muito parecido com sistemas maiores: o usuário faz uma ação, o JavaScript processa, e a interface responde.

Exemplo completo (HTML + CSS + JS em um arquivo)

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

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

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

    p {
      margin: 12px 0 18px;
      color: #444;
    }

    button {
      border: none;
      background: #2563eb;
      color: white;
      padding: 10px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.95rem;
    }

    button:hover {
      background: #1e4fc2;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>Trocador de Cores</h1>
    <p>Cor atual: <strong id="cor-atual">#f4f4f4</strong></p>
    <button id="trocar-cor">Trocar cor</button>
  </div>

  <script>
    const botaoTrocarCor = document.getElementById("trocar-cor");
    const textoCorAtual = document.getElementById("cor-atual");

    const cores = ["#FF6B6B", "#4ECDC4", "#1A535C", "#FFD166", "#6A4C93", "#F72585", "#4361EE"];

    function pegarIndiceAleatorio(max) {
      return Math.floor(Math.random() * max);
    }

    function trocarCorDeFundo() {
      const indice = pegarIndiceAleatorio(cores.length);
      const novaCor = cores[indice];

      document.body.style.backgroundColor = novaCor;
      textoCorAtual.textContent = novaCor;
    }

    botaoTrocarCor.addEventListener("click", trocarCorDeFundo);
  </script>
</body>
</html>

Entendendo os conceitos-chave

• addEventListener("click", ...): fica "ouvindo" o clique no botão.
• document.body.style.backgroundColor: altera o estilo diretamente pelo JavaScript.
• Array cores: funciona como uma paleta pronta para usar.
• Math.random() e Math.floor(): ajudam a escolher uma cor aleatória.
• Funções pequenas: deixam o código mais limpo e fácil de evoluir.

Boas práticas aplicadas aqui

• Nomes de variáveis claros.
• Separação da lógica em funções.
• Evitar repetição de código.
• Atualizar interface junto com o estado visual (mostrar cor atual).

Ideias para evoluir o projeto

Depois da versão básica, você pode testar:

• Gerar cor hexadecimal aleatória em vez de usar lista fixa.
• Copiar código da cor com um botão "Copiar".
• Mostrar histórico das últimas cores usadas.
• Bloquear repetição da mesma cor em cliques consecutivos.
• Criar modo automático que troca a cor a cada 1 segundo com setInterval.

Esse projeto é uma excelente ponte entre fundamentos e criatividade: com poucos comandos, você cria uma experiência interativa completa.