Enjambre Discografia «2024-2026»

// evento de búsqueda con debounce suave let debounceTimer; function onSearchInput() { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { currentSearch = searchInput.value; render(); }, 280); }

if (filteredData.length === 0) { gridContainer.innerHTML = `<div class="no-results"><i class="fas fa-dove" style="font-size: 2rem; opacity: 0.6;"></i><br/>No encontramos lanzamientos con esos criterios. <br> 🎧 ¡Prueba con "Manía" o "2020"!</div>`; return; }

return filtered; }

// construcción de cards let html = ''; for (let album of filteredData) { // tipo legible let typeLabel = ''; let typeIcon = ''; if (album.type === 'estudio') { typeLabel = 'Álbum de estudio'; typeIcon = '🎙️'; } else if (album.type === 'ep') { typeLabel = 'EP / Extended Play'; typeIcon = '💿'; } else if (album.type === 'live') { typeLabel = 'En vivo / Concierto'; typeIcon = '🎤'; } enjambre discografia

// filtrar por búsqueda (título, año, canción) if (currentSearch.trim() !== '') { const searchTermNormalized = normalizeText(currentSearch.trim()); filtered = filtered.filter(album => { // match por título if (normalizeText(album.title).includes(searchTermNormalized)) return true; // match por año (string) if (album.year.toString().includes(searchTermNormalized)) return true; // match por tracks if (album.tracks.some(track => normalizeText(track).includes(searchTermNormalized))) return true; return false; }); }

<div class="hero"> <h1><i class="fas fa-dove"></i> ENJAMBRE <i class="fas fa-guitar"></i></h1> <p>Discografía completa · Estudio, EPs, En vivo · <i class="fas fa-head-side-vr"></i> legado sonoro mexicano</p> </div> // evento de búsqueda con debounce suave let

// filtros con botones function initFilters() { filterBtns.forEach(btn => { btn.addEventListener('click', () => { const filterValue = btn.getAttribute('data-filter'); currentFilter = filterValue; // actualizar active class filterBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); render(); }); }); }

<div class="controls"> <div class="search-box"> <i class="fas fa-search"></i> <input type="text" id="searchInput" placeholder="Buscar por álbum, año o canción..."> </div> <div class="filter-buttons" id="filterGroup"> <button class="filter-btn active" data-filter="all"><i class="fas fa-album-collection"></i> Todos</button> <button class="filter-btn" data-filter="estudio"><i class="fas fa-microphone-alt"></i> Estudio</button> <button class="filter-btn" data-filter="ep"><i class="fas fa-compact-disc"></i> EP</button> <button class="filter-btn" data-filter="live"><i class="fas fa-drumstick-bite"></i> En vivo</button> </div> <div class="stats" id="statsCounter">🎵 0 discos</div> </div>

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Enjambre · Discografía Esencial</title> <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } title: "Consuelo en Domingo"

// elementos DOM const gridContainer = document.getElementById('discogGrid'); const searchInput = document.getElementById('searchInput'); const filterBtns = document.querySelectorAll('.filter-btn'); const statsSpan = document.getElementById('statsCounter');

// pequeño helper para evitar XSS function escapeHtml(str) { return str.replace(/[&<>]/g, function(m) { if (m === '&') return '&'; if (m === '<') return '<'; if (m === '>') return '>'; return m; }).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) { return c; }); }