From 21d371569a01bd1d294c5622a9c1a6300902b5fc Mon Sep 17 00:00:00 2001 From: Romeo Date: Mon, 1 Jun 2026 20:25:51 -0300 Subject: [PATCH 1/5] ejercicio 1 --- script.js | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index 234668b..2ed3a47 100644 --- a/script.js +++ b/script.js @@ -5,10 +5,29 @@ let libros = [ { titulo: "La inquietud del rosal", anio: 1916, puntaje: 8, autor: "Alfonsina Storni" }, ]; -function mostrarTabla(datos) { - // Escribir esta función para resolver el punto 1. +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); -- 2.49.1 From 1291db3fac4768f8a4edec04a7a7b0e9a09d26ed Mon Sep 17 00:00:00 2001 From: Romeo Date: Mon, 1 Jun 2026 21:07:35 -0300 Subject: [PATCH 2/5] ejercicio 2 --- script.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/script.js b/script.js index 2ed3a47..7000aff 100644 --- a/script.js +++ b/script.js @@ -31,3 +31,39 @@ function mostrarTabla(libros) { } // 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); + } +}) -- 2.49.1 From 928ddba87e4b4eb91f148563427d9f5d20c863ae Mon Sep 17 00:00:00 2001 From: Romeo Date: Mon, 1 Jun 2026 22:56:50 -0300 Subject: [PATCH 3/5] ejercicio 2 correciones --- script.js | 50 ++++++++++++++++++++++---------------------------- 1 file changed, 22 insertions(+), 28 deletions(-) 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); + }) + + -- 2.49.1 From b7f1e6af1ee7a3c589c78bd7ff2ab0ca9e9c4273 Mon Sep 17 00:00:00 2001 From: Romeo Date: Mon, 1 Jun 2026 23:23:04 -0300 Subject: [PATCH 4/5] avances en el ejercicio 3 --- script.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 9f54a2d..e6cf591 100644 --- a/script.js +++ b/script.js @@ -5,9 +5,9 @@ let libros = [ { titulo: "La inquietud del rosal", anio: 1916, puntaje: 8, autor: "Alfonsina Storni" }, ]; -//asignamos el tbody a una variable (para usarla mas tarde) +//asignamos el tbody a una variable y vaciamos la tabla para sacar los ejemplos let tableBody = document.querySelector("tbody") - tableBody.textContent = "" // vaciamos la tabla para sacar los libros del famoso fulano + tableBody.textContent = "" function mostrarTabla(libros) { //iteramos la lista con un for of @@ -61,3 +61,12 @@ botonAgregar.addEventListener("click",(n)=>{ }) +// ejercicio 3 +//almacenamos el buscador en una variable +let buscador = document.querySelector("div > input"); + +// creamos el listener en la barra de busqueda con la configuracion "keyup" (se activara con cada tecla levantada) +buscador.addEventListener("keyup", (e) =>{ + listaTitulos = libros.map(libro => libro.titulo); + console.log (libros); +} ) -- 2.49.1 From d3c6930be52465a259eaa0d991533d8ab45b8cef Mon Sep 17 00:00:00 2001 From: Romeo Date: Tue, 2 Jun 2026 02:57:33 -0300 Subject: [PATCH 5/5] ejercicio 3 terminado --- script.js | 38 ++++++++++++++++++++++++++++++++------ 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/script.js b/script.js index e6cf591..ac96d8f 100644 --- a/script.js +++ b/script.js @@ -50,7 +50,7 @@ botonAgregar.addEventListener("click",(n)=>{ } 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 + 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 = "" @@ -63,10 +63,36 @@ botonAgregar.addEventListener("click",(n)=>{ // ejercicio 3 //almacenamos el buscador en una variable -let buscador = document.querySelector("div > input"); +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", (e) =>{ - listaTitulos = libros.map(libro => libro.titulo); - console.log (libros); -} ) +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); + } + } +}) -- 2.49.1