diff --git a/script.js b/script.js index 234668b..ac96d8f 100644 --- a/script.js +++ b/script.js @@ -5,10 +5,94 @@ let libros = [ { titulo: "La inquietud del rosal", anio: 1916, puntaje: 8, autor: "Alfonsina Storni" }, ]; -function mostrarTabla(datos) { - // Escribir esta función para resolver el punto 1. +//asignamos el tbody a una variable y vaciamos la tabla para sacar los ejemplos + let tableBody = document.querySelector("tbody") + tableBody.textContent = "" + +function mostrarTabla(libros) { + //iteramos la lista con un for of + for (libro of libros){ // 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 = libro.titulo; + tdAutor.textContent = libro.autor; + tdAnio.textContent = libro.anio; + tdPuntaje.textContent = libro.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); + } } - - -// Invocamos la función al inicio para poblar la tabla con los datos del array mostrarTabla(libros); +// Invocamos la función al inicio para poblar la tabla con los datos del array + + +// ejercicio 2 +// creamos las variables +let botonAgregar = document.querySelector("#boton-agregar"); +let inputTitulo = document.querySelector("#titulo"); +let inputAutor = document.querySelector("#autor"); +let inputAnio = document.querySelector("#anio"); +let inputCalificacion = document.querySelector("#calificacion"); +// Generamos el listener en boton-agregar que hara lo siguiente +botonAgregar.addEventListener("click",(n)=>{ + tableBody.textContent = ""; // borramos la tabla cada vez que ejecutamos el listener para estar evitar repetir la lista cada vez que se acciona + if (inputTitulo.value === "" || inputAutor.value === "" || inputAnio.value === "" || inputCalificacion.value === ""){ // si alguno de los campos esta vacio... + alert("Ningun campo puede estar vacio"); // mensaje de error + } 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 + alert("Libro añadido con exito"); // mensaje de exito + inputTitulo.value = "" + inputAutor.value = "" + inputAnio.value = "" + inputCalificacion.value = "" + } + mostrarTabla(libros); + }) + + +// ejercicio 3 +//almacenamos el buscador en una variable +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", () => { + 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); + } + } +})