Resultado um pouco diferente do proposto | Lógica de programação: praticando com desafios

Escrevi um codigo um pouco diferente. Fui estudando o proposto e adaptando. Mesmo tendo iniciado agora em programação, me desafiei a mexer no CSS e HTML além do JS. Vou postar os 3 aqui:

let quantidadeInput = document.getElementById('quantidade');
let inicialInput = document.getElementById('inicial');
let finalInput = document.getElementById('final');
let sortearButton = document.getElementById('sortear');
let reiniciarButton = document.getElementById('reiniciar');
let resultadoDiv = document.getElementById('resultado');

function sortearNumeros() {
    let quantidade = parseInt(quantidadeInput.value);
    let inicial = parseInt(inicialInput.value);
    let final = parseInt(finalInput.value);

    if (isNaN(quantidade) || isNaN(inicial) || isNaN(final)) {
        alert('Por favor, insira números válidos.');
        return;
    }

    resultadoDiv.innerHTML = '';

   // Criar um conjunto para armazenar os números sorteados
   let numerosSorteados = new Set();

   while (numerosSorteados.size < quantidade) {
       let numeroAleatorio = Math.floor(Math.random() * (final - inicial + 1)) + inicial;
       numerosSorteados.add(numeroAleatorio);
   }

   // Exibir os números sorteados
   let textoResultado = 'Números Sorteados: ';
   let contador = 0;
   numerosSorteados.forEach(numero => {
    textoResultado += "" + numero;
    contador ++;
    if (contador < numerosSorteados.size) {
        textoResultado += ', ';
    }

   });
   resultadoDiv.textContent = textoResultado;
   reiniciarButton.disabled = false; // Habilita o botão após sortear
}

function reiniciar() {
    quantidadeInput.value = '';
    inicialInput.value = '';
    finalInput.value = '';
    resultadoDiv.innerHTML = '';
    document.getElementById('resultado').innerHTML = '<label class="texto__paragrafo">Números sorteados:  nenhum até agora:</label>';
    reiniciarButton.disabled = true; // Desabilita o botão após reiniciar
}

sortearButton.addEventListener('click', sortearNumeros);
reiniciarButton.addEventListener('click', reiniciar);

Meu index alterei pouco: mudei a class para não criar tantas linhas.

     <button onclick="reiniciar()" id="reiniciar" class="container__botao" disabled >Reiniciar</button>

Meu CSS acrescentei isso:

.container__texto-resposta {
    margin: 12px 5%;
    display: flex;
    flex-direction: column;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-image: linear-gradient(to right, #3498db, #222);
    animation: pulsar 1.5s infinite;
  }

  @keyframes pulsar {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

.container__texto {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
}

Olá, Paulo!

Parabéns por se desafiar e explorar além do que foi proposto inicialmente! É uma ótima maneira de aprender e se aprofundar no conhecimento. Vamos dar uma olhada no seu código.

Pelo que você compartilhou, seu código parece estar bem estruturado e funcional. Você usou um Set para garantir que os números sorteados não se repitam, o que é uma abordagem interessante e eficaz para esse tipo de problema. Além disso, você está utilizando a função Math.random() para gerar números aleatórios, o que é perfeito para a funcionalidade de sorteio.

Uma coisa que pode ser interessante explorar é o uso de Template Strings para melhorar a legibilidade do seu código ao concatenar strings. No trecho onde você monta a string textoResultado, você pode usar Template Strings da seguinte forma:

let textoResultado = 'Números Sorteados: ';
let contador = 0;
numerosSorteados.forEach(numero => {
    textoResultado += `${numero}`;
    contador++;
    if (contador < numerosSorteados.size) {
        textoResultado += ', ';
    }
});

Além disso, você mencionou que alterou o HTML e o CSS. As mudanças que você fez no CSS, como a animação de pulsar e o gradiente de fundo, são ótimas para dar um toque visual mais dinâmico ao seu projeto.

Se você está enfrentando algum problema específico com o resultado que é diferente do esperado, pode ser útil revisar se os valores de entrada estão sendo corretamente convertidos e utilizados no cálculo. Certifique-se de que os valores de inicial e final são apropriados para o intervalo desejado e que quantidade não excede o número de possíveis valores únicos no intervalo.

Espero ter ajudado e bons estudos!