feat: refactor book data structure and add rendering function

This commit is contained in:
2026-06-01 21:12:42 -03:00
parent 7bd10addd8
commit e7b1fcd74b
2 changed files with 35 additions and 12 deletions

View File

@@ -9,7 +9,7 @@
<body>
<h1>Lista de libros</h1>
<div id="busqueda">
<input type="text" placeholder="Buscar por título o autor">
<input type="text" id="searchBar"placeholder="Buscar por título o autor">
</div>
<div id="listado_libros">
<table>
@@ -31,6 +31,6 @@
<p id="error"></p>
<button type="button" id="boton-agregar">Agregar libro</button>
</div>
<script src="script.js"></script>
</body>
<script src="script.js"></script>
</html>

View File

@@ -1,14 +1,37 @@
let libros = [
{ titulo: "El Aleph", anio: 1949, puntaje: 10, autor: "Borges, Jorge Luis" },
{ titulo: "Rayuela", anio: 1963, puntaje: 9 , autor: "Cortázar, Julio" },
{ titulo: "Dailan Kifki", anio: 1966, puntaje: 8, autor: "Walsh, María Elena" },
{ titulo: "La inquietud del rosal", anio: 1916, puntaje: 8, autor: "Alfonsina Storni" },
let books = [
{ tittle: "El Aleph", year: 1949, score: 10, author: "Borges, Jorge Luis" },
{ tittle: "Rayuela", year: 1963, score: 9 , author: "Cortázar, Julio" },
{ tittle: "Dailan Kifki", year: 1966, score: 8, author: "Walsh, María Elena" },
{ tittle: "La inquietud del rosal", year: 1916, score: 8, author: "Alfonsina Storni" },
];
function mostrarTabla(datos) {
// Escribir esta función para resolver el punto 1.
const renderTable = (books) => {
const tbody = document.getElementById("datos-libros");
tbody.replaceChildren();
for (const book of books) {
const tr = document.createElement('tr');
const tdTittle = document.createElement('td');
tdTittle.textContent = book.tittle;
const tdAuthor = document.createElement('td');
tdAuthor.textContent = book.author;
const tdYear = document.createElement('td');
tdYear.textContent = book.year;
const tdScore = document.createElement('td');
tdScore.textContent = book.score;
tr.appendChild(tdTittle);
tr.appendChild(tdAuthor);
tr.appendChild(tdYear);
tr.appendChild(tdScore);
tbody.appendChild(tr);
}
}
// Invocamos la función al inicio para poblar la tabla con los datos del array
mostrarTabla(libros);
renderTable(books);