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(libros) {
    //asignamos el tbody a una variable (para usarla mas tarde)
    let tableBody = document.querySelector("tbody")
    //iteramos la lista con un for of
    for (libro of libros){ // por cada libro en libros:
        // creamos 1 row y 4 td
        let nuevoRow = document.createElement("tr");
        let tdTitulo = document.createElement("td");
        let tdAutor = document.createElement("td");
        let tdAnio = document.createElement("td");
        let tdPuntaje = document.createElement("td");
        //la llenamos con el contenido correspondiente
        tdTitulo.textContent = libro.titulo;
        tdAutor.textContent = libro.autor;
        tdAnio.textContent = libro.anio;
        tdPuntaje.textContent = libro.puntaje;
        // y las anexamos a la tabla html de forma correspondiente
        tableBody.appendChild(nuevoRow);
        nuevoRow.appendChild(tdTitulo);
        nuevoRow.appendChild(tdAutor);
        nuevoRow.appendChild(tdAnio);
        nuevoRow.appendChild(tdPuntaje);
    }
}
// Invocamos la función al inicio para poblar la tabla con los datos del array
mostrarTabla(libros);

//ejercicio 2 
// creamos las variables pertinentes para fabricar la funcion
let botonAgregar = document.querySelector("#boton-agregar");
let inputTitulo = document.querySelector("#titulo");
let inputAutor = document.querySelector("#autor");
let inputAnio = document.querySelector("#anio");
let inputCalificacion = document.querySelector("#calificacion");
// Generamos el listener en boton-agregar
botonAgregar.addEventListener("click",(n)=>{
    if (inputTitulo.value === "" || inputAutor.value === "" || inputAnio.value === "" || inputCalificacion.value === ""){ // si alguno de los campos esta vacio...
        alert("Ningun campo puede estar vacio"); // mensaje de error
    } else if (parseInt(inputCalificacion.value) < 0 || parseInt(inputCalificacion.value) > 10){ // si todos los campos estan llenos, pero la calificacion no esta entre 0 y 10 ...
        alert("el puntaje tiene que ser del 1 al 10"); // mensaje de error
    } else { // si llegamos hasta aqui es porque el codigo no presenta errores, por lo tanto reciclamos un poco del codigo del ejercicio anterior para crear elementos a la tabla
        // por cada libro creado en el formulario...
        // creamos 1 row y 4 td
        let tableBody = document.querySelector("tbody");
        let nuevoRow = document.createElement("tr");
        let tdTitulo = document.createElement("td");
        let tdAutor = document.createElement("td");
        let tdAnio = document.createElement("td");
        let tdPuntaje = document.createElement("td");
        //la llenamos con el contenido correspondiente
        tdTitulo.textContent = inputTitulo.value;
        tdAutor.textContent = inputAutor.value;
        tdAnio.textContent = inputAnio.value;
        tdPuntaje.textContent =  inputCalificacion.value;
        // y las anexamos a la tabla html de forma correspondiente
        tableBody.appendChild(nuevoRow);
        nuevoRow.appendChild(tdTitulo);
        nuevoRow.appendChild(tdAutor);
        nuevoRow.appendChild(tdAnio);
        nuevoRow.appendChild(tdPuntaje);
    }
})