Update app.js

app.js

@@ -1,98 +1,106 @@
+// importo datos
 import data from './data.js'
+
+// seleccionamos 3 HTML elements que usaremos después
 let $container = document.getElementById('container')
 let $selectContainer = document.getElementById('select-container')
 let $search = document.getElementById("search")
-const crearPokemones = (array, container) => {
-    container.innerHTML = "" // para limpiar el contenedor cada vez que ejecutamos la función
-    array.forEach(pokemon=>{ 
-        /* name✅, hp, defense✅, attack✅, type[0] */
-
-        let card = document.createElement('div')
-        card.className = `pokemon-card ${pokemon.name.toLowerCase()}` 
-        card.innerHTML = `
-
-        <h4>Nombre: ${pokemon.name}</h4>
-        <p>Tipo: ${pokemon.type[0]}</p>
 
-        <img src="${pokemon.img}" alt="${pokemon.name}"/>
-
-        <div class="flex between">
-        <p>Vida: ${pokemon.hp}%</p>
-        <p>Ataque: ${pokemon.attack}</p>
-        <p>Defensa: ${pokemon.defense}</p>
-        </div>
-
-        `
-        container.appendChild(card)
-    })
-    if(array.length == 0){
-        console.log(array.length)
-        container.innerHTML = `
-        <p>no se encontraron resultados :(</p>
-        `
-        console.log(container)
+// Func. para limpiar el contenedor c/v que ejecuto la misma y por c/obj de poke en el array creo un html element y lo añado al container
+const crearPokemones = (array, container) => { 
+    container.innerHTML = "" // para limpiar el contenedor cada vez que ejecutamos la función
+    if (array.length < 1) { // si el array está vacío, agregamos el mensaje de que no se encontró ningún Pokemon
+        let mensaje = document.createElement('p')
+        mensaje.textContent = "No se encontró ningún Pokemon :("
+        mensaje.style.fontWeight = "600"
+        mensaje.style.color = "black"
+        container.appendChild(mensaje)
+    } else { // si hay elementos en el array, creamos los elementos HTML de los pokemones
+        array.forEach(pokemon => {
+            /* name✅, hp, defense✅, attack✅, type[0] */
+            let card = document.createElement('div')
+            card.className = `pokemon-card ${pokemon.name.toLowerCase()}`
+            card.innerHTML = `
+                <h4>Nombre: ${pokemon.name}</h4>
+                <p>Tipo: ${pokemon.type[0]}</p>
+                <img src="${pokemon.img}" alt="${pokemon.name}"/>
+                <div class="flex between">
+                    <p>Vida: ${pokemon.hp}%</p>
+                    <p>Ataque: ${pokemon.attack}</p>
+                    <p>Defensa: ${pokemon.defense}</p>
+                </div>
+            `
+            // Antigua img base: <img src="https://cf.geekdo-images.com/V9pkzNgoXitxhCjLhOKkPA__itemrep/img/4M61kAEyEc9VW9MvKQTCtpw3PZA=/fit-in/246x300/filters:strip_icc()/pic1807805.jpg" alt="${pokemon.name}"/>
+            container.appendChild(card)
+        })
     }
 }
 
-crearPokemones(data, $container)
-
-const filtrarSearch = (array, value) => { 
-/* array es la lista de pokes, value lo que pone el usuario  */
-let filteredArray = array.filter(pokemon => pokemon.name.toLowerCase().includes(value.toLowerCase().trim())) 
-//trim saca los espacios de antes y despues de que empiecen los caracteres 
-return filteredArray
+crearPokemones(data, $container) // "data" es el array con la info de los pokes, no olvidar y "container" donde se mostraran
 
+const filtrarSearch = (array, value) => { // Esta func. filtra array y devuelve nuevo array con los pokes que tengan lo escroto por el user
+    /* array es la lista de pokes, value lo que pone el usuario  */
+    let filteredArray = array.filter(pokemon => pokemon.name.toLowerCase().includes(value.toLowerCase().trim()))
+    //trim saca los espacios de antes y despues de que empiecen los caracteres
+
+    return filteredArray
 }
-const generarTipos = (array) => {
-    let arrayTipos = array.map(pokemon=> pokemon.type[0])
+
+const generarTipos = (array) => { // parám. "array" = info pokes!
+    let arrayTipos = array.map(pokemon => pokemon.type[0])
     let tiposFiltrados = [...new Set(arrayTipos)]
     return tiposFiltrados
-} //vamos a devolver/retornar un array con los tipos que existen de los pokemones
+} //vamos a devolver/retornar un array con los tipos que existen de los pokemones. Creo new array y lo filtra para que no haya repetidos. dsps devuelve el array de tipos filtrado.
 
-let tipos = generarTipos(data)
+let tipos = generarTipos(data) // Llamada a la func. "generarTipos" con el parám. "data" y guardo su resultado en "tipos"
 
-const pintarSelect = (array, container) => {
+const pintarSelect = (array, container) => { // Creo menú despñlegable con c/type poke que está en el array y lo agrega al container que es donde está todo el DOM
 
     let select = document.createElement('select')
     let option = document.createElement('option')
 
     option.setAttribute('value', "") /* seteamos el valor de "selecciona tu poke" en string vacio */
-    option.textContent = "selecciona tu poke"
+    option.textContent = "Selecciona tu Pokemon"
     select.appendChild(option)
 
-    array.forEach(tipo=>{
+    array.forEach(tipo => { // itero. p c/t pokemon creo nuevo "option" element
         let option = document.createElement('option')
         option.setAttribute('value', tipo.toLowerCase())
         option.textContent = tipo
-        select.appendChild(option)
-    }) 
-
-    container.appendChild(select)
+        select.appendChild(option) // agrego c/option al select
+    })
 
+    container.appendChild(select) // agrego el "select" completito al container element
 }
 
-pintarSelect(tipos, $selectContainer)
-let $select = document.getElementsByTagName("select")[0];
+pintarSelect(tipos, $selectContainer) // llamo a la func. encargada de pintar el menu en el html element $selectContainer
+let $select = document.getElementsByTagName("select")[0]; // selecciona "select" del HTML y lo asigna a la var(let) "$select". // Esta let se usrá para capturar el valor que seleccione el usuario seguí en insta a Seba y a Fer (perdón(?)
 
-const filtrarSelect = (array, value) => {
-let filteredArray = array.filter(pokemon => pokemon.type[0].toLowerCase().includes(value.toLowerCase()))
 
-return filteredArray
+const filtrarSelect = (array, value) => { // array pokes y el "value" es el tipo de poke seleccionado por el querido user en el menú desplegable
+    let filteredArray = array.filter(pokemon => pokemon.type[0].toLowerCase().includes(value.toLowerCase())) // contiene los pokes cuyo tipo en pos.0 incluya el valor seleccionao por user. También le ponemos todo en mayúsculas para realizar comparación de strings sin importar mayus o minus
+
+    if (filteredArray.length < 1) { // Filtro array del poke y traigo solo los pokes que coincidan en el tipo seleccionado
+        return array // devuelve el array original si no encuentra ningún poke coincidente
+    }
+    return filteredArray // si hay al menos 1, se devuelve el array con los pokes filtrados
 }
 
-const filtroCruzado = (array) => {
-    let nuevoArray = filtrarSelect(array, $select.value)
-    nuevoArray = filtrarSearch(nuevoArray, $search.value)
-    return nuevoArray
+const filtroCruzado = (array) => { // filtra los resultados en función de lo que el usuario seleccionó en el menú desplegable y/o lo que haya escrito en el input (campo de búsqueda)
+    let nuevoArray = filtrarSelect(array, $select.value) // primero filtra array según tipo seleccionado en menú desplegable (select). Queda solo con los pokes cuyo primer tipo coincida con el tipo seleccionado
+    nuevoArray = filtrarSearch(nuevoArray, $search.value) // filtra aún más según lo que se escribió en el input
+    return nuevoArray // devuelve array con results. filtrados
 }
 
-$search.addEventListener(/* evento */ 'keyup',  /* funcion */ (e)=>{
-    let nuevoArray = filtroCruzado(data)
-    crearPokemones(nuevoArray, $container)
+let arrayFiltrado = filtroCruzado(data) // almacena resultado del filtro del array "data" según los valores seleccionados en el menú desplegable y/o en la búsqueda en el input. Entonces "arrayFiltrado" es el array de objs. filtrado que se usa para mostrar los resultados actualizados en la pág. web
 
+$search.addEventListener('input', (e) => { // evento de escucha que detecta cuando el user escribe algo o pega algo en el input (input >>> keyup)
+    arrayFiltrado = filtroCruzado(data) // actualiza la variable "arrayFiltrado" con los results. del filtrado CRUZADO, esto utilizando las funciones "filtrarSelect" y "filtrarSearch"
+    crearPokemones(arrayFiltrado, $container) // actualiza el viewport con los resultados del "arrayFiltrado" filtrado(? usando la func. "crearPokemones" para mostrar las cards de los pokes en el container 
 })
 
-$selectContainer.addEventListener('change', (e)=>{
-    let nuevoArray = filtroCruzado(data)
-    crearPokemones(nuevoArray, $container)
-})
+// evento de cambio al DOM element "$selectContainer" que es nada mas y nada menos y nada mas que el contenedor del menú desplegable que se creó antes, te acordas que te dije?? presta atención che
+$selectContainer.addEventListener('change', (e) => { // user selecciona tipo en menu y dispara event "change" y este ejecuta la func. callback que pasa como 2° argumento a este method
+    arrayFiltrado = filtroCruzado(data) // func. callback actualiza array filtrado llamando a la func. "filtroCruzado"
+    crearPokemones(arrayFiltrado, $container) // después llama a la func. "crearPokemones" para volver a renderizar/pintar los pokes filtrados en el container ($container)
+}) // En resumen, estas lines of codes permiten que el user filtre los pokes por tipo seleccionando una opción en el menú desplegable menú desplegable menú desplegable menú desplegablemenú desplegable.