Merge branch 'main2'

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";
-
+    [  ] El acceso más rápido a la lista de pokémon por tipo o generación.

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");
     })

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
 

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";
+let ToDo = "Vale, ahora tengo que crear el resto de funciones en btn_funciones de funciones.js y configurar los gritos"

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 `<p class=${tipo}>${tipoId}</p>`
     })
-    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 = 
         `
         <header class="header-card">
             <h2>${name.toUpperCase()}</h2>
-            <span># ${id}</span>
+            <span># ${id.toString().padStart(5, 0)}</span>
         </header>
         <section>
             <figure class="container-img">
@@ -49,9 +55,11 @@ export function pinta_lista(pokemonId) {
         </footer>
     `;
 
+    loader.style.display = "none"; // Parece que no se ve, después del de la introducción.
     $lista_pokemon.appendChild(article);
 
-  //:Over para la animación:
+
+    // :Over para la animación:
     const pokeImage = article.querySelector('.container-img img')
 
     pokeImage.addEventListener('mouseenter', (event) => {
@@ -60,8 +68,9 @@ export function pinta_lista(pokemonId) {
             event.target.src = img;
         })
     })
+;
 
-  //Grito de guerra en el juego.
+//Gritos de guerra en el juego.
     const botonGrito1 = article.querySelector('.grito1');
     const botonGrito2 = article.querySelector('.grito2');
     botonGrito1.addEventListener('click', () => {
@@ -70,6 +79,7 @@ export function pinta_lista(pokemonId) {
         audioGrito1.load();
         audioGrito1.play();
     });
+
     botonGrito2.addEventListener('click', () => {
         const audioGrito2 = new Audio();
         if (grito2 == null) {