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" },
];

//asignamos el tbody a una variable y vaciamos la tabla para sacar los ejemplos
    let tableBody = document.querySelector("tbody")
    tableBody.textContent = ""

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


// ejercicio 2
// creamos las variables
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 que hara lo siguiente
botonAgregar.addEventListener("click",(n)=>{
    tableBody.textContent = ""; // borramos la tabla cada vez que ejecutamos el listener para estar evitar repetir la lista cada vez que se acciona
    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 { 
        libros.push( { titulo : inputTitulo.value , anio : inputAnio.value , puntaje : inputCalificacion.value, autor : inputAutor.value }); // si no hay errores pusheamos el nuevo objeto al array
        alert("Libro añadido con exito"); // mensaje de exito
        inputTitulo.value = "" 
        inputAutor.value = "" 
        inputAnio.value = "" 
        inputCalificacion.value = "" 
        }
    mostrarTabla(libros);
    })


// ejercicio 3
//almacenamos el buscador en una variable
let buscador = document.querySelector("div > input");  
let listaTitulosMin = libros.map(libro => libro.titulo.toLowerCase()); // array con todos los titulos en minusculas
let listaAutoresMin = libros.map (libro => libro.autor.toLowerCase()); // array con los autores en minusculas

// creamos el listener en la barra de busqueda con la configuracion "keyup" (se activara con cada tecla levantada)
buscador.addEventListener("keyup", () => {
    tableBody.textContent = "";
    let busqueda = buscador.value;
    let busquedaMin = busqueda.trim().toLowerCase(); //valor del input sin espacios y en minuscula
    for (let l of libros){ // iteramos el array
        tituloLibro = l.titulo.toLocaleLowerCase(); //titulo en minuscula
        autorLibro = l.autor.toLocaleLowerCase(); //autor en minuscula
        if(tituloLibro.includes(busquedaMin) || autorLibro.includes(busquedaMin)){ // si la busqueda coincide con titulo o autor continuamos
             // 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 = l.titulo;
            tdAutor.textContent = l.autor;
            tdAnio.textContent = l.anio;
            tdPuntaje.textContent = l.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);
        }
    }
})