50 lines
3.0 KiB
JavaScript
50 lines
3.0 KiB
JavaScript
// Agregar aquí el código javascript
|
|
|
|
// Dado un array de países (al menos diez), construir dinámicamente una lista en
|
|
// la página con todos ellos. Es decir: la lista de países no debe estar en el
|
|
// archivo html, sino como array en javascript, y a partir de este array se debe
|
|
// generar la lista.
|
|
|
|
// Agregar un campo de texto arriba de la lista para búsqueda. A
|
|
// medida que el usuario escribe, mostrar solo los países cuyo nombre contenga el
|
|
// texto ingresado (sin distinguir mayúsculas de minúsculas). Si el campo está
|
|
// vacío, mostrar todos.
|
|
|
|
// En ningún momento debemos modificar el array original, sino ir reconstruyendo
|
|
// la lista en el DOM con cada cambio del campo de búsqueda.
|
|
|
|
|
|
// CREACION DE LA LISTA
|
|
|
|
//creamos las siguientes variables
|
|
let arrayPaises = ["Venezuela", "Jamaica", "Dinamarca", "Mongolia", "Singapur", "Vietnam", "Letonia", "Escocia", "Congo", "Argelia"] ; // array con los paises
|
|
let arrayPaisesMinusculas = arrayPaises.map(pais=>pais.toLowerCase()) //pasamos la lista a minusculas para evitar incompatibilidades
|
|
let ulPaises = document.createElement("ul"); // cramos la UL (hasta ahora sin items)
|
|
let input = document.createElement("input"); //creamos el input
|
|
let body = document.querySelector("body"); // asignamos a esta variable la etiqueta "body"
|
|
|
|
body.appendChild(input); // incorporamos el input al body
|
|
body.appendChild(ulPaises); // lo mismo con la UL vacia
|
|
|
|
//IMPORTANTE: este for se ececutara una sola vez al cargar la pagina para crear la lista
|
|
for (let pais of arrayPaises){ // recorremos los 10 paises originales con un "for"
|
|
let liPais = document.createElement("li") //creamos el li
|
|
liPais.textContent = pais // lo llenamos con el pais iterado de la lista
|
|
ulPaises.appendChild(liPais) // y lo anexamos a la UL
|
|
}
|
|
|
|
input.addEventListener("keyup", () => { //creamos el listener que va a activase con cada "keyup" dentro del input
|
|
|
|
ulPaises.innerHTML = ""; // lo primero que hace el listener es borrar la lista para que no se repitan los elementos que queremos agregar
|
|
|
|
let busqueda = input.value.trim().toLocaleLowerCase() //texto ingresado en el input sin espacios y convertido a minusculas
|
|
let arrayPaisesMin = arrayPaises.map(p => p.toLocaleLowerCase()) // convertimos la lista de paises en minusculas
|
|
let arrayPaisesBusqueda = arrayPaisesMin.filter(pais => pais.includes(busqueda)); // almacenamos en variable los strings del array que coincidan con la busqueda
|
|
|
|
for (let p of arrayPaisesBusqueda){ // iteramos las lista que contiene solamente los paises que coinciden con el input
|
|
let liPais = document.createElement("li"); //creamos el li
|
|
liPais.textContent = p.charAt(0).toUpperCase() + p.slice(1) ; // lo rellenamos con el pais iterado de la lista ya capitalizado
|
|
// (aclaracion: la siguiente linea de codigo "charAt(0).toUpperCase() + p.slice(1)" es una forma de capitalizar la palabra, equivalente al metodo capitalize() que se encuentra en python)
|
|
ulPaises.appendChild(liPais) // lo anexamos
|
|
}
|
|
}) |