Projeto Final: App de Tarefas

Parabéns por chegar à última lição! Ao longo das 27 lições anteriores, você aprendeu sobre variáveis, funções, arrays, DOM, eventos, JSON, programação assíncrona, classes e muito mais. Agora é hora de juntar tudo e construir uma aplicação pequena completa. Este projeto será a consolidação de tudo o que você aprendeu.

Visão do Projeto

Vamos construir um App de Tarefas — pode parecer simples, mas toca quase todos os conceitos que você estudou. Quando terminar, você terá uma ferramenta de produtividade real e utilizável.

Requisitos Funcionais

1. Adicionar itens de tarefa — campo de input + botão; pressionar Enter ou clicar adiciona um novo item
2. Alternar concluída/pendente — clicar em uma tarefa alterna seu estado (efeito de riscado)
3. Excluir itens de tarefa — cada item tem um botão de exclusão ao lado
4. Filtragem — três botões: Todas / Pendentes / Concluídas
5. Armazenamento local — use localStorage para persistir dados entre atualizações da página
6. Contar itens restantes — exiba "X itens restantes" na parte inferior

Requisitos Técnicos

Critérios de Aceitação

• [ ] Todas as 6 funcionalidades funcionam corretamente
• [ ] Dados persistem após atualização da página
• [ ] Código tem comentários claros
• [ ] Sem alert/prompt/confirm — use interações na página
• [ ] Input vazio é rejeitado (com mensagem)

Ideias de Implementação de Referência

Abaixo estão dicas e direções — não código completo. Escrever você mesmo é onde o aprendizado real acontece.

Estrutura de Dados

<script>
// Cada item de tarefa é um objeto
const tarefa = {
  id: Date.now(),      // identificador único
  texto: 'Aprender JavaScript',
  concluida: false
};
console.log(tarefa);

// Todas as tarefas são armazenadas em um array
let tarefas = [];
</script>

Estrutura da Classe

<script>
class AppTarefas {
  constructor() {
    this.tarefas = [];         // dados
    this.filtro = 'todas';     // filtro atual
    this.init();               // inicializar
  }

  async init() {
    // 1. Carregar dados do localStorage
    // 2. Vincular eventos
    // 3. Renderizar a lista
  }

  async salvar() {
    // JSON.stringify → localStorage.setItem
  }

  async carregar() {
    // localStorage.getItem → JSON.parse
  }

  adicionarTarefa(texto) { /* criar objeto, push, salvar, renderizar */ }
  alternarTarefa(id) { /* encontrar item, inverter concluida, salvar, renderizar */ }
  excluirTarefa(id) { /* filtrar item, salvar, renderizar */ }

  renderizar() {
    // 1. Filtrar tarefas com base neste.filtro
    // 2. Limpar o container da lista
    // 3. Percorrer array filtrado, criar nós DOM
    // 4. Atualizar exibição da contagem
  }
}
</script>

Estratégia de Vinculação de Eventos

• Formulário submit: e.preventDefault() → obter valor do input → adicionarTarefa(texto) → limpar input
• Lista clique (delegação de eventos): verificar se e.target é o botão de alternar ou excluir → chamar o método apropriado
• Botão de filtro clique: atualizar este.filtro → renderizar()

Estratégia de Renderização

<script>
renderizar() {
  const filtradas = this.tarefas.filter(function(tarefa) {
    if (this.filtro === 'pendentes') return !tarefa.concluida;
    if (this.filtro === 'concluidas') return tarefa.concluida;
    return true;  // 'todas'
  }.bind(this));

  // Limpar o container
  this.listaEl.innerHTML = '';

  filtradas.forEach(function(tarefa) {
    var li = document.createElement('li');
    // Definir conteúdo, estilos, atributos de dados
    // Vincular eventos de alternar e excluir
    this.listaEl.appendChild(li);
  }.bind(this));

  // Atualizar a contagem
  var contagemPendentes = this.tarefas.filter(function(t) { return !t.concluida; }).length;
  this.contagemEl.textContent = contagemPendentes + ' itens restantes';
}
</script>

Ideias de Extensão

Quando as funcionalidades básicas estiverem funcionando, tente estes desafios avançados:

• 🔄 Ordenação por arrastar — implemente com a API HTML5 Drag & Drop ou eventos de toque
• ✏️ Edição — clique duplo em uma tarefa para entrar no modo edição, pressione Enter para salvar
• 🏷️ Etiquetas de categoria — adicione rótulos (trabalho / estudo / vida) e filtre por etiqueta
• 🎨 Troca de tema — tema claro/escuro, persistido com localStorage
• ⏰ Lembretes de prazo — adicione um prazo a cada item, destaque em vermelho os atrasados

Tarefa

Complete o app de tarefas acima com todas as funcionalidades, e passe em todos os critérios de aceitação.

Passos sugeridos:

1. Comece com a estrutura HTML e estilização CSS
2. Construa o esqueleto da classe AppTarefas (constructor, init)
3. Implemente adicionarTarefa e renderizar — faça a adição funcionar primeiro
4. Implemente alternarTarefa — alternar concluída/pendente
5. Implemente excluirTarefa — remover itens
6. Implemente filtragem
7. Implemente salvar e carregar — persistir dados
8. Mostre a contagem de itens restantes
9. Acabamento final: validação de input vazio, ajustes de estilo

📝 Atividades

1. Básico: Complete as funcionalidades principais de tarefas — adicionar, alternar concluída, excluir — usando um array para armazenamento (sem precisar de localStorage).
2. Intermediário: Adicione persistência com localStorage e filtragem (Todas / Pendentes / Concluídas) à versão básica; os dados devem sobreviver a uma atualização da página.
3. Desafio: Implemente pelo menos uma funcionalidade de extensão (arrastar para ordenar, edição, etiquetas de categoria, troca de tema ou lembretes de prazo), e escreva uma breve explicação da sua abordagem.