diff --git a/script.js b/script.js index 7000aff..9f54a2d 100644 --- a/script.js +++ b/script.js @@ -5,9 +5,11 @@ let libros = [ { 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) +//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 @@ -29,41 +31,33 @@ function mostrarTabla(libros) { nuevoRow.appendChild(tdPuntaje); } } -// Invocamos la función al inicio para poblar la tabla con los datos del array mostrarTabla(libros); +// Invocamos la función al inicio para poblar la tabla con los datos del array -//ejercicio 2 -// creamos las variables pertinentes para fabricar la funcion + +// 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 +// 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 { // 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); - } -}) + } 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); + }) + +