1 Commits

Author SHA1 Message Date
Juanse Marquez
ba0098e540 Solución ejercicio 5 2026-06-01 18:48:41 -03:00
4 changed files with 39 additions and 32 deletions

View File

@@ -1,22 +1 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
const boton = document.querySelector("#agregar");
boton.addEventListener("click", () => {
const campo = document.querySelector("#agregar input");
const texto = campo.value.trim();
const lista = document.querySelector("#lista ul");
// Si el campo está vacío, no hacemos nada.
if (texto === "") return;
// Creamos el nuevo ítem y lo agregamos a la lista.
const item = document.createElement("li");
item.textContent = texto;
lista.appendChild(item);
// Limpiamos el campo para que el usuario pueda escribir la próxima tarea.
campo.value = "";
// Ponemos el cursor nuevamente en el campo:
campo.focus();
});

View File

@@ -8,16 +8,6 @@
</head> </head>
<body> <body>
<h1>Ejercicio 2</h1> <h1>Ejercicio 2</h1>
<div id="lista">
<h2>Lista de tareas</h2>
<ul>
</ul>
</div>
<div id="agregar">
<input type="text" placeholder="Descripción de la nueva tarea">
<button type="button">Agregar tarea</button>
</div>
<script src="ejercicio2.js"></script> <script src="ejercicio2.js"></script>
</body> </body>

View File

@@ -1 +1,37 @@
// Agregar aquí el código javascript const paises = [
"Argentina", "Brasil", "Chile", "Colombia", "Ecuador",
"México", "Paraguay", "Perú", "Uruguay", "Venezuela"
];
const campo = document.querySelector("#filtro");
function construirLista(items) {
const lista = document.querySelector("#lista");
// Limpiamos la lista antes de reconstruirla.
lista.innerHTML = "";
for (const pais of items) {
const item = document.createElement("li");
item.textContent = pais;
lista.appendChild(item);
}
}
campo.addEventListener("input", () => {
const texto = campo.value.toLowerCase();
// Si el campo está vacío, mostramos todos los países.
// Si no, filtramos los que incluyan el texto ingresado.
// toLowerCase() en ambos lados hace la comparación sin distinguir mayúsculas.
if (texto === "") {
construirLista(paises);
} else {
const filtrados = paises.filter(p => p.toLowerCase().includes(texto));
// Otra forma, con indexOf:
// const filtrados = paises.filter(p => p.toLowerCase().indexOf(texto) > -1);
construirLista(filtrados);
}
});
// Mostramos todos los países al cargar la página.
construirLista(paises);

View File

@@ -8,6 +8,8 @@
</head> </head>
<body> <body>
<h1>Ejercicio 5</h1> <h1>Ejercicio 5</h1>
<input type="text" id="filtro" placeholder="Buscar país...">
<ul id="lista"></ul>
<script src="ejercicio5.js"></script> <script src="ejercicio5.js"></script>
</body> </body>