Instruções
Passo 6
Agora, você vai trabalhar na abertura e fechamento do modal do formulário.
Em projetos anteriores, você aprendeu como adicionar e remover classes de um elemento com
el.classList.add() e el.classList.remove(). Outro método para usar com a propriedade classList é o método toggle.
O método toggle adicionará a classe se ela não estiver presente no elemento e removerá a classe se ela estiver presente no elemento.
element.classList.toggle("class-to-toggle");
Adicione um event listener ao elemento openTaskFormBtn e passe um evento "click" como primeiro argumento e uma função callback anônima como segundo argumento.
Dentro da função de callback, use o método classList.toggle() para alternar a classe "hidden" no elemento taskForm.
Agora você pode click no botão "Add new Task" e ver o modal do formulário.
O que fazer:
Testes:
- Você deve chamar o método `addEventListener()` na sua variável `openTaskFormBtn`.
- O "ouvinte" de evento deve "ouvir" o evento de `click`.
- A função de callback do seu event listener deve usar o método `classList.toggle()` para alternar a classe `hidden` no elemento `taskForm`. Consulte o exemplo fornecido na descrição.
Preview