diff --git a/ejercicio5/ejercicio5.js b/ejercicio5/ejercicio5.js index 6ce9e92..a75172a 100644 --- a/ejercicio5/ejercicio5.js +++ b/ejercicio5/ejercicio5.js @@ -1 +1,50 @@ // 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 + } +}) \ No newline at end of file