Fiz o projeto de amigo secreto direto da aula de apresentação, dessa vez não adicionei nenhuma função além por não ter tido nenhuma grande ideia, aceito sugestões. De qualquer maneira, a mensagem que quero passar é de, caso recebam uma demanda de maneira visual, como os professores geram na aula de apresentação, observem os detalhes. Fiz o código e descobri várias coisas testando, como a maneira de fazer as "setinhas" entre cada nome, que eu testei e deu certo como imaginei, ou à maneira da ultima linha de sorteio ter o padrão de se repetir, sendo o ultimo nome com o primeiro, percebi isso observando a execução na aula de apresentação, e liguei os pontos após ter tido erros ao tentar fazer da maneira usual. Errar e testar fazem parte do processo, e pesquisar também, acessei a documentação para verificar funções como o embaralhamento de Arrays e a tag br para exibir linhas com quebra no html. Deixo meu código abaixo para visualização mais rápida que pelo GitHub:
//Array para armazenas os nomes adicionados
let arrayNomes =[];
function adicionar() { //Botão adicionar
//Recebe e confere os valores dos Campos e armazena na Array
let nome = document.getElementById('nome-amigo').value;
if (nome!==''){
if (!arrayNomes.includes(` ${nome}`)){
arrayNomes.push(` ${nome}`);
let amigosIncluidos=document.getElementById('lista-amigos');
amigosIncluidos.innerHTML=`${arrayNomes}`;
} else {
alert(`${nome} já foi adicionado à lista.`);
}
} else {
alert ('Voce deve adicionar algum nome');
}
//Após preencher um nome, deixa o espaço livre para inserir o próximo
limparCampos('nome-amigo');
}
function reiniciar() { //Botão reiniciar, limpa os dados armazenados e a tela
arrayNomes=[];
let amigosIncluidos=document.getElementById('lista-amigos');
amigosIncluidos.innerHTML=`${arrayNomes}`;
let sorteioFinal = document.getElementById('lista-sorteio');
sorteioFinal.innerHTML = '';
}
function sortear() { //Botão sortear
//Verifica se há 2 ou mais nomes, em quantidade par
if (arrayNomes.length%2||arrayNomes.length<=2) {
alert ('Voce não pode sortear com essa quantidade de nomes.');
} else {
//Embaralha os nomes armazenados na Array
for (let i = 0; i < arrayNomes.length; i++) {
const j = Math.floor(Math.random() * (i + 1));
[arrayNomes[i], arrayNomes[j]] = [arrayNomes[j], arrayNomes[i]];
}
//Limpa a tela para caso a pessoa faça varios sorteios
let sorteioFinal = document.getElementById('lista-sorteio');
sorteioFinal.innerHTML = '';
//Loop para pegar a Array embaralhada e colocar na tela cada resultado individual
let contador = 0
while (contador < arrayNomes.length-1) {
let sorteioFinal=document.getElementById('lista-sorteio');
sorteioFinal.innerHTML+=`<br>${arrayNomes[contador]} --> ${arrayNomes[contador+1]}</br>`;
contador++;
}
//Medida para mostrar corretamente a ultima linha de sorteio sem repetição
sorteioFinal=document.getElementById('lista-sorteio');
sorteioFinal.innerHTML+= `<br>${arrayNomes[arrayNomes.length-1]} --> ${arrayNomes[0]}</br>`;
}
}
function limparCampos(id) {
document.getElementById(`${id}`).value='';
}
