DifícilFase 5

Exercício Difícil — Lista de Tarefas Completa (HTML + CSS + JS)

Constrói uma pequena aplicação de tarefas: adicionar, marcar como concluída e remover, tudo no navegador.

FerramentasVS CodeNavegador

Este exercício junta tudo o que viste nesta fase — HTML, CSS, DOM e eventos — num projeto pequeno mas completo, do tipo que vais reconhecer em praticamente qualquer curso de programação web.

Passos a realizar

Cria uma pasta lista-tarefas dentro de fase5, com index.html, estilos.css e script.js.
No HTML: um input de texto, um botão "Adicionar", e uma lista ul vazia onde as tarefas vão aparecer.
No script.js, mantém um array tarefas em memória. Cada vez que adicionares uma tarefa, cria um novo elemento li, com o texto da tarefa e um botão "Remover" dentro dele, e adiciona-o à lista com appendChild.
Ao clicar numa tarefa (não no botão remover), adiciona/remove uma classe CSS "concluida" que risca o texto (dica CSS: text-decoration: line-through).
O botão "Remover" de cada tarefa deve eliminar apenas esse li da lista, usando remove().
Estiliza a lista no estilos.css: tarefas concluídas com opacidade reduzida, espaçamento confortável entre itens, e um botão remover visualmente distinto (ex: vermelho).

Fluxo de funcionamento

1Adicionar: cria <li> e insere na lista
2Clique na tarefa: alterna classe "concluida"
3Clique em Remover: remove o <li>
4CSS reage às classes

Código de exemplo

script.js

const input = document.querySelector("#nova-tarefa");
const botaoAdicionar = document.querySelector("#botao-adicionar");
const lista = document.querySelector("#lista-tarefas");

botaoAdicionar.addEventListener("click", function () {
  const texto = input.value.trim();
  if (texto === "") return;

  const item = document.createElement("li");
  item.textContent = texto;

  const botaoRemover = document.createElement("button");
  botaoRemover.textContent = "Remover";
  botaoRemover.addEventListener("click", function (evento) {
    evento.stopPropagation(); // evita marcar como concluída ao remover
    item.remove();
  });

  item.addEventListener("click", function () {
    item.classList.toggle("concluida");
  });

  item.appendChild(botaoRemover);
  lista.appendChild(item);
  input.value = "";
});

Ponto de partida — completa a lógica de adicionar e remover

Dicas

Cada tarefa nova precisa do seu próprio addEventListener — se criares os elementos dinamicamente, tens de ligar os eventos a cada um assim que o crias, não só uma vez no início.
element.classList.toggle("concluida") é a forma mais simples de adicionar/remover uma classe consoante ela já lá estiver ou não.

Erros comuns

Ligar o evento de clique de "remover tarefa" ao <li> inteiro, fazendo com que clicar em qualquer parte da tarefa a apague sem querer.
Esquecer de limpar o valor do input depois de adicionar, permitindo adicionar a mesma tarefa várias vezes sem reparar.

As minhas dúvidas

Voltar à vista da fase