HTML5 Prático: Criando uma Página Dinâmica com Cálculo Automático

Este tutorial mostra como foi criada a página “Média dos Resultados da Lotofácil” dentro do site Comunidade Vida Evangélica, aplicando na prática recursos do HTML5, CSS3 e JavaScript. O projeto serve como exemplo didático de integração entre conteúdo dinâmico e estilo moderno.

1️⃣ Estrutura HTML5

A base da página segue o padrão semântico do HTML5, com o uso de <main>, <table>, <thead> e <tbody> para manter a acessibilidade e clareza estrutural.

<main class="conteudo-principal">
  <h1>Média dos Resultados da Lotofácil</h1>
  <table id="tabelaLotofacil">
    <thead>...</thead>
    <tbody></tbody>
  </table>
</main>

2️⃣ Estilo com CSS3

O estilo foi inspirado no padrão visual Gospel Life, com tons de azul (#6fbdf7), linhas alternadas e responsividade. Também foi incluída uma regra de impressão @media print para gerar relatórios em folha A4.

• Linhas alternadas: tr:nth-child(even)
• Cabeçalho fixo: position: sticky
• Margens A4: definidas com @page { size: A4 portrait; }
• Capa automática: exibida apenas na impressão

@media print {
  @page {
    size: A4 portrait;
    margin: 15mm 15mm 20mm 15mm;
  }
}

3️⃣ JavaScript e Cálculo Automático

O JavaScript é responsável por atualizar automaticamente a Soma e a Média de cada sorteio digitado. O código percorre todas as células da tabela e realiza os cálculos conforme o usuário digita.

function calcular() {
  const linhas = document.querySelectorAll('#tabelaLotofacil tbody tr');
  linhas.forEach(linha => {
    const celulas = linha.querySelectorAll('td');
    const numeros = Array.from(celulas).slice(3, 28);
    let soma = 0;
    numeros.forEach(td => {
      const n = parseInt(td.textContent.trim());
      if (!isNaN(n)) soma += n;
    });
    linha.querySelector('.soma').textContent = soma;
    linha.querySelector('.media').textContent = (soma / 15).toFixed(2);
  });
}

4️⃣ Salvamento Local

Os dados são armazenados no navegador usando o localStorage, garantindo que o usuário não perca as informações digitadas ao atualizar a página.

localStorage.setItem('lotofacil_dados', JSON.stringify(dados));

5️⃣ Exportação e Impressão

Além do cálculo automático, a página possui botões para exportar os resultados em CSV (Excel) e imprimir com capa personalizada.

• Exportar CSV: converte os dados da tabela em texto separado por vírgulas;
• Imprimir: gera um relatório A4 com capa, data e rodapé automático;
• Excluir e limpar: permitem gerenciar os registros manualmente.

6️⃣ Conclusão

Este projeto é um ótimo exemplo de como o HTML5, CSS3 e JavaScript podem trabalhar juntos para criar aplicações web simples, interativas e funcionais, sem necessidade de servidor ou banco de dados.

Desenvolvido por Maxwell Alves – Comunidade Vida Evangélica