2
respostas

[CORREÇÃO DE BUG]

Depois de testar algumas vezes, percebi que ao clicar no botão sortear mais de uma vez o botão de reiniciar acabava habilitando e desabilitando a cada clique. Acredito que na verdade o comportamento esperado seria de habilitar o botão reiniciar quando o botão sortear é clicado e só desabilitar o botão reiniciar quando o próprio é clicado.

Tabelinha de eventos abaixo para facilitar a compreensão:

EventoAção
Botão sortear clicadoDesabilitar botão reiniciar
Botão reiniciar clicadoHabilitar botão reiniciar

Dessa forma, eu removi a função alterarStatusBotao() sugerida na aula e fiz a alteração do status internamente na própria função sortear e reiniciar, conforme comportamento esperado.

Segue código abaixo:

function sortear() { //sortear números com base na entrada do usário

    //recuperar valores inseridos pelo usuário

    let quantidade = parseInt(document.getElementById('quantidade').value);
    let de = parseInt(document.getElementById('de').value);
    let ate = parseInt(document.getElementById('ate').value);

    //alert(`Quantidade: ${quantidade}, de: ${de}, ate: ${ate}`); //testando recuperação: OK

    let sorteados = [];
    let numero;

    for (let i = 0; i < quantidade; i++) {
        numero = obterNumeroAleatorio(de, ate);
        while (sorteados.includes(numero)) {
            numero = obterNumeroAleatorio(de,ate); //sorteia um novo número caso o número sorteado já esteja no array
        }
        sorteados.push(numero); //"empurra" o número sorteado na array de resultados
    }

    //alert(sorteados); //testanto sorteio: OK

    let resultado = document.getElementById('resultado'); //recuperar o elemento HTML onde os números sorteados serão exibidos
    resultado.innerHTML = `<label class="texto__paragrafo">Números sorteados:  ${sorteados}</label>`
    
    //habilitar o botão reiniciar

    let botao = document.getElementById('btn-reiniciar');
    if (botao.classList.contains('container__botao-desabilitado')) {
        botao.classList.remove('container__botao-desabilitado');
        botao.classList.add('container__botao');
    }
}

function obterNumeroAleatorio(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min); //copiado da documentação do JS
    /*
    A função Math.floor arredonda pra baixo, ou seja:

    Caso 1: número sorteado no intervalo [min,min+1) >> será arredondado para min
    Caso 2: número sorteado no intervalo [max,max+1) >> será arredondado para max

    Conclusão: todos os números tem a mesma chance de serem sorteados.
    */

    /*
    [0,1)
    [0,1)*max = [0,max)
    [0,1)*(max-min) = [0, max-min)
    [0,1)*(max-min)+min = [min,max)
    [0,1)*(max-min+1)+min = [min,max+1) - como todos os números são inteiros, 'max+1' nunca será sorteado
    */
}

/* O curso originalmente sugere essa solução, mas isto causa o bug de desabilitar o botão reiniciar quando o botão de sorteio é clicado duas vezes seguidas.
function alterarStatusBotao() {
    
    //inverte o status do botão reiniciar para habilitado/desabilitado

    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 reiniciar() {
    //esvaziar campos
    document.getElementById('quantidade').value = '';
    document.getElementById('de').value = '';
    document.getElementById('ate').value = '';
    //desabilitar o botão reiniciar
    document.getElementById('btn-reiniciar').classList.remove('container__botao');
    document.getElementById('btn-reiniciar').classList.add('container__botao-desabilitado');
}

Sendo que ainda tem alguns pontos que precisam ser vistos:

  • O que o programa deve fazer se o usuário pedir mais números do que o intervalo definido permitir? (ex: 5 números entre 1 e 3)
  • O que o programa deve fazer se o usuário clicar em sortear sem preencher todos os campos?
  • O que o programa deve fazer se o valor "de" for maior que o valor "para"?

Não finalizei o curso ainda, então não sei se essas questões serão abordadas pelos professores. Caso não sejam, trago aqui minhas considerações.

2 respostas

Bom, eis aqui o resultado final do meu projeto. Implementei algumas coisas a mais:

  • O programa analisa e interrompe a execução se o usuário inseriu um valor inválido para a quantidade ou para o intervalo, limpando os campos e exibindo uma mensagem de erro na tela.
  • Interrompe a execução se algum dos campos estiver vazio.
  • Ordena os números sorteados e os exibe na tela de forma organizada.

Estou colocando o link para os arquivos porque o código ficou um pouco grande e não caberia no tópico

Executando pelo Vercel

Muito bom o que você fez amigo! valeu por compartilhar