Minha solução não sei se é das melhores preciso assistir as aulas agora. Dei uma atualizada no código depois dos desafios mas preferi fazer do meu jeito ao invés da implementação do instrutor para praticar melhor a manipulação do DOM quebrei um pouco a cabeça mais deu certo.
let friends = [];
const clearInput = (id) => { document.getElementById(id).value = '';}
function add() {
let friendName = document.getElementById('nome-amigo').value;
if(friendName === '') {
alert('Digite um nome');
clearInput('nome-amigo');
return;
}
if(friends.includes(friendName)){
alert('Esse nome já foi adicionado');
clearInput('nome-amigo');
return;
}
friends.push(friendName)
// Update the DOM with the list of names
updateFriendList(friendName);
// Clear the input field after adding friend name
clearInput('nome-amigo');
}
function draw() {
clearInput('nome-amigo');
// Get the div where i need to populate the pairs that are draw
let drawFriends = document.querySelector('.prizeDraw__container');
// Clear any previous elements inside it
drawFriends.textContent = '';
// Check if we have at least 3 people so we can make a pair
if (friends.length < 3) {
alert('Precisa adicionar ao menos três nomes!');
return;
}
let shuffledFriends = shuffle(friends); // Shuffle the array
// Create a new air to pair people
let pairs = [];
// Loop to go from start 0 to array.lenght-1
for(let i = 0; i < shuffledFriends.length; i++) {
// Pair the current index to the next one and check with modulo if you are at the end so you can pair the last with the first
let pairIndex = (i + 1) % shuffledFriends.length;
// push the pair to the array
pairs.push(`${shuffledFriends[i]} -> ${shuffledFriends[pairIndex]}`);
// Create a new <p> to start manipulating the DOM to display each pair
let pairElement = document.createElement('p');
pairElement.textContent = pairs[i];
drawFriends.appendChild(pairElement);
}
}
function reset() {
friends = [];
document.querySelector('.friends__container').textContent = "";
document.querySelector('.prizeDraw__container').textContent = '';
clearInput('nome-amigo');
}
// Fisher-Yates Shuffle swapping i starting at the end of the array with a random j index generated by math.random
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function updateFriendList(friendName) {
const friendsList = document.getElementById('lista-amigos');
const friendElement = document.createElement('span');
friendElement.textContent = friendName;
// Add the 'friend-item' class to apply the new styles created
friendElement.classList.add('friend-item');
// Add a click event to remove the name that was clicked
friendElement.addEventListener('click', () => {
removeFriend(friendName);
});
// Append the span to the paragraph with id 'lista-amigos'
console.log(friendsList,friendElement);
friendsList.appendChild(friendElement);
}
function removeFriend(friend) {
// Remove the friend from the array
friends = friends.filter(friend => friend !== friend);
// Now, remove the span element from the DOM
const friendsList = document.getElementById('lista-amigos');
const friendElements = friendsList.getElementsByTagName('span');
// Loop through all span elements and remove the one matching the friend to remove
for (let i = 0; i < friendElements.length; i++) {
if (friendElements[i].textContent === friend) {
friendElements[i].remove();
break; // Once we find and remove the element, stop the loop
}
}
}
