Entrar Ainda não tem acesso?
1
resposta

DESAFIO - AMIGO SECRETO

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Amigo Secreto e atividade Desafio: hora da prática

por Lucas Henrique Santana
| 57.7k xp | 1 posts
Engenharia de Processos

let amigos = []; function adicionar() {

let nomeAmigo = document.getElementById('nome-amigo').value;

if(amigos.includes(nomeAmigo)) {
    alert('Este nome já foi incluído na lista de Amigos. Digite um novo nome.');
} else if(nomeAmigo == '') {
    alert('O nome do amigo não pode ser vazio.');
} else {
    amigos.push(nomeAmigo);
    console.log(amigos);
}   

nomeAmigo = document.querySelector('input');
nomeAmigo.value = '';

let amigosIncluidos = document.getElementById('lista-amigos');
amigosIncluidos.innerHTML = `<p id="lista-amigos">${amigos}</p>`;

}

function sortear() {

if(amigos.length < 4) {
    alert('O número de amigos deve ser no mínimo igual a 4. Adicione mais amigos.');
    return adicionar();
}

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

for(let i = 0; i < amigos.length; i++) {
    if(i == amigos.length - 1) {
        sorteio.innerHTML = sorteio.innerHTML + amigos[i] + ' --> ' + amigos[0] + '<br>';
    } else {
        sorteio.innerHTML = sorteio.innerHTML + amigos[i] + ' --> ' + amigos[i + 1] + '<br>';
    }      
}

}

function embaralha(lista) {

for(let indice = lista.length; indice; indice--) {
    
    const indiceAleatorio = Math.floor(Math.random() * indice);

    // atribuição via destructuring
    [lista[indice - 1], lista[indiceAleatorio]] = 
    [lista[indiceAleatorio], lista[indice-1]];
}

}

function reiniciar() { amigos = []; let amigosIncluidos = document.getElementById('lista-amigos'); amigosIncluidos.innerHTML = <p id="lista-amigos">${amigos}</p>; nomeAmigo = document.querySelector('input'); nomeAmigo.value = ''; document.getElementById('lista-sorteio').innerHTML = ''; }

1 resposta
por Rodrigo da Silva Ferreira Caneppele
| 4970.1k xp | 8697 posts
Instrutor Instrutor

Olá, Lucas!

Parece que você está se saindo muito bem no desafio do Amigo Secreto! Vou te ajudar com a parte de remover um amigo da lista quando clicado. Aqui está uma sugestão de como você pode implementar essa funcionalidade:

  1. Adicionar um evento de clique aos amigos na lista: Quando você exibe os amigos na lista, pode adicionar um evento de clique a cada nome. Isso pode ser feito ao criar um elemento HTML para cada amigo e adicionar um listener de evento.

  2. Função para remover o amigo: Quando um nome é clicado, você pode chamar uma função que remove esse nome do array amigos e atualiza a lista exibida.

Aqui está um exemplo de como você pode fazer isso:

function adicionar() {
    let nomeAmigo = document.getElementById('nome-amigo').value;

    if (amigos.includes(nomeAmigo)) {
        alert('Este nome já foi incluído na lista de Amigos. Digite um novo nome.');
    } else if (nomeAmigo == '') {
        alert('O nome do amigo não pode ser vazio.');
    } else {
        amigos.push(nomeAmigo);
        atualizarLista();
    }

    nomeAmigo = document.querySelector('input');
    nomeAmigo.value = '';
}

function atualizarLista() {
    let amigosIncluidos = document.getElementById('lista-amigos');
    amigosIncluidos.innerHTML = '';

    amigos.forEach((amigo, index) => {
        let amigoElement = document.createElement('p');
        amigoElement.textContent = amigo;
        amigoElement.addEventListener('click', () => removerAmigo(index));
        amigosIncluidos.appendChild(amigoElement);
    });
}

function removerAmigo(index) {
    amigos.splice(index, 1);
    atualizarLista();
}

Com essas alterações, cada amigo na lista se torna clicável, e ao clicar, o amigo é removido da lista. A função atualizarLista é responsável por redesenhar a lista sempre que houver uma alteração.

Espero ter ajudado e bons estudos!