ejercicio 5: filtro de lista en tiempo real

2026-05-28 13:40:59 -03:00
parent 4b110835c7
commit 6b28028009
3 changed files with 75 additions and 2 deletions
--- a/ejercicio5/ejercicio5.js
+++ b/ejercicio5/ejercicio5.js
@@ -1 +1,43 @@
-// Agregar aquí el código javascript
+const paises = [
+    'Argentina',
+    'Brasil',
+    'Canadá',
+    'Dinamarca',
+    'España',
+    'Filipinas',
+    'Grecia',
+    'Hungría',
+    'India',
+    'Japón',
+    'México',
+    'Noruega'
+];
+
+const filtroInput = document.getElementById('filtro');
+const listaPaises = document.getElementById('lista-paises');
+
+function renderizarLista(items) {
+    listaPaises.innerHTML = '';
+
+    items.forEach((pais) => {
+        const li = document.createElement('li');
+        li.textContent = pais;
+        listaPaises.appendChild(li);
+    });
+}
+
+function filtrarPaises(texto) {
+    const valor = texto.trim().toLowerCase();
+    if (valor === '') {
+        return paises;
+    }
+
+    return paises.filter((pais) => pais.toLowerCase().includes(valor));
+}
+
+filtroInput.addEventListener('input', (event) => {
+    const paisesFiltrados = filtrarPaises(event.target.value);
+    renderizarLista(paisesFiltrados);
+});
+
+renderizarLista(paises);
--- a/ejercicio5/estilo.css
+++ b/ejercicio5/estilo.css
@@ -1,2 +1,28 @@
 /* Agregar el código CSS necesario para el ejercicio */

+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+}
+
+label,
+input {
+    display: block;
+    margin-bottom: 10px;
+}
+
+input {
+    padding: 8px;
+    max-width: 300px;
+}
+
+ul {
+    list-style: disc inside;
+    padding-left: 0;
+    max-width: 320px;
+}
+
+li {
+    margin-bottom: 5px;
+}
+
--- a/ejercicio5/index.html
+++ b/ejercicio5/index.html
@@ -2,13 +2,18 @@
 <html>
    <head>
        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejercicio 5</title>
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
        <h1>Ejercicio 5</h1>

+        <label for="filtro">Buscar país:</label>
+        <input id="filtro" type="text" placeholder="Escribí para filtrar">
+
+        <ul id="lista-paises"></ul>
+
        <script src="ejercicio5.js"></script>
    </body>
 </html>