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