[Dúvida] Melhorar o projeto final

Olá, Luis.

Tudo bem?

1 - Campo aceitando vazio: Na função adicionar() logo no começo, você pode utilizar um if para verificar se o valor do campo input está vazio, se estiver vazio você manda um alert com a mensagem: alert("Campos vazio"), se não(else) adiciona o amigo a lista com o amigos.push(amigo.value);, veja:

JavaScript:

function adicionar(){
    let amigo = document.getElementById('nome-amigo');
    let lista = document.getElementById('lista-amigos');

    if(amigo.value == ""){

        alert("Campos vazio")
    }else{
        amigos.push(amigo.value);
    }

....RESTO DO CÓDIGO NORMALMENTE - FOI OMITIDO

2 - Sorteio imprimindo a lista novamente: Para resolver essa parte que fica imprimindo os nomes do sorteio infinitamente quando aperta o botão "Sortear". Você pode simplesmente limpar o conteúdo da tag <p id="lista-sorteio"></p>, passando sorteio.innerHTML = "";, antes do for que imprime os nomes veja:

JavaScript:

function sortear() {

    if (amigos.length < 4) {
        alert('Adicione pelo menos 4 amigos!');
        return;
    }

    embaralha(amigos);
    let sorteio = document.getElementById('lista-sorteio') 
    sorteio.innerHTML = "";                                                                    //AQUI NESSA LINHA
    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>';
        }
    }
}

3 - Quando adiciona vários nomes, eles passam da tela:

Para resolver isso primeiro você vai ter que mudar sua tag <p id="lista-amigos"></p> no HTML para div, ficando: <div id="lista-amigos"></div>. No CSS você vai pegar essa div pelo id, e passar display: flex;, flex-direction: column; isso vai manter o mesmo resultado que estava antes, mantendo os nomes um em baixo do outro, agora vem o segredo, adiciona o flex-wrap: wrap;, isso faz com que, o nome vá para a coluna do lado quando chegar no limite da tela, então atribuimos, adicionamos um limite para o quadro, max-height: 200px;, isso faz com que o quadro comece pequeno e cresce até 200px, veja:

CSS:

#lista-amigos{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 200px;
}

Isso já resolve, porém os nomes da segunda coluna vão ficar colados, então para corrigir, na função atualizarLista() vamos adicionar a linha de código paragrafo.classList.add("paragrafo-nome") após a criação do "paragrafo" assim vai adicionar uma classe CSS chamada "paragrafo-nome" aos elementos <p> dos nomes, então no CSS adicionamos uma margem a esquerda nesse elemento, assim os nomes não ficam colados, veja:

JavaScript:

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

    for (let i = 0; i < amigos.length; i++) {

        let paragrafo = document.createElement('p');
        paragrafo.classList.add("paragrafo-nome")        //Adicionando a classe CSS
        paragrafo.textContent = amigos [i];

        paragrafo.addEventListener('click', function(){
            excluirAmigo(i);
        });

        lista.appendChild(paragrafo);
    }
}

CSS:

.paragrafo-nome{
  margin-left: 1em;
}

Testa por gentileza. Uma dica é mandar cada dúvida dessa em um tópico diferente assim vai ser mais rápida a resposta pois eu tive que fazer todas para depois te responder, sendo que eu poderia soltar a primeira e você já ir testando, enquanto eu ou outro monitor já ia respondendo as outras. Outro ponto é que não coloquei na ordem das suas dúvidas então confere por gentileza.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.

Boa tarde Rodrigo, show, consegui resolver, a forma como explica consigo estudar as funções e onde precisava se aplicar, me ajudou bastante, eu vou fazer isso de postar separado quando tiver duvidas, havia postado no mesmo post para tentar manter a continuidade das duvidas, assim que terminar os outros cursos vou aplicar os novos conhecimentos também, gratidão.

Valeu Luis. Fico feliz em ajudar. Qualquer coisa conta com a gente!