📚 Pré-requisitos Teóricos: este projeto aplica conceitos ensinados em Módulo 05: JavaScript Fundamentos e DOM. Recomendado revisar antes de começar.

🟨 Manipulação Avançada de DOM, Event Delegation & Web Storage

📁 Código deste projeto: web-vanilla/ (os caminhos citados abaixo são relativos à subpasta).

v1.0 — JavaScript Moderno ES6+, DOM API, Event Delegation e LocalStorage

Trilha de Especialização Pedagógica — Projeto 1 de 4

• ➡️ v1 (este): JavaScript Moderno · DOM API · Event Delegation · Web Storage
• v2: Consumo Assíncrono com Fetch API & Promises
• v3: Single Page Application (SPA) com Roteador por Histórico
• v4: Mini-Framework Reativo com Proxies & Virtual DOM

🎓 Nível Profissional Simulado: Desenvolvedor JavaScript Júnior. Antes de aprender React, Vue ou Angular, você precisa dominar o JavaScript do navegador. Saber como o DOM funciona, como eventos propagam via Bubbling e como o Event Loop opera é o divisor de águas entre quem apenas copia código e quem cria soluções de alta performance.

🎯 Objetivo & Escopo do Projeto

Construir uma aplicação interativa de Gerenciamento de Tarefas e Eventos utilizando exclusivamente JavaScript Moderno (ES6+) Puro, implementando o padrão de Event Delegation para manipulação atômica de nós, validação em tempo real e persistência local com Web Storage API.

🧑‍💼 Fase 1 — Levantamento de Requisitos

O Briefing do Cliente (Gerente de Produtividade)

“Queremos um organizador pessoal que funcione direto no navegador, sem precisar logar ou ter backend. O usuário pode adicionar tarefas, marcar como concluídas, filtrar por status (Todas, Pendentes, Concluídas) e excluir itens. Se fechar o navegador e voltar amanhã, os dados têm que continuar lá. E o sistema precisa ser leve e responder na hora sem travar a tela.”

Requisitos Funcionais (RF) e Não-Funcionais (RNF)

📋 Fase 2 — Backlog & User Stories

🌿 Fase 3 — Engenharia em Equipe (Git Flow & Setup)

# Branch da funcionalidade
git checkout -b feature/US01-event-delegation-dom

# Abrir a aplicação
open index.html

🛠️ Fase 4 — Implementação Guiada (src/app.js)

class TaskManager {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.storageKey = 'portal_js_tasks';
    this.tasks = JSON.parse(localStorage.getItem(this.storageKey) || '[]');
    this.init();
  }

  init() {
    this.render();
    // Event Delegation: um único listener para múltiplos elementos
    this.container.addEventListener('click', (e) => {
      const btn = e.target.closest('[data-action]');
      if (!btn) return;
      const id = btn.closest('[data-id]')?.dataset.id;
      if (btn.dataset.action === 'delete') this.removeTask(id);
      if (btn.dataset.action === 'toggle') this.toggleTask(id);
    });
  }
}

🚀 Roteiro de Execução & Homologação no Laboratório

1. Inclusão do Script no Documento HTML

<div id="todo-app">
  <form id="todo-form">
    <input type="text" id="todo-input" placeholder="Nova tarefa...">
    <button type="submit">Adicionar</button>
  </form>
  <ul id="todo-list"></ul>
</div>

<script src="web-vanilla/app.js"></script>

2. Inicialização da Instância

const app = new TaskManager('todo-app');

🧭 Decisões de Arquitetura (ADRs)

• ADR 001: Adoção de Event Delegation e LocalStorage para máxima performance de renderização.

🧪 Testes de Validação & Troubleshooting

• Validação de Event Bubbling: Clique em botões aninhados dispara corretamente a ação no container pai sem duplicação de listeners.

✅ Checkpoint Final

1. Inserção, exclusão e alteração de estado funcionam sem recarregar a página.
2. Persistência automática no localStorage.