1
resposta

[Projeto] Projeto Amigo Secreto - tentando fazer sozinho

A maior parte do código eu fiz sozinho, tirando a parte da function embaralha e o for.


let listaAmigos = document.getElementById('lista-amigos');
let listaSorteados = document.getElementById('lista-sorteio');

function adicionar() {
    let amigos = document.getElementById('nome-amigo').value; 
    if (amigos == [''] ) {
        alert('Escreva um nome para adicionar à lista');
    return;
} else if (listaAmigos.textContent.includes(amigos)) {
        alert('Nome ja adicionado à lista');
} else if (listaAmigos.textContent.length < 1){
    listaAmigos.textContent = listaAmigos.textContent + amigos;   
} else {
    listaAmigos.textContent = listaAmigos.textContent +', '+ amigos;
}
    document.getElementById('nome-amigo').value = [''];
}

function sortear() {
    if (  listaAmigos.textContent == [''] ) {
        alert('Não foi adicinado nenhum nome para o sorteio');
    return;
}
    listaSorteados.innerHTML = [''];
    let amigosListados = listaAmigos.textContent;
    let sorteados = amigosListados.split(',');

    if ( sorteados.length <= 3 ) {
        alert('Adicione mais nomes para o sorteio');
    return;
}
    embaralha(sorteados);
    for (let i = 0; i < sorteados.length; i++) {
if (i == sorteados.length - 1) {
    listaSorteados.innerHTML = listaSorteados.innerHTML + sorteados[i] + ' --> ' + sorteados[0] + '<br>';
} else {
    listaSorteados.innerHTML = listaSorteados.innerHTML + sorteados[i] + ' --> ' + sorteados[i + 1] + '<br>';
}  
}
}

function embaralha(lista) {
    let indice = lista.length
    while(indice) {
 const indiceAleatorio = Math.floor(Math.random() * indice--);
 [lista[indice], lista[indiceAleatorio]] = 
 [lista[indiceAleatorio], lista[indice]];
    }
}

function reiniciar() {
listaAmigos.innerHTML = [''];
listaSorteados.innerHTML = [''];
document.getElementById('nome-amigo').value = [''];
}
1 resposta

Oi, João Pedro! Tudo bem?

Que fantástico ver a sua dedicação! Tentar implementar a lógica sozinho antes de ver a solução é, sem dúvida, a melhor forma de aprender programação. E olha só: você já se adiantou e implementou as validações (campo vazio, nomes repetidos, quantidade mínima) que os instrutores comentaram que só fariam na próxima aula. Mandou muito bem!

Analisando o seu código, ele funciona e atende ao objetivo, mas tenho algumas observações que podem te ajudar a evoluir em códigos futuros. Vou pontuar aqui:

  1. Separação de Dados (Array) vs. Visualização (HTML)

O ponto principal que notei é que você está usando o texto da tela (listaAmigos.textContent) como o seu "banco de dados".

  • Como você fez: Você escreve o nome direto na tela e, quando precisa sortear, você lê a tela, quebra o texto nas vírgulas e cria o array.
  • O risco: Se um dia você decidir mudar a exibição (por exemplo, mostrar os nomes em uma lista <ul> com tópicos em vez de texto corrido com vírgulas), a sua lógica de sorteio vai quebrar, porque ela depende estritamente da formatação do texto (vírgulas).
  • A sugestão: É uma boa prática manter uma variável de estado (um array let amigos = []) no seu JavaScript.
  1. O usuário digita -> Você adiciona no array amigos.

  2. Você percorre esse array para atualizar a tela.

  3. O sorteio lê direto do array amigos, ignorando o HTML.

  4. Comparação de Tipos

Na linha: if (amigos == [''] ), você está comparando uma String (que vem do .value) com um Array com uma string vazia.
O JavaScript tenta "ajudar" e faz a conversão implícita, mas isso pode gerar comportamentos inesperados.

  • Sugestão: Como o .value retorna texto, compare sempre com string: if (amigos == '').
  1. O problema do split e espaços

Quando você usa listaAmigos.textContent +', '+ amigos, você adiciona um espaço após a vírgula.
Na hora de sortear, ao fazer split(','), os nomes (exceto o primeiro) virão com um espaço em branco no início (ex: " João" em vez de "João").

  • Sugestão: Se mantiver essa lógica, use .trim() ou faça o split considerando o espaço: .split(', ').

Continue assim, João! Essa curiosidade de ir além do que foi pedido é o que forma grandes programadores.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!