ejercicio 2 primera parte

estilo.css

@@ -90,7 +90,14 @@ tr:hover {
     color: red;
     font-size: 0.75em;
 }
+.visible{
+display :block    
 
+}
+.invisible{
+display: none
+
+}
 #boton-agregar:hover {
     background-color: #0ca37a;
 }

index.html

@@ -28,7 +28,7 @@
           <input type="text" name="autor" id="autor" placeholder="Apellido y nombre del autor/a">
           <input type="number" name="anio" id="anio" placeholder="Año de publicación">
           <input type="number" name="calificacion" id="calificacion" placeholder="Calificación del libro">
-          <p id="error"></p>
+          <p id="error" class="invisible">Error</p>
           <button type="button" id="boton-agregar">Agregar libro</button>
         </div>
         <script src="script.js"></script>

script.js

@@ -5,10 +5,35 @@ 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.
+document.addEventListener('DOMContentLoaded', function(){
+function mostrarTabla(libros) {
+    const cuerpo = document.querySelector("#datos-libros")
+    for (const libro of libros) {
+         const fila = document.createElement("tr")
+        fila.innerHTML = `
+        <td>${libro.titulo}</td>
+        <td>${libro.autor}</td>
+        <td>${libro.anio}</td>
+        <td>${libro.puntaje}</td> `
+
+    cuerpo.appendChild(fila);
+    }
 }
-
-
-// Invocamos la función al inicio para poblar la tabla con los datos del array
 mostrarTabla(libros);
+})
+const boton = document.querySelector("#boton-agregar");
+const error = document.querySelector("#error")
+boton.addEventListener("click", function(){
+const titulo = document.querySelector("#titulo").value;
+const autor = document.querySelector("#autor").value;
+const anio = document.querySelector("#anio").value;
+const calificacion = document.querySelector("#calificacion").value;
+if (titulo === "" || autor === "" || anio === "" || calificacion < 0 || calificacion > 10) {
+    error.classList.add("visible");        
+    error.classList.remove("invisible");
+}
+})
+
+
+