-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from JoeTheorium/master
Contribución alumnos
- Loading branch information
Showing
5 changed files
with
156 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| # POKEMON API - Argentina Programa 4.0 + MindHub - Cohorte FE06-TN | ||
|
|
||
| ## HTML otorgado por https://github.com/LucasEzequielSilva | ||
| ## CSS creado por https://github.com/CarlosSebastianLorenzo | ||
| ## JS creado por https://github.com/JoeTheorium |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters