ejercicio5

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
+    }
+})