// 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");
});
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
// 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.
Olá, Gabriel! Como vai?
Exatamente! Você pegou o conceito perfeito. No desenvolvimento Front-end moderno, escutar os eventos globais de teclado no JavaScript é o padrão absoluto da indústria para criar atalhos, fechar modais ou cancelar ações, garantindo uma navegação fluida tanto para quem usa o teclado por agilidade quanto por ferramentas de acessibilidade (como leitores de tela).
Para implementar isso de forma limpa e profissional, o segredo é adicionar o ouvinte de evento (addEventListener) diretamente no objeto document ou window. Afinal, o usuário pode apertar a tecla Esc estando com o foco em qualquer parte da página, e o formulário precisa reagir.
Esc na práticaNo JavaScript, quando escutamos eventos de teclado como o keydown (tecla pressionada), o navegador nos entrega um objeto de evento repleto de informações sobre a tecla capturada. A boa prática atual é ler a propriedade .key desse objeto.
Veja abaixo como integrar essa lógica ao seu projeto de forma elegante:
// Função reaproveitável para fechar o formulário
function fecharFormulario() {
formAddTarefa.reset(); // Usando o método que conversamos!
formAddTarefa.classList.add("hidden");
}
// Seu evento original do botão cancelar
btnCancelar.addEventListener("click", fecharFormulario);
// Novo ouvinte global para acessibilidade (Teclado)
document.addEventListener("keydown", (event) => {
// 1. Verifica se a tecla pressionada foi o Escape (Esc)
// 2. Opcional: Verifica se o formulário já não está escondido
if (event.key === "Escape" && !formAddTarefa.classList.contains("hidden")) {
fecharFormulario();
}
});
.key: Antigamente, os desenvolvedores usavam .keyCode === 27 para identificar o Esc. Essa numeração foi descontinuada (deprecated). Hoje o padrão W3C é usar o texto literal "Escape", que é muito mais legível.fecharFormulario): Como agora a ação de fechar pode ser disparada por dois lugares diferentes (o clique do mouse e o teclado), nós isolamos a lógica em uma função separada. Isso evita repetição de código e segue o princípio DRY (Don't Repeat Yourself).if: A checagem !formAddTarefa.classList.contains("hidden") garante que o JavaScript só vai processar o fechamento e o .reset() se o formulário realmente estiver aberto na tela, economizando processamento à toa.Dar esse passo focado em acessibilidade web (regras de A11y) é o que diferencia um desenvolvedor que apenas entrega telas de um profissional que constrói produtos inclusivos e de alta qualidade.
Implemente essa lógica no seu projeto e faça o teste. Você vai ver como a experiência de uso do seu app vai parecer muito mais robusta e responsiva!
Espero que possa ter lhe ajudado!