Primeiro projeto que inicio sozinho porém conseguir fazer de outra forma com base nos projetos anteriores.
function adicionar(){
let amigo = document.getElementById('nome-amigo').value;
let add = document.getElementById('lista-amigos');
if(amigo == ''){
alert('Digite um nome para continuar');
return;
} else{
add.innerHTML = add.innerHTML + amigo + ", ";
limpar();
console.log(`Amigo ${amigo}`)
}
}
Esta funcionando como deveria, dessa forma também pode se considerar certo?
Oi, Danilo! Tudo bem?
Parabéns por estar se aventurando no seu primeiro projeto sozinho, é sempre um grande passo! O seu código está funcional e cumpre o objetivo de adicionar nomes à lista de amigos, porém deixo como sugestão aos estudos a adição de algumas melhorias para seguir boas práticas e garantir que o código seja legível e eficiente:
Concatenar usando textContent: Em vez de usar innerHTML, que pode causar problemas de segurança e desempenho, é melhor usar textContent para manipular texto.
Separar a lógica de limpeza: É uma boa prática separar a lógica de adicionar um amigo da lógica de limpar o campo de input.
Evitar a repetição de código: Você pode simplificar a lógica de adicionar o nome, evitando a repetição de add.innerHTML.
Deixando o nosso código da seguinte forma:
function adicionar() {
let amigo = document.getElementById('nome-amigo').value;
let add = document.getElementById('lista-amigos');
if (amigo === '') {
alert('Digite um nome para continuar');
return;
}
if (add.textContent === '') {
add.textContent = amigo;
} else {
add.textContent += ', ' + amigo;
}
limpar();
console.log(`Amigo ${amigo}`);
}
function limpar() {
document.getElementById('nome-amigo').value = '';
}
Espero ter ajudado!
Um forte abraço e bons estudos!