64 lines
2.0 KiB
JavaScript
Executable File
64 lines
2.0 KiB
JavaScript
Executable File
document.addEventListener("DOMContentLoaded", () => {
|
|
const container = document.getElementById("booksContainer");
|
|
const searchInput = document.getElementById("searchInput");
|
|
const categoryFilter = document.getElementById("categoryFilter");
|
|
|
|
let libros = [];
|
|
|
|
// Cargar datos desde JSON
|
|
fetch("data/libros.json")
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
libros = data;
|
|
renderBooks(libros);
|
|
});
|
|
|
|
// Renderizar tarjetas
|
|
function renderBooks(lista) {
|
|
container.innerHTML = "";
|
|
|
|
if (lista.length === 0) {
|
|
container.innerHTML = "<p>No se encontraron resultados.</p>";
|
|
return;
|
|
}
|
|
|
|
lista.forEach(libro => {
|
|
const card = document.createElement("div");
|
|
card.className = "card";
|
|
|
|
card.innerHTML = `
|
|
<img src="${libro.portada}" alt="Portada de ${libro.titulo}">
|
|
<h3>${libro.titulo}</h3>
|
|
<p><strong>Autor:</strong> ${libro.autor}</p>
|
|
<p><strong>Categoría:</strong> ${libro.categoria}</p>
|
|
<a href="${libro.enlace}" target="_blank">Leer / Descargar</a>
|
|
`;
|
|
|
|
container.appendChild(card);
|
|
});
|
|
}
|
|
|
|
// Búsqueda en tiempo real
|
|
searchInput.addEventListener("input", filtrar);
|
|
categoryFilter.addEventListener("change", filtrar);
|
|
|
|
function filtrar() {
|
|
const texto = searchInput.value.toLowerCase();
|
|
const categoria = categoryFilter.value;
|
|
|
|
const filtrados = libros.filter(libro => {
|
|
const coincideTexto =
|
|
libro.titulo.toLowerCase().includes(texto) ||
|
|
libro.autor.toLowerCase().includes(texto) ||
|
|
libro.categoria.toLowerCase().includes(texto);
|
|
|
|
const coincideCategoria =
|
|
categoria === "all" || libro.categoria === categoria;
|
|
|
|
return coincideTexto && coincideCategoria;
|
|
});
|
|
|
|
renderBooks(filtrados);
|
|
}
|
|
});
|