Enjambre Discografia -

// renderizar grid con animación sencilla function render() { const filteredData = filterDiscos(); const total = filteredData.length; statsSpan.innerHTML = `📀 ${total} ${total === 1 ? 'disco' : 'discos'}`;

// evento búsqueda searchInput.addEventListener('input', onSearchInput);

// inicializar y renderizar function init() { initFilters(); render(); } enjambre discografia

// filtrar por tipo if (currentFilter !== 'all') { filtered = filtered.filter(album => album.type === currentFilter); }

<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> // renderizar grid con animación sencilla function render()

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

// añadir efecto de pequeño detalle extra: click en estadística para resetear búsqueda opcional (doble click) statsSpan.addEventListener('dblclick', () => { searchInput.value = ''; currentSearch = ''; render(); searchInput.focus(); }); // tooltip informal statsSpan.title = "Doble clic para limpiar búsqueda"; </script> </body> </html> const total = filteredData.length

// filtrar discos según filtro + búsqueda function filterDiscos() { let filtered = [...discography];

/* custom scroll */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #ddd2c4; } ::-webkit-scrollbar-thumb { background: #aa7e5a; border-radius: 8px; }

<footer> <i class="fas fa-crown"></i> Enjambre · discografía esencial 2006–2024 · hecha con <i class="fas fa-heart" style="color:#b47c48;"></i> para los seguidores </footer>

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