ejercicio resuelto

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "SelectedNode": "\\README.md",
+  "PreviewInSolutionExplorer": false
+}

.vs/clase-11-ejercicio-integrador/v17/DocumentLayout.json

@@ -0,0 +1,83 @@
+{
+  "Version": 1,
+  "WorkspaceRootPath": "C:\\Users\\NICOLAS\\clase-11-ejercicio-integrador\\",
+  "Documents": [
+    {
+      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|C:\\Users\\NICOLAS\\clase-11-ejercicio-integrador\\index.html||{40D31677-CBC0-4297-A9EF-89D907823A98}",
+      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:index.html||{40D31677-CBC0-4297-A9EF-89D907823A98}"
+    },
+    {
+      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|C:\\Users\\NICOLAS\\clase-11-ejercicio-integrador\\script.js||{14D17961-FE51-464D-9111-C4AF11D7D99A}",
+      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:script.js||{14D17961-FE51-464D-9111-C4AF11D7D99A}"
+    },
+    {
+      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|C:\\Users\\NICOLAS\\clase-11-ejercicio-integrador\\README.md||{EFC0BB08-EA7D-40C6-A696-C870411A895B}",
+      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:README.md||{EFC0BB08-EA7D-40C6-A696-C870411A895B}"
+    }
+  ],
+  "DocumentGroupContainers": [
+    {
+      "Orientation": 0,
+      "VerticalTabListWidth": 256,
+      "DocumentGroups": [
+        {
+          "DockedWidth": 200,
+          "SelectedChildIndex": 4,
+          "Children": [
+            {
+              "$type": "Bookmark",
+              "Name": "ST:0:0:{aa2115a1-9712-457b-9047-dbb71ca2cdd2}"
+            },
+            {
+              "$type": "Bookmark",
+              "Name": "ST:128:0:{116d2292-e37d-41cd-a077-ebacac4c8cc4}"
+            },
+            {
+              "$type": "Bookmark",
+              "Name": "ST:0:0:{3ae79031-e1bc-11d0-8f78-00a0c9110057}"
+            },
+            {
+              "$type": "Document",
+              "DocumentIndex": 2,
+              "Title": "README.md",
+              "DocumentMoniker": "C:\\Users\\NICOLAS\\clase-11-ejercicio-integrador\\README.md",
+              "RelativeDocumentMoniker": "README.md",
+              "ToolTip": "C:\\Users\\NICOLAS\\clase-11-ejercicio-integrador\\README.md",
+              "RelativeToolTip": "README.md",
+              "ViewState": "AgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
+              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.001818|",
+              "WhenOpened": "2026-06-01T23:07:58.79Z",
+              "EditorCaption": ""
+            },
+            {
+              "$type": "Document",
+              "DocumentIndex": 0,
+              "Title": "index.html",
+              "DocumentMoniker": "C:\\Users\\NICOLAS\\clase-11-ejercicio-integrador\\index.html",
+              "RelativeDocumentMoniker": "index.html",
+              "ToolTip": "C:\\Users\\NICOLAS\\clase-11-ejercicio-integrador\\index.html",
+              "RelativeToolTip": "index.html",
+              "ViewState": "AgIAAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
+              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.001512|",
+              "WhenOpened": "2026-06-01T23:07:55.976Z",
+              "EditorCaption": ""
+            },
+            {
+              "$type": "Document",
+              "DocumentIndex": 1,
+              "Title": "script.js",
+              "DocumentMoniker": "C:\\Users\\NICOLAS\\clase-11-ejercicio-integrador\\script.js",
+              "RelativeDocumentMoniker": "script.js",
+              "ToolTip": "C:\\Users\\NICOLAS\\clase-11-ejercicio-integrador\\script.js",
+              "RelativeToolTip": "script.js",
+              "ViewState": "AgIAAAAAAAAAAAAAAAAAAAgAAAA2AAAAAAAAAA==",
+              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.001646|",
+              "WhenOpened": "2026-06-01T23:05:49.115Z",
+              "EditorCaption": ""
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

estilo.css

@@ -86,7 +86,7 @@ tr:hover {
     margin-top: 10px;
 }
 
-#error {
+.error::placeholder {
     color: red;
     font-size: 0.75em;
 }

index.html

@@ -8,8 +8,8 @@
     </head>
     <body>
         <h1>Lista de libros</h1>
-        <div id="busqueda">
-            <input type="text" placeholder="Buscar por título o autor">
+        <div>
+            <input id="busqueda" type="text" placeholder="Buscar por título o autor">
         </div>
         <div id="listado_libros">
             <table>

script.js

@@ -7,8 +7,77 @@ let libros = [
 
 function mostrarTabla(datos) {
     // Escribir esta función para resolver el punto 1.
+    const tabla = document.getElementById("datos-libros");
+    tabla.innerHTML = "";
+    for(const libro of datos){
+        tabla.innerHTML += 
+        "<tr>" +
+            "<td>" + libro.titulo + "</td>" +
+            "<td>" + libro.autor + "</td>" +
+            "<td>" + libro.anio + "</td>" +
+            "<td>" + libro.puntaje + "</td>" +
+        "</tr>";
+    }
 }
 
+function agregarDatos(datos){
+
+    let errores = 0;
+
+    const titulo = document.getElementById("titulo")
+    const autor = document.getElementById("autor")
+    const anio = document.getElementById("anio")
+    const puntaje = document.getElementById("calificacion")
+
+    if(titulo.value.trim() === ""){
+        titulo.setAttribute("placeholder", "EL TITULO NO PUEDE ESTAR VACIO");
+        titulo.classList.add("error")
+        errores = errores + 1;
+    }
+    if(autor.value.trim() === ""){
+        autor.setAttribute("placeholder", "EL AUTOR NO PUEDE ESTAR VACIO");
+        autor.classList.add("error")
+        errores = errores + 1;
+    }
+    if(anio.value < 0 || anio.value.trim() === ""){
+        anio.value = "";
+        anio.setAttribute("placeholder", "EL AÑO TIENE QUE SER MAYOR A 0");
+        anio.classList.add("error")
+        errores = errores + 1;
+    }
+    if(puntaje.value > 10 || puntaje.value < 0 || puntaje.value.trim() === ""){
+        puntaje.value = "";
+        puntaje.setAttribute("placeholder", "EL PUNTAJE DEBE SER ENTRE 0 Y 10");
+        puntaje.classList.add("error")
+        errores = errores + 1;
+    }
+
+    if(errores === 0){
+        libros.push({titulo: titulo.value, anio: anio.value, puntaje: puntaje.value, autor: autor.value});
+    }
+    
+}
+
+const boton = document.getElementById("boton-agregar");
+boton.addEventListener("click", () => {
+   agregarDatos(libros);
+   mostrarTabla(libros);
+})
+
+const busqueda = document.getElementById("busqueda");
+busqueda.addEventListener("input", () => {
+    const text = busqueda.value.toLowerCase();
+
+     const filtrados = libros.filter(libros =>
+        libros.titulo.toLowerCase().includes(text) ||
+        libros.autor.toLowerCase().includes(text)
+    );
+   
+    mostrarTabla(filtrados);
+})
 
 // Invocamos la función al inicio para poblar la tabla con los datos del array
-mostrarTabla(libros);
+
+document.addEventListener("DOMContentLoaded", () => {
+    mostrarTabla(libros);
+})