📄 ESTRUTURA HTML

1. Cabeçalho e Meta Tags

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD - Gerenciador de Produtos</title>

2. Seção de Estatísticas

<div class="stats">
    <div class="stat-card">
        <div class="stat-number" id="totalProdutos">0</div>
        <div class="stat-label">Total de Produtos</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="valorTotal">R$ 0,00</div>
        <div class="stat-label">Valor Total em Estoque</div>
    </div>
</div>

Explicação:

3. Formulário Principal

<form id="produtoForm">
    <div class="form-row">
        <div class="form-group">
            <label for="nome">Nome do Produto</label>
            <input type="text" id="nome" name="nome" required>
        </div>
        <!-- ... outros campos ... -->
    </div>
</form>

Elementos importantes:

4. Sistema de Busca

<div class="search-container">
    <input type="text" class="search-input" id="searchInput" placeholder="🔍 Buscar...">
    <select id="filterCategoria">
        <option value="">Todas as categorias</option>
        <option value="Eletrônicos">Eletrônicos</option>
        <!-- ... outras opções ... -->
    </select>
</div>

5. Tabela de Dados

<table id="produtosTable">
    <thead>
        <tr>
            <th>#</th>
            <th>Nome</th>
            <!-- ... outras colunas ... -->
        </tr>
    </thead>
    <tbody id="produtosBody">
        <!-- Conteúdo gerado dinamicamente pelo JavaScript -->
    </tbody>
</table>

⚡ CÓDIGO JAVASCRIPT DETALHADO

1. Variáveis Globais e Estado

let produtos = [];
let editandoId = null;

Explicação:

2. Captura de Elementos DOM

const form = document.getElementById('produtoForm');
const tbody = document.getElementById('produtosBody');
const submitBtn = document.getElementById('submitBtn');
// ... outros elementos

Por que fazer isso:

3. Event Listeners

form.addEventListener('submit', handleSubmit);
cancelBtn.addEventListener('click', cancelarEdicao);
searchInput.addEventListener('input', filtrarProdutos);
filterCategoria.addEventListener('change', filtrarProdutos);

Eventos monitorados:

4. Função CREATE/UPDATE - handleSubmit

function handleSubmit(e) {
    e.preventDefault(); // Impede recarregamento da página
    
    const formData = new FormData(form); // Captura dados do formulário
    const produto = {
        id: editandoId || gerarId(), // Se editando usa ID existente, senão gera novo
        nome: formData.get('nome').trim(), // Remove espaços extras
        preco: parseFloat(formData.get('preco')), // Converte string para número
        categoria: formData.get('categoria'),
        descricao: formData.get('descricao').trim(),
        dataCriacao: editandoId ? 
            produtos.find(p => p.id === editandoId).dataCriacao : 
            Date.now() // Mantém data original se editando
    };

    if (editandoId) {
        // MODO UPDATE
        const index = produtos.findIndex(p => p.id === editandoId);
        produtos[index] = produto; // Substitui produto existente
        editandoId = null; // Sai do modo edição
        submitBtn.textContent = 'Adicionar Produto';
        cancelBtn.style.display = 'none';
    } else {
        // MODO CREATE
        produtos.push(produto); // Adiciona novo produto
    }

    form.reset(); // Limpa formulário
    renderizarTabela(); // Atualiza interface
    atualizarEstatisticas();
}

Detalhes importantes:

5. Função READ - renderizarTabela

function renderizarTabela(produtosFiltrados = produtos) {
    if (produtosFiltrados.length === 0) {
        tbody.innerHTML = `<tr><td colspan="7" class="empty-state">Mensagem</td></tr>`;
        return;
    }

    tbody.innerHTML = produtosFiltrados.map((produto, index) => `
        <tr>
            <td>${index + 1}</td>
            <td><strong>${produto.nome}</strong></td>
            <td><strong>${formatarPreco(produto.preco)}</strong></td>
            <td><span style="...">${produto.categoria}</span></td>
            <td>${produto.descricao || 'Sem descrição'}</td>
            <td>${formatarData(produto.dataCriacao)}</td>
            <td class="actions">
                <button class="btn-edit" onclick="editarProduto(${produto.id})">✏️ Editar</button>
                <button class="btn-delete" onclick="excluirProduto(${produto.id})">🗑️ Excluir</button>
            </td>
        </tr>
    `).join('');
}

Conceitos-chave:

6. Função UPDATE - editarProduto

function editarProduto(id) {
    const produto = produtos.find(p => p.id === id); // Encontra produto pelo ID
    if (!produto) return; // Se não encontrar, sai da função

    // Preenche formulário com dados existentes
    document.getElementById('nome').value = produto.nome;
    document.getElementById('preco').value = produto.preco;
    document.getElementById('categoria').value = produto.categoria;
    document.getElementById('descricao').value = produto.descricao;

    // Muda para modo edição
    editandoId = id;
    submitBtn.textContent = 'Atualizar Produto';
    cancelBtn.style.display = 'inline-block';

    // Scroll suave para o formulário
    document.querySelector('.form-container').scrollIntoView({ 
        behavior: 'smooth' 
    });
}

Técnicas utilizadas:

7. Função DELETE - excluirProduto

function excluirProduto(id) {
    if (confirm('Tem certeza que deseja excluir este produto?')) {
        produtos = produtos.filter(p => p.id !== id); // Remove produto do array
        renderizarTabela(); // Atualiza interface
        atualizarEstatisticas();
        
        // Se estava editando o produto excluído, cancela edição
        if (editandoId === id) {
            cancelarEdicao();
        }
    }
}

Pontos importantes:

8. Sistema de Filtros

function filtrarProdutos() {
    const termo = searchInput.value.toLowerCase(); // Busca case-insensitive
    const categoria = filterCategoria.value;

    const produtosFiltrados = produtos.filter(produto => {
        const nomeMatch = produto.nome.toLowerCase().includes(termo);
        const categoriaMatch = produto.categoria.toLowerCase().includes(termo);
        const categoriaFilter = !categoria || produto.categoria === categoria;
        
        return (nomeMatch || categoriaMatch) && categoriaFilter;
    });

    renderizarTabela(produtosFiltrados);
}

Lógica de filtro:

9. Funções Utilitárias

// Gerar ID único baseado em timestamp + random
function gerarId() {
    return Date.now() + Math.random();
}

// Formatar data em português
function formatarData(timestamp) {
    return new Date(timestamp).toLocaleDateString('pt-BR');
}

// Formatar preço em Real brasileiro
function formatarPreco(preco) {
    return new Intl.NumberFormat('pt-BR', {
        style: 'currency',
        currency: 'BRL'
    }).format(preco);
}

APIs modernas utilizadas:

10. Atualização de Estatísticas

function atualizarEstatisticas() {
    const total = produtos.length; // Conta elementos do array
    const valorTotal = produtos.reduce((sum, produto) => sum + produto.preco, 0);

    document.getElementById('totalProdutos').textContent = total;
    document.getElementById('valorTotal').textContent = formatarPreco(valorTotal);
}

Array.reduce() explicado:

🔄 FLUXO COMPLETO DO CRUD

Adicionar Produto:

  1. Usuário preenche formulário
  2. Clica "Adicionar" → dispara handleSubmit
  3. FormData captura dados
  4. Produto é adicionado ao array produtos
  5. renderizarTabela() atualiza interface
  6. atualizarEstatisticas() recalcula totais

Editar Produto:

  1. Usuário clica "Editar" → chama editarProduto(id)
  2. Formulário é preenchido com dados existentes
  3. Modo muda para "edição" (editandoId = id)
  4. Usuário modifica e envia
  5. handleSubmit detecta modo edição
  6. Produto existente é substituído no array
  7. Interface é atualizada

Excluir Produto:

  1. Usuário clica "Excluir" → chama excluirProduto(id)
  2. confirm() pede confirmação
  3. Se confirmado, filter() remove do array
  4. Interface é atualizada

Buscar/Filtrar:

  1. Usuário digita → dispara filtrarProdutos
  2. Array é filtrado por critérios
  3. renderizarTabela(produtosFiltrados) mostra apenas resultados

Este CRUD demonstra conceitos fundamentais do JavaScript moderno: manipulação de DOM, arrays, objetos, eventos, APIs nativas e programação funcional!