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

@@ -21,7 +21,19 @@ function mostrarTabla(libros) {
     }
 }
 mostrarTabla(libros);
-
 })
-// Invocamos la función al inicio para poblar la tabla con los datos del array
+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");
+}
+})
+
+