programandoai

Passo 4: Concluir e remover

Interação completa: marcar como feita com um clique e apagar com outro. O app fica pronto, e cada linha é matéria que você já viu.

Estudar esta lição interativa →

Falta o que torna uma lista de tarefas útil: concluir e remover. A versão final abaixo parece grande, mas leia com calma: não há nada novo, só peças conhecidas bem combinadas. Cada item agora nasce com dois filhos: um span com o texto, que ao ser clicado risca e desrisca (olhe o ternário do Módulo 3 alternando o textDecoration), e um botãozinho que remove o item inteiro com li.remove(). E tem um mimo de usabilidade: a lógica de adicionar virou uma função com nome (adicionar), justamente para ser reaproveitada em dois eventos, o clique no botão e o "keydown" que escuta a tecla Enter no campo, como nos apps de verdade.

🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione, clique numa tarefa para concluir, remova no botão. Teste o Enter!

Parabéns!

Olhe para cima: isso é um aplicativo interativo completo, funcional, escrito inteirinho com o que você aprendeu neste curso. Agora deixe-o com a sua cara: mude cores com style, mude os textos, e, se quiser um desafio, acrescente um contador de tarefas na tela.

← Voltar ao índice do curso