marquez.juan/clase-11-ejercicio-integrador
1
0
Fork 15
Code Issues Pull Requests 8 Projects Releases Wiki Activity

feat: refactor book data structure and add rendering function

Browse Source
This commit is contained in:
Facundo Saucedo
2026-06-01 21:12:42 -03:00
parent 7bd10addd8
commit e7b1fcd74b
2 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -9,7 +9,7 @@
<body> <body>
<h1>Lista de libros</h1> <h1>Lista de libros</h1>
<div id="busqueda"> <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>
<div id="listado_libros"> <div id="listado_libros">
<table> <table>
@@ -31,6 +31,6 @@
<p id="error"></p> <p id="error"></p>
<button type="button" id="boton-agregar">Agregar libro</button> <button type="button" id="boton-agregar">Agregar libro</button>
</div> </div>
<script src="script.js"></script>
</body> </body>
<script src="script.js"></script>
</html> </html>

43
script.js
View File

@@ -1,14 +1,37 @@
let libros = [ let books = [
{ titulo: "El Aleph", anio: 1949, puntaje: 10, autor: "Borges, Jorge Luis" }, { tittle: "El Aleph", year: 1949, score: 10, author: "Borges, Jorge Luis" },
{ titulo: "Rayuela", anio: 1963, puntaje: 9 , autor: "Cortázar, Julio" }, { tittle: "Rayuela", year: 1963, score: 9 , author: "Cortázar, Julio" },
{ titulo: "Dailan Kifki", anio: 1966, puntaje: 8, autor: "Walsh, María Elena" }, { tittle: "Dailan Kifki", year: 1966, score: 8, author: "Walsh, María Elena" },
{ titulo: "La inquietud del rosal", anio: 1916, puntaje: 8, autor: "Alfonsina Storni" }, { tittle: "La inquietud del rosal", year: 1916, score: 8, author: "Alfonsina Storni" },
]; ];
function mostrarTabla(datos) { const renderTable = (books) => {
// Escribir esta función para resolver el punto 1. 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);
}
} }
renderTable(books);
// Invocamos la función al inicio para poblar la tabla con los datos del array
mostrarTabla(libros);