Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Sorteador de Números proteção dos números e Set ao inves de Array

Utilizei o Set por sugestão de ser mais rápido que o array na checagem de valores únicos.

// Adding eventlistener to the buttons ensuring the HTML has been fully loaded and parsed DOmContentLoaded is redudant because my script is by the end of the body with defer. Testing only.
document.addEventListener('DOMContentLoaded', () => {
    const drawButton = document.getElementById('btn-sortear');
    drawButton.addEventListener('click', draw);
    const drawbuttonReset = document.getElementById("btn-reiniciar");
    drawbuttonReset.addEventListener("click", reset);
  });

function draw() {

    // Get the values of the screen input fields, parseInt is uncessary since the field is declared as number in HTML
    let drawQuantity = parseInt(document.getElementById('quantidade').value);
    let fromNumber = parseInt(document.getElementById('de').value);
    let untilNumber = parseInt(document.getElementById('ate').value);

    // Checking if the inputs are not empty/numbers
    if (isNaN(drawQuantity) || isNaN(fromNumber) || isNaN(untilNumber)) {
        alert('Insira apenas números validos');    
        return;
    }
    // Checking if the value from is not greater than until
    if(fromNumber >= untilNumber) {
        alert('Valor do campo "Do número" não pode ser maior ou igual ao campo ""Até o número"');
        return;
    }
    // Checking if the interval is large to avoid infinite loop
    if(drawQuantity > (untilNumber - fromNumber +1)) {
        alert('O intervalo entre o valor escolhido para o campo "Do número" e campo "Até o número" não comporta a quantida escolhida para sorteio');
        return;        
    }

    const uniqueNumbers = new Set();
    // I want all draw numbers to be unique so instead of using an Array i used a Set
    if (drawQuantity >= 1) {        
        while(uniqueNumbers.size < drawQuantity) {
            uniqueNumbers.add(randomNumber(fromNumber, untilNumber));
         }
    }
 

    // Get the relevant HTML tag to show the drawn numbers
    const changeTag = '#resultado label';
    // Converts the set into an array and use the function join to separate the numbers with a comma and space. If no space wanted .join is redundant
    const changeText = "Números sorteados: " + Array.from(uniqueNumbers).join(", ");

    modifyHtml(changeTag, changeText); 
    enableDisableButton('btn-reiniciar', 'container__botao');

}

function reset() {
    modifyHtml('#resultado label', "Números sorteados:  nenhum até agora");
    enableDisableButton('btn-reiniciar', 'container__botao-desabilitado');
    // Could have hardcoded but preferred to use a function to clear values.
    modifyHtmlById('quantidade', '');
    modifyHtmlById('de', '');
    modifyHtmlById('ate', '');  
}
// Function that generates the desired numbers
function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
// Modifying some HTML elements that can be manipulated via innerHTML
function modifyHtml(tag, value) {
    let campo = document.querySelector(tag);
    campo.innerHTML = value;
}
// Function to modify fields that need to be changed using value instead of innerHTML
function modifyHtmlById(tag, value) {
    let campo = document.getElementById(tag);
    campo.value = value;
}

function enableDisableButton(id, css) {
    /*
    if(document.getElementById(id).classList.contains('container__botao-desabilitado')) {
        // Disabling new game button on the page by changing it's CSS class
        document.getElementById(id).classList.remove('container__botao-desabilitado');
        document.getElementById(id).classList.add(css);  
    }
    else {
        // Enabling new game button on the page by changing it's CSS class
        document.getElementById(id).classList.remove('container__botao');
        document.getElementById(id).classList.add(css);
    }*/

    // Changing the if else to a ternary operation
    document.getElementById(id).classList.contains('container__botao-desabilitado') ? (document.getElementById(id).classList.remove('container__botao-desabilitado'),
    document.getElementById(id).classList.add(css)) : (document.getElementById(id).classList.remove('container__botao'), document.getElementById(id).classList.add(css)); 
}
1 resposta
solução!

Olá Israel!

Você está no caminho certo ao usar um Set para garantir que os números sorteados sejam únicos. O Set é uma excelente escolha para esse tipo de operação devido à sua eficiência na verificação de valores únicos.

Vamos analisar o seu código:

  1. Verificação de Entradas: Você está verificando se as entradas são números válidos, o que é ótimo. No entanto, como você mencionou, se os campos HTML já estão definidos como tipo "number", o parseInt pode ser desnecessário, mas ainda pode ser útil para garantir que você está lidando com inteiros.

  2. Lógica de Sorteio: A lógica para garantir que os números sejam únicos usando um Set está correta. A condição do while (uniqueNumbers.size < drawQuantity) assegura que o loop continue até que o número desejado de sorteios únicos seja alcançado.

  3. Função randomNumber: Certifique-se de que a função randomNumber(fromNumber, untilNumber) está corretamente implementada para gerar números aleatórios dentro do intervalo especificado. Uma implementação comum seria algo como:

    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
  4. Exibição dos Resultados: Você está convertendo o Set em um array e usando Array.from(uniqueNumbers) para exibir os números sorteados. Isso está correto. A função join pode ser usada para formatar a saída conforme desejado.

  5. Funções Auxiliares: Certifique-se de que as funções modifyHtml e enableDisableButton estão corretamente implementadas para atualizar o HTML e gerenciar o estado dos botões.

Espero ter ajudado e bons estudos!