2
respostas

[Projeto] alterar status do botao

Confesso que senti um pouco de dificuldade nessa parte principalmente nas parte de condicionais, por fim o código final ficou assim:

let sorteados = [];

function sortear(){
    sorteados = [];
    let quantidade = parseInt(document.getElementById("quantidade").value);
    let de = parseInt(document.getElementById("de").value);
    let ate = parseInt(document.getElementById("ate").value);

    for (let i = 0; i < quantidade; i++) {
        let numero = sortearNumeroAleatorio(de, ate);
        while (sorteados.includes(numero)) {
            numero = sortearNumeroAleatorio(de, ate);
        }
        sorteados.push(numero);
    }

    let resultado = document.getElementById("resultado");
    resultado.innerHTML = `<label class="texto__paragrafo">Números sorteados: ${sorteados}</label>`
    habilitarBotaoReiniciar();
}
function habilitarBotaoReiniciar(){
    let botao = document.getElementById("btn-reiniciar");
    if(botao.classList.contains("container__botao-desabilitado")){
        botao.classList.remove("container__botao-desabilitado");
        botao.classList.add("container__botao");
    } else {
    botao.classList.remove('container__botao');
    botao.classList.add('container__botao-desabilitado');
  }
}



function sortearNumeroAleatorio(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function reiniciar(){
    sorteados = [];
    document.getElementById("quantidade").value = '';
    document.getElementById("de").value = '';
    document.getElementById("ate").value = '';
    document.getElementById("resultado").innerHTML = '<label class="texto__paragrafo">Números sorteados:  nenhum até agora</label>';
    habilitarBotaoReiniciar();
}

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
2 respostas

Olá, Lucas!
Achei seu código bem estruturado. Cumpre bem a função de sortear números aleatórios sem repetição.
Mas há alguns pontos que dá pra melhorar ou otimizar, tanto em clareza quanto em eficiência.

1 - Validação dos valores.

Antes de sortear, seria bom validar:
-se quantidade é menor ou igual ao intervalo (ate - de + 1);
-se de é menor que ate;
-se os campos foram realmente preenchidos.

2 - Melhorar a função habilitarBotaoReiniciar()

Hoje ela alterna o estado (habilita - desabilita), o que pode causar comportamento inesperado. Melhor deixá-la explícita: uma função ativa e outra desativa. E então chamar habilitarBotaoReiniciar() no sorteio e desabilitarBotaoReiniciar() no reiniciar().

3 - Apresentação do resultado

Você pode melhorar a exibição dos números sorteados usando join(", ") para separar com vírgulas.

Aqui uma versão refatorada do seu código

let sorteados = [];

function sortear() {
    sorteados = [];

    const quantidade = parseInt(document.getElementById("quantidade").value);
    const de = parseInt(document.getElementById("de").value);
    const ate = parseInt(document.getElementById("ate").value);

    if (isNaN(quantidade) || isNaN(de) || isNaN(ate)) {
        alert("Por favor, preencha todos os campos antes de sortear.");
        return;
    }

    if (de > ate) {
        alert("O valor inicial deve ser menor ou igual ao valor final.");
        return;
    }

    const intervalo = ate - de + 1;
    if (quantidade > intervalo) {
        alert("A quantidade de números sorteados é maior que o intervalo disponível.");
        return;
    }

    sorteados = sortearNumerosUnicos(de, ate, quantidade);

    const resultado = document.getElementById("resultado");
    resultado.innerHTML = `
        <label class="texto__paragrafo">
            Números sorteados: ${sorteados.join(", ")}
        </label>
    `;

    habilitarBotaoReiniciar();
}

function sortearNumerosUnicos(de, ate, quantidade) {
    const numeros = [];
    for (let i = de; i <= ate; i++) {
        numeros.push(i);
    }

    for (let i = numeros.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [numeros[i], numeros[j]] = [numeros[j], numeros[i]];
    }

    return numeros.slice(0, quantidade);
}

function habilitarBotaoReiniciar() {
    const botao = document.getElementById("btn-reiniciar");
    botao.classList.remove("container__botao-desabilitado");
    botao.classList.add("container__botao");
}

function desabilitarBotaoReiniciar() {
    const botao = document.getElementById("btn-reiniciar");
    botao.classList.remove("container__botao");
    botao.classList.add("container__botao-desabilitado");
}

function reiniciar() {
    sorteados = [];
    document.getElementById("quantidade").value = "";
    document.getElementById("de").value = "";
    document.getElementById("ate").value = "";

    document.getElementById("resultado").innerHTML = `
        <label class="texto__paragrafo">
            Números sorteados: nenhum até agora
        </label>
    `;

    desabilitarBotaoReiniciar();
}