// Fiz de outra forma. Segui a forma que já tinha feito com o botão de adicionar tarefa:
btnCancelar.addEventListener("click", () => {
textArea.value = "";
formAddTarefa.classList.add("hidden");
});
// Fiz de outra forma. Segui a forma que já tinha feito com o botão de adicionar tarefa:
btnCancelar.addEventListener("click", () => {
textArea.value = "";
formAddTarefa.classList.add("hidden");
});
Olá, Gabriel! Como vai?
Excelente resolução! Como você já atua como Desenvolvedor Front-end, sabe que a consistência no código é uma das virtudes que facilitam a manutenção a longo prazo.
Sua abordagem de reaproveitar a lógica usada no botão de adicionar tarefas é o que chamamos de manter a coerência da interface. Se o comportamento de "fechar" ou "esconder" algo no seu app segue sempre o mesmo padrão (limpar o campo + adicionar a classe hidden), o código fica muito mais previsível e fácil de debugar.
classList.add("hidden") é a forma mais performática e recomendada hoje em dia. Em vez de manipular o estilo diretamente no JavaScript (element.style.display = 'none'), você delega a responsabilidade visual para o CSS. Isso mantém a separação de interesses (Separation of Concerns).textArea.value = "" antes de fechar é fundamental para a experiência do usuário (UX). Sem isso, se o usuário abrir o formulário novamente, encontraria o rascunho de uma tarefa desistida, o que poderia gerar confusão..reset()Se o seu formulário crescer e passar a ter mais campos (como data, prioridade ou etiquetas), limpar um por um manualmente pode ficar trabalhoso. Uma dica "pro" é usar o método nativo de formulários:
btnCancelar.addEventListener("click", () => {
formAddTarefa.reset(); // Limpa todos os inputs e campos de texto de uma vez
formAddTarefa.classList.add("hidden");
});
Seu código está limpo e direto ao ponto. Você chegou a testar se o formulário também fecha se o usuário apertar a tecla Esc, ou pretende implementar essa funcionalidade via acessibilidade?
Obrigado pela dica, Evandro! Eu até tinha chegado a procurar por um método que fazia essa função, mas optei por essa forma, que já sabia. Ótimo saber que existe um método pra isso.
Sobre a tecla Esc, ainda não implementei, mas irei. Achei interessante você comentar isso por questão de acessibilidade e UX. Nesse caso, a abordagem mais recomendada seria tratar isso via JavaScript escutando o evento de teclado, certo? Pelo que entendi, parece ser o padrão mais utilizado.