diff --git a/script.js b/script.js index e6cf591..ac96d8f 100644 --- a/script.js +++ b/script.js @@ -50,7 +50,7 @@ botonAgregar.addEventListener("click",(n)=>{ } else if (parseInt(inputCalificacion.value) < 0 || parseInt(inputCalificacion.value) > 10){ // si todos los campos estan llenos, pero la calificacion no esta entre 0 y 10 ... alert("el puntaje tiene que ser del 1 al 10"); // mensaje de error } else { - libros.push( { titulo : inputTitulo.value , anio : inputAnio.value , puntaje : inputCalificacion.value , autor : inputAutor.value }); // si no hay errores pusheamos el nuevo objeto al array + libros.push( { titulo : inputTitulo.value , anio : inputAnio.value , puntaje : inputCalificacion.value, autor : inputAutor.value }); // si no hay errores pusheamos el nuevo objeto al array alert("Libro aƱadido con exito"); // mensaje de exito inputTitulo.value = "" inputAutor.value = "" @@ -63,10 +63,36 @@ botonAgregar.addEventListener("click",(n)=>{ // ejercicio 3 //almacenamos el buscador en una variable -let buscador = document.querySelector("div > input"); +let buscador = document.querySelector("div > input"); +let listaTitulosMin = libros.map(libro => libro.titulo.toLowerCase()); // array con todos los titulos en minusculas +let listaAutoresMin = libros.map (libro => libro.autor.toLowerCase()); // array con los autores en minusculas // creamos el listener en la barra de busqueda con la configuracion "keyup" (se activara con cada tecla levantada) -buscador.addEventListener("keyup", (e) =>{ - listaTitulos = libros.map(libro => libro.titulo); - console.log (libros); -} ) +buscador.addEventListener("keyup", () => { + tableBody.textContent = ""; + let busqueda = buscador.value; + let busquedaMin = busqueda.trim().toLowerCase(); //valor del input sin espacios y en minuscula + for (let l of libros){ // iteramos el array + tituloLibro = l.titulo.toLocaleLowerCase(); //titulo en minuscula + autorLibro = l.autor.toLocaleLowerCase(); //autor en minuscula + if(tituloLibro.includes(busquedaMin) || autorLibro.includes(busquedaMin)){ // si la busqueda coincide con titulo o autor continuamos + // por cada libro en libros creamos 1 row y 4 td + let nuevoRow = document.createElement("tr"); + let tdTitulo = document.createElement("td"); + let tdAutor = document.createElement("td"); + let tdAnio = document.createElement("td"); + let tdPuntaje = document.createElement("td"); + //la llenamos con el contenido correspondiente + tdTitulo.textContent = l.titulo; + tdAutor.textContent = l.autor; + tdAnio.textContent = l.anio; + tdPuntaje.textContent = l.puntaje; + // y las anexamos a la tabla html de forma correspondiente + tableBody.appendChild(nuevoRow); + nuevoRow.appendChild(tdTitulo); + nuevoRow.appendChild(tdAutor); + nuevoRow.appendChild(tdAnio); + nuevoRow.appendChild(tdPuntaje); + } + } +})