64 lines
3.0 KiB
JavaScript
64 lines
3.0 KiB
JavaScript
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 (para usarla mas tarde)
|
|
let tableBody = document.querySelector("tbody")
|
|
tableBody.textContent = "" // vaciamos la tabla para sacar los libros del famoso fulano
|
|
|
|
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);
|
|
})
|
|
|
|
|