3
respostas

[Projeto] Necessita de mais controle sobre os númeeros

Notei que é possivel com o teclado apagar o número e tentar sortear, adicionei mais controles para verificar os campos antes de prosseguir, como adicionei uma pergunta para saber se ele quer na ordem de sorteio ou em ordem crescente. Pensei em usar uma variavel melhor na function alterarstatusbotao, mas acho que não ficou visualmente ruim assim.

Ficou bem legal.

document.getElementById("quantidade").value = 6;
document.getElementById("de").value = 1;
document.getElementById("ate").value = 60;

function reiniciar() {
document.getElementById("resultado").innerHTML = ' Números sorteados: nenhum até agora ';
alterarStatusBotao("btn-reiniciar", false);
alterarStatusBotao("btn-sortear", true);

}

reiniciar(); //inicializa os valores padrão

function sortearNumero() {
return Math.floor(Math.random() * (numeroMaximo - numeroMinimo + 1)) + parseInt(numeroMinimo);
};

function verificaItens(valor,campo) {
if (valor >= 0) {
return true
} else {
alert('O campo "' + campo + '" possui um valor inválido!');
return false;
}

}

function sortear() {
let numeros = [];
quantidade = parseInt(document.getElementById("quantidade").value);
numeroMinimo = parseInt(document.getElementById("de").value);
numeroMaximo = parseInt(document.getElementById("ate").value);
// Validação extra:
if (numeroMinimo > numeroMaximo) {
alert('O valor mínimo não pode ser maior que o máximo!');
return;
}
if (quantidade > (numeroMaximo - numeroMinimo + 1)) {
alert('A quantidade de números a sortear é maior que o intervalo disponível!');
return;
}

if (verificaItens(numeroMaximo - 1, "Até o número") && verificaItens(numeroMinimo, "Do número") && verificaItens(quantidade - 1, "Quantidade de números")) {
    for (let i = 0; i < quantidade; i++) {
        let numero = sortearNumero();
        while (numeros.includes(numero)) {
            numero = sortearNumero();
        }
        numeros.push(numero);
    }

    let palavraSorteados = quantidade == 1 ? "Número Sorteado" : "Números Sorteados"; //operador ternário
    if (quantidade > 1) {
        imputbox = 'Deseja visualizar os números sorteados em ordem crescente?';
        if (confirm(imputbox)) {
            numeros.sort((a, b) => a - b);
        }
    }

    document.getElementById("resultado").innerHTML = '<label class="texto__paragrafo"> ' + palavraSorteados + ': <br> '+ numeros.join(", ")+' </label>';
    //innerHTML = permite colocar HTML dentro do elemento
    //textContent = permite colocar texto dentro do elemento
    alterarStatusBotao("btn-reiniciar", true);
    alterarStatusBotao("btn-sortear", false);
} 

}

function alterarStatusBotao(botao,ativo) {
if (ativo == true) {
document.getElementById(botao).classList.add('container__botao');
document.getElementById(botao).classList.remove('container__botao-desabilitado');
document.getElementById(botao).removeAttribute('disabled');
} else {
document.getElementById(botao).classList.add('container__botao-desabilitado');
document.getElementById(botao).classList.remove('container__botao');
document.getElementById(botao).setAttribute('disabled', 'true');
}
}

3 respostas

kkkk, avnaçando no curso mandaram eu fazer isso kkkk
me antecipei

Mas eu alterei o HTML para permitir que o número menor seja zero

                <div class="container__campo">
                    <label class="texto__paragrafo">Do número</label>
                    <input class="container__input" id="de" type="number" min="0">
                </div>

Oi, Filipe! Tudo bem?

Sobre sua última dúvida: usar uma variável mais clara na função alterarStatusBotao para tornar o código visualmente melhor, você pode melhorar a legibilidade substituindo o nome ativo por algo mais expressivo, como habilitar ou deveAtivar. Isso torna a intenção da função mais clara para quem lê.

Veja como ajustar:



function alterarStatusBotao(botao, deveAtivar) {
  const elemento = document.getElementById(botao);

  if (deveAtivar) {
    elemento.classList.add('container__botao');
    elemento.classList.remove('container__botao-desabilitado');
    elemento.removeAttribute('disabled');
  } else {
    elemento.classList.add('container__botao-desabilitado');
    elemento.classList.remove('container__botao');
    elemento.setAttribute('disabled', 'true');
  }
}

Com isso, o nome deveAtivar comunica diretamente a ideia de ativar ou desativar o botão, tornando o código mais autoexplicativo e fácil de manter.

Fico à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado