ejercicio resuelto

script.js

@@ -7,8 +7,77 @@ let libros = [
 
 function mostrarTabla(datos) {
     // Escribir esta función para resolver el punto 1.
+    const tabla = document.getElementById("datos-libros");
+    tabla.innerHTML = "";
+    for(const libro of datos){
+        tabla.innerHTML += 
+        "<tr>" +
+            "<td>" + libro.titulo + "</td>" +
+            "<td>" + libro.autor + "</td>" +
+            "<td>" + libro.anio + "</td>" +
+            "<td>" + libro.puntaje + "</td>" +
+        "</tr>";
+    }
 }
 
+function agregarDatos(datos){
+
+    let errores = 0;
+
+    const titulo = document.getElementById("titulo")
+    const autor = document.getElementById("autor")
+    const anio = document.getElementById("anio")
+    const puntaje = document.getElementById("calificacion")
+
+    if(titulo.value.trim() === ""){
+        titulo.setAttribute("placeholder", "EL TITULO NO PUEDE ESTAR VACIO");
+        titulo.classList.add("error")
+        errores = errores + 1;
+    }
+    if(autor.value.trim() === ""){
+        autor.setAttribute("placeholder", "EL AUTOR NO PUEDE ESTAR VACIO");
+        autor.classList.add("error")
+        errores = errores + 1;
+    }
+    if(anio.value < 0 || anio.value.trim() === ""){
+        anio.value = "";
+        anio.setAttribute("placeholder", "EL AÑO TIENE QUE SER MAYOR A 0");
+        anio.classList.add("error")
+        errores = errores + 1;
+    }
+    if(puntaje.value > 10 || puntaje.value < 0 || puntaje.value.trim() === ""){
+        puntaje.value = "";
+        puntaje.setAttribute("placeholder", "EL PUNTAJE DEBE SER ENTRE 0 Y 10");
+        puntaje.classList.add("error")
+        errores = errores + 1;
+    }
+
+    if(errores === 0){
+        libros.push({titulo: titulo.value, anio: anio.value, puntaje: puntaje.value, autor: autor.value});
+    }
+    
+}
+
+const boton = document.getElementById("boton-agregar");
+boton.addEventListener("click", () => {
+   agregarDatos(libros);
+   mostrarTabla(libros);
+})
+
+const busqueda = document.getElementById("busqueda");
+busqueda.addEventListener("input", () => {
+    const text = busqueda.value.toLowerCase();
+
+     const filtrados = libros.filter(libros =>
+        libros.titulo.toLowerCase().includes(text) ||
+        libros.autor.toLowerCase().includes(text)
+    );
+   
+    mostrarTabla(filtrados);
+})
 
 // Invocamos la función al inicio para poblar la tabla con los datos del array
-mostrarTabla(libros);
+
+document.addEventListener("DOMContentLoaded", () => {
+    mostrarTabla(libros);
+})