diff --git a/ToDo.txt b/ToDo.txt index 28dc3c6..f1cedc7 100644 --- a/ToDo.txt +++ b/ToDo.txt @@ -21,9 +21,6 @@ // A partir del 649 no tienen 2º GRITO. - - - - TO DO - LISTA POR HACER: [✅] VISTA ALEATORIA, al entrar en la POKÉDEX. [✅] BARRA SCROLL: Personalizada. @@ -34,25 +31,13 @@ [ ] BARRA DE BÚSQUEDA: en nav parte derecha. [ ] LOGO CONANCOS.DEV: en nav parte izquierda. [ ] FOOTER: en body "make it with ❤🙌🤙 Hazte con todos!" - [ ] CLICK EN LOADER, cambia de color => azul/blanco => rojo/blonco. + [❌] CLICK EN LOADER, cambia de color => azul/blanco => rojo/blonco. [✅] MANEJO DE ERRORES: Para cuando no hay animación ó 2º grito. [✅] BOTONES: 1ª Generación, 2ª Gen. 3ª, 4ª, 5ª, 6ª, 7ª, 8ª, 9ª! y los 10001 al 10277 [✅] SUBIR: a gitHub, y al servidor. [✅] EL RESPONSIVE, para TODOS los móviles, sin fallo. [✅] Deshacer los eventos de escucha en el forEach de cada botón pues consume memoria, usar Delegación de propagación en contenedor padre. [✅] Construir función y meter las funciones de los botones como propiedades, así podré llamarlas por el nombre dinámicamente. + [✅] Configurar los gritos para las cards. [ ] Construir el resto de funciones que representan las llamadas fetch para el resto de botones. - [ ] Configurar los gritos para las cards. - ❗ [ ] SEGURAMENTE, tendré que eliminar el archivo "aleatorio.js" desde gitHub, ya que le cambié el nombre a "funciones.js" - - - // - let total = 0; - pokemonArrayTipos.forEach(pokemon => { - const tipos = pokemon.types.map(tipo => tipo.type.name); - - if (botonTargeret === "todos") - }) - console.log(pokemonArray[0]) - loader.style.display = "none"; - \ No newline at end of file + [ ] El acceso más rápido a la lista de pokémon por tipo o generación. \ No newline at end of file diff --git a/scripts/css-js/active.js b/scripts/css-js/active.js index 29329ee..e26df59 100644 --- a/scripts/css-js/active.js +++ b/scripts/css-js/active.js @@ -3,6 +3,8 @@ const btnLi = document.querySelectorAll('.tipos'); btnTipo.forEach(boton => { boton.addEventListener('click', (eve) => { + // X consola \ Remuevo clase .active \ Y le hago objetivo al padre y le doy la clase. + console.log("Botón activo", eve.target.innerText); btnLi.forEach(li => li.classList.remove('active')); eve.target.parentElement.classList.add("active"); }) diff --git a/scripts/funciones.js b/scripts/funciones.js index 5114835..b35774e 100644 --- a/scripts/funciones.js +++ b/scripts/funciones.js @@ -1,10 +1,10 @@ import { POKEMONS_DATA } from './main.js'; -import { pinta_lista } from './pinta_lista.js'; +import { pinta_lista, $lista_pokemon } from './pinta_lista.js'; + export const btn_funciones = { btn_aleatorio: function() { - const aleatorios = []; const keys = Object.keys(POKEMONS_DATA); const totalPokemons = keys.length; @@ -15,15 +15,33 @@ export const btn_funciones = { if (!aleatorios.includes(pokemonId)) { aleatorios.push(pokemonId) - // aleatorios.sort((a, b) => a - b); + // aleatorios.sort((a, b) => a - b); LUEGO LO PONDRÉ } } - //=>Por consola - console.log(`%c${aleatorios.length} ` + "Pokémon aleatorios", "color:#0ff"); + //=>info por consola + console.log(`%c${aleatorios.length} ` + "Pokémon", "color:#0ff"); - const $lista_pokemon = document.querySelector('#lista_pokemon'); $lista_pokemon.innerHTML = ""; - aleatorios.forEach((pokemonId) => pinta_lista(pokemonId)); + aleatorios.forEach((pokemonId) => pinta_lista(pokemonId)) + ; + }, + + + btn_todos: function() { + $lista_pokemon.innerHTML = "" + + const Terápagos = POKEMONS_DATA[1024] + //console.log(Terápagos) + pinta_lista(Terápagos.id) + + for (const pokemon of POKEMONS_DATA) { + + if(pokemon){ + let pokemonId = pokemon.id + + pinta_lista(pokemonId) + } + }; }, // + funciones diff --git a/scripts/main.js b/scripts/main.js index d39504c..b6e951e 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -3,8 +3,9 @@ import {btn_funciones} from "./funciones.js"; const URL = "https://pokeapi.co/api/v2/pokemon/"; const POKEMONS_DATA = []; - -const loader = document.getElementById('loader'); +export const loader = document.getElementById('loader'); +//const $btn_tipo = document.querySelector('.btnTipo'); +//const $btn_container = document.querySelectorAll('.btn-container'); const $nav_container = document.querySelector('#nav-container'); class Pokemon { @@ -24,6 +25,7 @@ class Pokemon { } }; +// Fetching de datos a la Pokeapi y meto todas las promesas en el array pokemonPromises: fetch(URL) .then(res => res.json()) @@ -69,8 +71,9 @@ fetch(URL) console.log(`%cTotal: ${total}`, "background: #00a"); loader.style.display = "none"; - POKEMONS_DATA_por_consola(); - btn_funciones.btn_aleatorio(); + POKEMONS_DATA_por_consola() // <== Llamada + btn_funciones.btn_aleatorio() // <== Llamada + //btn_funciones.btn_todos(); }) .catch(error => console.error("Error al obtener datos de los Pokémon:", error)); }) @@ -79,24 +82,25 @@ fetch(URL) export { POKEMONS_DATA }; -//-->consola - llamadas(2) -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("isArray:", Array.isArray(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 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"); + }; + $nav_container.addEventListener('click', (event) => { if (event.target.tagName === "BUTTON"){ const type = event.target.id; - const pulsado = `btn_${type}`; + console.log("Botón ID: ", type); //=> Por consola + const pulsada = `btn_${type}`; - typeof btn_funciones[pulsado] === 'function' - ? btn_funciones[pulsado]() - : alert("Función del botón no encontrada", pulsado); + typeof btn_funciones[pulsada] === 'function' + ? btn_funciones[pulsada]() + : alert("Función del botón no encontrada", pulsada); } }); -let ToDo = "Vale, ahora tengo que crear el resto de funciones en btn_funciones de funciones.js"; \ No newline at end of file +let ToDo = "Vale, ahora tengo que crear el resto de funciones en btn_funciones de funciones.js y configurar los gritos" diff --git a/scripts/pinta_lista.js b/scripts/pinta_lista.js index 39f5646..b48a3dd 100644 --- a/scripts/pinta_lista.js +++ b/scripts/pinta_lista.js @@ -1,29 +1,35 @@ -import { POKEMONS_DATA } from './main.js'; -const $lista_pokemon = document.getElementById('lista_pokemon'); +import { POKEMONS_DATA, loader } from './main.js'; +export const $lista_pokemon = document.getElementById('lista_pokemon'); + + export function pinta_lista(pokemonId) { - + + loader.style.display = "block"; // Parece que no se ve, después del de la introducción. const pokemon = POKEMONS_DATA[pokemonId]; if (!pokemon) { console.error('No se encontró ningún Pokémon con el ID ${pokemonId}') - return; - } - let {id, name, img, grito1, grito2, tipos, ataque, defensa, animacion, altura, peso } = pokemon; - + return + }; + let {id, name, img, grito1, grito2, tipos, ataque, defensa, animacion, altura, peso } = pokemon +; - let extraerTipos = tipos.map(tipo => { + // separamos los tipos + let sacaLosTipos = tipos.map(tipo => { let tipoId = document.getElementById(`${tipo}`).innerHTML; return `
${tipoId}
` }) - extraerTipos = extraerTipos.join(''); + sacaLosTipos = sacaLosTipos.join('') +; + //Crea y da clase y el contenido, falta el appendChild() cuando termine de pintarlo. const article = document.createElement("article"); article.classList.add("container-card"); - + //💥 article.innerHTML = `