Tutorial: Criando um Gerador de Números da Lotofácil

Neste tutorial, vamos criar um simples gerador de números aleatórios para a Lotofácil usando HTML, CSS e JavaScript. Este projeto é perfeito para iniciantes que desejam aprender sobre manipulação de DOM, eventos e lógica em JavaScript.

Veja o projeto em funcionamento neste link. Gerador de números da Lotofácil.

Passo 1: Estrutura HTML

Primeiro, começamos com o arquivo index.html, que define a estrutura básica da aplicação. O código inclui um título, um menu suspenso para escolher a quantidade de números, um botão para gerar os números, e um espaço para exibi-los.

Código HTML



<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Gerador de Números da Lotofácil</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1>Gerador de Números da Lotofácil</h1>

    <label for="quantidade">Escolha a quantidade de números (15 a 20):</label>

    <select id="quantidade"></select>

    <div class="numeros" id="numeros"></div>

    <button id="gerar-btn">Gerar Números</button>

    <script src="script.js"></script>

</body>

</html>

Explicação

O elemento <select> permitirá ao usuário escolher quantos números (entre 15 e 20) serão gerados.

A <div> com o id="numeros" será usada para exibir os números gerados.

Passo 2: Estilo CSS

O arquivo style.css define o design da aplicação, deixando-a mais atraente visualmente.

Código CSS



body {

    font-family: Arial, sans-serif;

    background-color: #f4f4f9;

    text-align: center;

    padding: 20px;

}

h1 {

    color: #2c3e50;

    font-size: 2rem;

    margin-bottom: 20px;

}

.numeros {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 20px 0;

}

.numero {

    background-color: #9b59b6;

    color: white;

    font-size: 20px;

    font-weight: bold;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

button {

    background-color: #28a745;

    color: white;

    border: none;

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

    border-radius: 5px;

    transition: background-color 0.3s ease;

}

button:hover {

    background-color: #218838;

}

label, select {

    font-size: 16px;

    margin: 10px;

}

Explicação

O fundo da aplicação tem um tom claro para proporcionar um contraste agradável.

O botão muda de cor ao passar o mouse, criando uma interação visual interessante.

Passo 3: Lógica em JavaScript

Agora, adicionamos a lógica do gerador de números no arquivo script.js.

Código JavaScript



const selectQuantidade = document

 .getElementById('quantidade');

// Popula o seletor com as opções de 15 a 20 números

for (let i = 15; i <= 20; i++) {

 const option = document.createElement(

  'option');

 option.value = i;

 option.textContent = i;

 selectQuantidade.appendChild(option);

}

// Define o valor padrão como 15

selectQuantidade.value = 15;

function gerarNumeros() {

 const quantidade = parseInt(

  selectQuantidade.value);

 const numerosContainer = document

  .getElementById('numeros');

 numerosContainer.innerHTML = '';

 const numerosGerados = new Set();

 while (numerosGerados.size <

  quantidade) {

  // Geração de números aleatórios entre 1 e 25 (para a Lotofácil)

  const numero = Math.floor(Math

   .random() * 25) + 1;

  numerosGerados.add(numero);

 }

 // Ordena os números gerados de forma crescente e os exibe

 Array.from(numerosGerados).sort((a,

  b) => a - b).forEach(numero => {

  const numeroDiv = document

   .createElement('div');

  numeroDiv.className = 'numero';

  numeroDiv.textContent = numero;

  numerosContainer.appendChild(

   numeroDiv);

 });

}

document.getElementById('gerar-btn')

 .addEventListener('click',

  gerarNumeros);

Explicação

O seletor é preenchido dinamicamente com valores de 15 a 20.

A função gerarNumeros cria um conjunto único de números aleatórios entre 1 e 25.

Após gerar os números, eles são exibidos na <div> com o ID numeros.

Teste Final

Crie os arquivos index.html, style.css e script.js.

Copie os códigos fornecidos para os arquivos correspondentes.

Abra o arquivo index.html no seu navegador e teste a aplicação.

Se preferir, os códigos estão no meu Repositório no GitHub.

Conclusão

Este projeto simples demonstra como usar HTML, CSS e JavaScript juntos para criar uma aplicação interativa. Experimente personalizar o design ou a lógica para se aprofundar ainda mais no aprendizado.

Programar Tudo - Blog de Programação

Pesquisar este blog