saucedo.facundo/clase-11-ejercicio-integrador
1
0
Fork 0
forked from marquez.juan/clase-11-ejercicio-integrador
Code Pull Requests Activity

Compare commits

base: saucedo.facundo:7bd10addd87cf888891f6b74580bb588f4bdcb7e
Branches Tags
saucedo.facundo:main saucedo.facundo:feat/excersices marquez.juan:main
...
compare: saucedo.facundo:af18e62e06a32b5c53650dbb0a020d9651a9d8d2
Branches Tags
saucedo.facundo:feat/excersices saucedo.facundo:main marquez.juan:main

3 Commits
7bd10addd8 ... af18e62e06

Author SHA1 Message Date
Facundo Saucedo
af18e62e06 feat: add search functionality to filter books by title or author 2026-06-01 21:14:32 -03:00
Facundo Saucedo
c1cd76ecb0 feat: add validation for book input and alert on invalid inputs 2026-06-01 21:13:47 -03:00
Facundo Saucedo
e7b1fcd74b feat: refactor book data structure and add rendering function 2026-06-01 21:12:42 -03:00
2 changed files with 74 additions and 11 deletions
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>

81
script.js
View File

@@ -1,14 +1,77 @@
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);
}
}
const validateForm = (tittle, author, year, score) => {
if (!tittle || !author || !year || !score) return false;
if (year < 0 || score < 0 || score > 10) return false;
return true;
} }
const addBook = (tittle, author, year, score) => {
if(!validateForm(tittle, author, year, score)) {
alert('Datos invalidos');
return;
}
// Invocamos la función al inicio para poblar la tabla con los datos del array books.push({tittle: tittle, year: Number(year), score: Number(score), author: author});
mostrarTabla(libros); renderTable(books);
}
document.getElementById('boton-agregar').addEventListener('click', () => {
const tittle = document.getElementById('titulo').value;
const author = document.getElementById('autor').value;
const year = document.getElementById('anio').value;
const score = document.getElementById('calificacion').value;
addBook(tittle, author, year, score);
document.getElementById('titulo').value = "";
document.getElementById('autor').value = "";
document.getElementById('anio').value = "";
document.getElementById('calificacion').value = "";
})
document.getElementById('searchBar').addEventListener('input', (e) => {
const query = e.target.value.toLowerCase();
const filtered = books.filter((book) =>
book.tittle.toLowerCase().includes(query) || book.author.toLowerCase().includes(query)
)
renderTable(filtered);
})
renderTable(books);