Ejercicio 2 incompleto
This commit is contained in:
@@ -53,12 +53,6 @@ th, td {
|
|||||||
border-bottom: 1px solid #e0e0e0;
|
border-bottom: 1px solid #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Centrar columnas específicas (Año y Puntaje) */
|
|
||||||
th:nth-child(3), td:nth-child(3),
|
|
||||||
th:nth-child(4), td:nth-child(4) {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background-color: #4a69bd;
|
background-color: #4a69bd;
|
||||||
color: white;
|
color: white;
|
||||||
|
|||||||
@@ -31,6 +31,7 @@
|
|||||||
<p id="error"></p>
|
<p id="error"></p>
|
||||||
<button type="button" id="boton-agregar">Agregar libro</button>
|
<button type="button" id="boton-agregar">Agregar libro</button>
|
||||||
</div>
|
</div>
|
||||||
|
<p id="exito"></p>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
53
script.js
53
script.js
@@ -22,3 +22,56 @@ function mostrarTabla(datos) {
|
|||||||
}
|
}
|
||||||
// Invocamos la función al inicio para poblar la tabla con los datos del array
|
// Invocamos la función al inicio para poblar la tabla con los datos del array
|
||||||
mostrarTabla(libros);
|
mostrarTabla(libros);
|
||||||
|
|
||||||
|
const form = document.querySelector("#boton-agregar")
|
||||||
|
|
||||||
|
function taMal(id, mensaje) {
|
||||||
|
document.querySelector(id).textContent = mensaje;
|
||||||
|
}
|
||||||
|
|
||||||
|
function yaNoTa(id) {
|
||||||
|
document.querySelector(id).textContent = ""
|
||||||
|
}
|
||||||
|
|
||||||
|
form.addEventListener("click", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const titulo = document.querySelector("#titulo").value.trim();
|
||||||
|
const autor = document.querySelector("#autor").value.trim();
|
||||||
|
const anio = document.querySelector("#anio").value.trim();
|
||||||
|
const calificacion = document.querySelector("#calificacion").value;
|
||||||
|
|
||||||
|
yaNoTa("#error");
|
||||||
|
yaNoTa("#error");
|
||||||
|
yaNoTa("#error");
|
||||||
|
yaNoTa("#error");
|
||||||
|
|
||||||
|
|
||||||
|
let valido = true;
|
||||||
|
|
||||||
|
|
||||||
|
if (titulo === "") {
|
||||||
|
taMal("#error", "El titulo no puede estar vacío.");
|
||||||
|
valido = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (autor === "") {
|
||||||
|
taMal("#error", "El autor no puede estar vacío.");
|
||||||
|
valido = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (anio === "") {
|
||||||
|
taMal("#error", "El año no puede estar vacío.");
|
||||||
|
valido = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (calificacion === "" || parseInt(calificacion) < 0 || parseInt(calificacion) > 10) {
|
||||||
|
taMal("#error", "La calificaion tiene que ser mayor que 0 y menor que 10.");
|
||||||
|
valido = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (valido) {
|
||||||
|
document.querySelector("#exito").textContent = "Formulario enviado correctamente.";
|
||||||
|
form.reset(); // reset() limpia todos los campos del formulario
|
||||||
|
}
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user