clase-11-ejercicio-integrador/script.js

let libros = [
    { titulo: "El Aleph", anio: 1949, puntaje: 10, autor: "Borges, Jorge Luis" },
    { titulo: "Rayuela", anio: 1963, puntaje: 9 , autor: "Cortázar, Julio" },
    { titulo: "Dailan Kifki", anio: 1966, puntaje: 8, autor: "Walsh, María Elena" },
    { titulo: "La inquietud del rosal", anio: 1916, puntaje: 8, autor: "Alfonsina Storni" },
];

function mostrarTabla(datos) {
    // Escribir esta función para resolver el punto 1.
    const libreria = document.querySelector("#listado_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>
        `;
        libreria.appendChild(fila);
    }   
}
// Invocamos la función al inicio para poblar la tabla con los datos del array
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
    }
});