format and cleaning code

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)

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

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 `<p class=${tipo}>${tipoId}</p>`
     })
-    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) {
                 <p class="habilidad">${defensa} <strong>🛡</strong></p>
             </div>
             <div class="tipos">
-                ${extraerTipos}
+                ${tipos}
             </div>
         </section>
         <footer>
@@ -67,19 +67,17 @@ export function pinta_lista(pokemonId) {
         pokeImage.addEventListener('mouseleave', () => {
             event.target.src = img;
         })
-    })
-;
+    });
 
-//Gritos de guerra en el juego.
+    // Gritos de guerra en el juego.
     const botonGrito1 = article.querySelector('.grito1');
     const botonGrito2 = article.querySelector('.grito2');
     botonGrito1.addEventListener('click', () => {
         const audioGrito1 = new Audio();
         audioGrito1.src = botonGrito1.dataset.sound1;
         audioGrito1.load();
         audioGrito1.play();
-    });
-
+    })
     botonGrito2.addEventListener('click', () => {
         const audioGrito2 = new Audio();
         if (grito2 == null) {

scripts/poke-media.js

@@ -29,13 +29,13 @@ export function obtenerAnimacion(pokemon) {
     } else if (pokemon.sprites.front_shiny !== null){
         animacion = pokemon.sprites.front_shiny;
     } else {
-        animacion = "./assets/Pikachu_HOME.webp"
-    }
-    return animacion
+        animacion = "./assets/Pikachu_HOME.webp";
 }
+    return animacion
+};
 
 // Sacar el array de Tipos:
 export function obtenerTipos(pokemon) {
     const tipos = pokemon.types.map(tipo => tipo.type.name);
-    return tipos;
-}
+    return tipos
+};