Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

rapaz... essa não foi muito facil não, mas acho que deu certo...rsrsr

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Amigo Secreto e atividade Adicionando amigo na lista

por Eduardo lisboa da silva couto
| 12.2k xp | 13 posts
let amigos = [];
let listaAmigos = document.getElementById("lista-amigos");
let listaSorteio = document.getElementById("lista-sorteio");

//função para adicionar amigos a lista
function adicionar()
{
    listaAmigos.innerHTML = "";
    let nomeAmigo = document.getElementById("nome-amigo").value;
    //veriica se o campo nome do amigo foi preenchido
    if (nomeAmigo.trim() === "")
        {
         alert("Digite o Nome do Amigo!");
         //chama a função de mostrar a lista de amigos, pois com o alert a pagina é atualizada e a lista ficaria em branco
                mostrarListaDeAmigos();
        }
    else
        {//faz a inserção do amigo dentro do array
         amigos.push({nome:nomeAmigo});
                 mostrarListaDeAmigos()
                 //campo nome do amigo fica em branco para inserir o proximo nome
         document.getElementById("nome-amigo").value = "";
        }
}

//imprime na tela  os nomes que foram inseridos no array
 function mostrarListaDeAmigos()
 {
    amigos.forEach(incluidos =>
        { 
            let item = document.createElement("p"); 
            item.textContent = `${incluidos.nome}`
            listaAmigos.appendChild(item);
        });        
 }

//sorteia os nomes aleatoriamente
function sortear()
{//inicializa as variaveis para que posteriormente receba os valores extraído do array
    let listaEsq = document.getElementById('lista-esquerda');
    let listaDir  = document.getElementById('lista-direita');
    // limpa a lista no campo sorteio para que não seja gerado vários campos infinitamente
    listaDir.innerHTML = "";
    listaEsq.innerHTML = "";
    
    //verifica quantos nomes foram incluídos no array
  for (let i = amigos.length - 1; i > 0; i--) 
    {//insere na variável j um numero aleatório para ser usado como indice para embaralhar os nomes
        const j = Math.floor(Math.random() * (i + 1));
        [amigos[i], amigos[j]] = [amigos[j], amigos[i]];
        //o amigo do indice j é colocado no lugar do indice i embaralhando todo o array aleatoriamente
    }
//divide o array em dois um direito outro esquerdo
        let metade = Math.ceil(amigos.length/2);
        //pega a primeira metade do array
        let esq = amigos.slice(0,metade);
        //pega a outra metade
        let dir = amigos.slice(metade);

        //percorre todo o array esquerdo criando uma tag p e incluindo cada nome inserido
   esq.forEach(incluidos =>
    {    
        let item = document.createElement("p"); 
        item.textContent = `${incluidos.nome}-->`
        listaEsq.appendChild(item);
    });
    // percorre todo o array direito criando uma nova tag p incluindo os nomes inseridos
     dir.forEach(incluidos =>
    {    
        let item = document.createElement("p"); 
        item.textContent = `${incluidos.nome}`
        listaDir.appendChild(item);
    });
}

//reinicia todos os campos e zera o array principal
function reiniciar()
{
    let listaEsq = document.getElementById('lista-esquerda');
    let listaDir  = document.getElementById('lista-direita');
    listaDir.innerHTML = "";
    listaEsq.innerHTML = "";
    amigos = [];
    listaAmigos.innerHTML = "";
    document.getElementById("nome-amigo").value = "";
}
2 respostas
solução!
por Lorena Garcia
| 12932k xp | 19335 posts
Alura Scuba Team

Oii, Eduardo! Tudo bem?

Fico muito feliz em ver que você não apenas superou o desafio, mas foi muito além do que foi proposto na aula. Programação é exatamente sobre isso: encarar a dificuldade inicial e transformar em uma solução que faça sentido para você.

Seu código demonstra que você já está explorando conceitos mais avançados e importantes no desenvolvimento de software. Vamos analisar alguns pontos excelentes da sua implementação:

O uso de arrays e objetos:

Diferente da solução da aula, que trabalhava diretamente com o texto da página, você escolheu usar um Array (amigos = []) para armazenar os dados. Essa é uma prática muito comum no mercado, pois separa os dados (a lista de nomes) da visualização (o que aparece na tela). Guardar os nomes como objetos {nome: nomeAmigo} também abre portas para você adicionar mais informações depois, se quiser.

Manipulação do DOM com createElement:

Ao usar o document.createElement("p") dentro do seu forEach, você está criando elementos de forma dinâmica e organizada. Isso deixa o HTML mais limpo e evita erros comuns de concatenação de strings.

Lógica de embaralhamento:
Você implementou uma lógica de embaralhamento manual (muito parecida com o algoritmo de Fisher-Yates), o que é excelente para garantir que o sorteio seja realmente aleatório. Dividir a lista em duas partes ("esquerda" e "direita") para mostrar quem tirou quem foi uma saída criativa para visualizar o resultado.

Dicas de refinamento:

Como você mencionou que "não foi fácil", aqui estão dois pontos que podem ajudar a simplificar ainda mais seu código no futuro:

  1. Simplificação do objeto: Como por enquanto você só usa o nome, você poderia usar apenas uma lista de textos: amigos.push(nomeAmigo). Isso facilitaria o acesso na hora de exibir.
  2. Validação de quantidade: Pra um Amigo Secreto funcionar, geralmente precisamos de pelo menos 2 ou 3 pessoas. Você poderia adicionar um if (amigos.length < 3) na sua função de sortear para avisar o usuário.

Parabéns pelo esforço e pela qualidade do código entregue. É visível que você se dedicou a entender o que cada linha estava fazendo.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por Eduardo lisboa da silva couto
| 12.2k xp | 13 posts

muito obrigado!!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA