Olá, Lucas. Como vai?
Parabéns pela excelente iniciativa e pela implementação! Essa é uma melhoria de Experiência do Usuário (UX) fantástica para o projeto do Amigo Secreto.
No desenvolvimento de software, controlar o estado dos botões (ativado/desativado) é uma boa prática fundamental. Isso impede bugs clássicos, como o usuário continuar adicionando nomes ou tentando sortear novamente após o jogo já ter sido finalizado, o que quebraria a lógica do programa.
Gostaria de destacar os pontos fortes da sua solução e trazer uma sugestão de refatoração para deixar seu código em JavaScript ainda mais limpo e elegante:
Pontos Fortes da sua Solução
- Uso da propriedade
.disabled = true/false: Isso é excelente porque vai além da parte visual. Ao mudar a propriedade nativa do HTML, você garante que, mesmo se o usuário clicar no botão, o navegador ignorará a ação e não chamará as funções adicionar() ou sortear(). - Manipulação de Classes com
classList: O uso de .remove() e .add() é a forma correta e moderna de gerenciar estilos dinâmicos no JavaScript.
Uma sugestão de melhoria: Evitando repetição de código (Princípio DRY)
Repare que dentro das funções desativandoBotoes() e ativandoBotoes(), você precisou repetir as mesmas linhas de código para o botaoAdicionar e para o botaoSortear. Na programação, sempre que fazemos algo muito parecido várias vezes, podemos simplificar criando uma função genérica ou agrupando os elementos.
Uma forma elegante de fazer isso em JavaScript é criar uma única função que recebe o botão e o estado desejado como parâmetro. Veja como suas duas funções poderiam virar uma só:
function alternarEstadoBotoes(deveDesativar) {
let botoes = [botaoAdicionar, botaoSortear];
botoes.forEach(botao => {
botao.disabled = deveDesativar;
if (deveDesativar) {
botao.classList.remove('primary');
botao.classList.add('desativado');
} else {
botao.classList.remove('desativado');
botao.classList.add('primary');
}
});
}
Para usar no seu código, bastaria chamá-la passando true (para desativar) ou false (para ativar):
- Após sortear:
alternarEstadoBotoes(true); - Ao reiniciar:
alternarEstadoBotoes(false);
Com isso, seu código fica mais curto, fácil de dar manutenção e muito profissional!
Continue compartilhando suas ideias de melhorias com a comunidade do fórum.
Espero que possa ter lhe ajudado!
