marquez.juan/clase-10-ejercicios-de-repaso
1
0
Fork 7
Code Issues Pull Requests 4 Projects Releases Wiki Activity

ejercicio 5: filtro de lista en tiempo real

Browse Source
This commit is contained in:
Sergio Madera De Marco
2026-05-28 13:40:59 -03:00
parent 4b110835c7
commit 6b28028009
3 changed files with 75 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
ejercicio5/ejercicio5.js
View File

@@ -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);

26
ejercicio5/estilo.css
View File

@@ -1,2 +1,28 @@
/* Agregar el código CSS necesario para el ejercicio */ /* 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;
}

7
ejercicio5/index.html
View File

@@ -2,13 +2,18 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <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> <title>Ejercicio 5</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Ejercicio 5</h1> <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> <script src="ejercicio5.js"></script>
</body> </body>
</html> </html>