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);
+        }
+    }
+})