diff --git a/scripts/funciones.js b/scripts/funciones.js index b35774e..d397575 100644 --- a/scripts/funciones.js +++ b/scripts/funciones.js @@ -1,4 +1,4 @@ -import { POKEMONS_DATA } from './main.js'; +import { POKEMONS_DATA, loader } from './main.js'; import { pinta_lista, $lista_pokemon } from './pinta_lista.js'; @@ -28,8 +28,10 @@ export const btn_funciones = { btn_todos: function() { - $lista_pokemon.innerHTML = "" + loader.style.display = "block"; + + $lista_pokemon.innerHTML = "" const Terápagos = POKEMONS_DATA[1024] //console.log(Terápagos) pinta_lista(Terápagos.id) diff --git a/scripts/main.js b/scripts/main.js index b6e951e..e163f14 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -6,6 +6,7 @@ const POKEMONS_DATA = []; export const loader = document.getElementById('loader'); //const $btn_tipo = document.querySelector('.btnTipo'); //const $btn_container = document.querySelectorAll('.btn-container'); +//export const $container_img = document.querySelector('.container-img'); const $nav_container = document.querySelector('#nav-container'); class Pokemon { @@ -30,7 +31,7 @@ class Pokemon { fetch(URL) .then(res => res.json()) .then(data => { - //--consola: + //---consola: console.log("%cDATA: ", "font-weight: bold; text-shadow: 1px 1px 8px #0ff", data) loader.style.display = "block"; @@ -46,9 +47,9 @@ fetch(URL) Promise.all(pokemonPromises) .then(pokemons => { let total = 0; - //---consola: + //---consola: console.log("%cpokemon 1024 - Terápagos " + "%c- desde la promesa: ", "color:#ff0", "color:#f99; text-shadow:0 0 8px #f00", pokemons[1023]); - console.log("%cPROMESAS: ", "font-weight: bold; text-shadow: 1px 1px 8px #f00", pokemonPromises) + //console.log("%cPROMESAS: ", "font-weight: bold; text-shadow: 1px 1px 8px #f00", pokemonPromises) pokemons.forEach(pokemon => { const pokemonInstance = new Pokemon ( @@ -78,19 +79,18 @@ fetch(URL) .catch(error => console.error("Error al obtener datos de los Pokémon:", error)); }) .catch(error => console.error("Error al obtener lista de Pokémon:", error)); - export { POKEMONS_DATA }; - // Llamada para INFO > Pokemon de prueba Terápagos limpio, el tipo, el objeto PODEMONS_DATA lleno y limpio tb, y la cantidad.): - function POKEMONS_DATA_por_consola() { - console.log("%cpokemon 1024 - Terápagos " + "%c- limpio: ", "color:#ff0", "color:#9f9; text-shadow:0 0 8px #0f0", POKEMONS_DATA[1024]); - //console.log(`POKEMONS_DATA type:`, typeof POKEMONS_DATA); - console.log("%cPOKEMONS_DATA: ", "font-weight: bold; text-shadow: 1px 1px 8px #0f0", POKEMONS_DATA); - console.log("%cTotal: " + Object.values(POKEMONS_DATA).length, "background: #00a"); - }; - + // Llamada INFO: +function POKEMONS_DATA_por_consola() { + console.log("%cpokemon 1024 - Terápagos " + "%c- limpio: ", "color:#ff0", "color:#9f9; text-shadow:0 0 8px #0f0", POKEMONS_DATA[1024]); + //console.log(`POKEMONS_DATA type:`, typeof POKEMONS_DATA); + //console.log("%cPOKEMONS_DATA: ", "font-weight: bold; text-shadow: 1px 1px 8px #0f0", POKEMONS_DATA); + console.log("%cTotal: " + Object.values(POKEMONS_DATA).length, "background: #00a"); +}; + // Delegación de eventos: $nav_container.addEventListener('click', (event) => { if (event.target.tagName === "BUTTON"){ const type = event.target.id; @@ -99,8 +99,6 @@ $nav_container.addEventListener('click', (event) => { typeof btn_funciones[pulsada] === 'function' ? btn_funciones[pulsada]() - : alert("Función del botón no encontrada", pulsada); + : alert("Función desactivada por mantenimiento.", pulsada); } -}); - -let ToDo = "Vale, ahora tengo que crear el resto de funciones en btn_funciones de funciones.js y configurar los gritos" +}); \ No newline at end of file diff --git a/scripts/pinta_lista.js b/scripts/pinta_lista.js index 8316961..d91067f 100644 --- a/scripts/pinta_lista.js +++ b/scripts/pinta_lista.js @@ -1,6 +1,6 @@ import { POKEMONS_DATA, loader } from './main.js'; export const $lista_pokemon = document.getElementById('lista_pokemon'); - +// export const $container_img = document.querySelector('.container-img') export function pinta_lista(pokemonId) { @@ -13,15 +13,15 @@ export function pinta_lista(pokemonId) { let {id, name, img, grito1, grito2, tipos, ataque, defensa, animacion, altura, peso } = pokemon ; - // separamos los tipos - let extraerTipos = tipos.map(tipo => { + //separación de los tipos: + let tipo = tipos.map(tipo => { let tipoId = document.getElementById(`${tipo}`).innerHTML; return `

${tipoId}

` }) - extraerTipos = extraerTipos.join('') + tipo = tipo.join('') ; - //Crea y da clase y el contenido, falta el appendChild() cuando termine de pintarlo. + //Crea y da clase y contenido, falta el appendChild(), cuando termine de pintarlo. const article = document.createElement("article"); article.classList.add("container-card"); //💥 @@ -40,7 +40,7 @@ export function pinta_lista(pokemonId) {

${defensa} 🛡

- ${extraerTipos} + ${tipos}