Category: javascript

I have point1,point2 variable which is used to draw the dots in canvas object.

I am trying some tests.

For example,

• test1

  • changePoint1() is called, tha canvas itself is re-rendered, so it’s not good method.

• test2

  • changePoint2() is called, the canvas is not re-rendered, but when re-render is called from somewhere else, this variable is not kept.

Is there any variable keeping method which doesn’t call re-render and keep the variable regardless of re-render? (maybe like static variable?)

const ImagePreview = () =>{
    const [point1,setPoint1] = [0,0]; // test1
    var point2  = [10,10]; //test2
    
    const changePoint1(){
      setPoint1([10,10]) 
    }

    const changePoint2(){
      point2 = [20,20];
    }

    const rewriteCanvas(){
     // draw point1,point2 in canvas
    }

    return <canvas></canvas>
}

I was sifting through GTA San Andreas game files recently and I came across audio files that are used for radio stations in the game. For the longest time I thought they were just pre-recorded pieces of audio playing on repeat, but in reality there are 3 intros and 3 outros that radio chooses to play from randomly. Is it possible to create a script that incorporates such logic? For each song, there are multiple files: Song (Intro), Song (Intro DJ #1), Song (Intro DJ #2), Song (Mid),Song (Outro), Song (Outro DJ #1), Song (Outro DJ #2), where DJ 1 and 2 are the audio tracks that have voiceover by radio host on it. There are also “Atmosphere” tracks where radio host announces weather or time of day, “Caller” tracks with conversation with supposed caller, “DJ” tracks with random radio host voice-lines, “Story” tracks with some kind of story by the host, and finally “ID” Tracks where the voice on the radio just announces the radio station. I am looking for a framework to start out with that will let me integrate such logic in queuing tracks. Thanks in advance.

I tried using AmplitudeJS, I am still getting familiar with its API since I know very little JS.

I am tryiing to make next js 13 mdx blog website with the latest app router
I am getting this error => Module not found: Can’t resolve ‘fs’
In next js 12 and pages directory its working but in the latest app router it’s not working

this is my code,

"use client"

import Head from 'next/head';
import BlogSidebar from '../../components/blog/sidebar';
import Pagination from '../../components/blog/pagination';
import fs from 'fs';
import matter from 'gray-matter';
import { join } from 'path';
import { useRouter } from 'next/router'


export async function getStaticProps() {
  const blogsDirectory = join(process.cwd(), '_blog');
  const files = fs.readdirSync(blogsDirectory);

  let posts = files.map((fileName) => {
    const slug = fileName.replace(/.md$/, '');
    const fullPath = join(blogsDirectory, `${slug}.md`);
    const readFile = fs.readFileSync(fullPath, 'utf8');
    const { data: frontmatter } = matter(readFile);
    return {
      slug,
      frontmatter,
      
    };
  });

  posts = posts.sort((job1, job2) => (job1.frontmatter.date > job2.frontmatter.date ? -1 : 1));

  return {
    props: {
      posts,
    },
    
  };
}


const page = ({ posts }) => {

  console.log(posts, "posts");

I am working on my final project for a coding cert and I can’t seem to figure out what I am doing wrong with the audio file paths to make them work on the GitHub repository. They are working on my local machine, but I can’t hear them on the GitHub version.

Here is my GitHub link:

https://milfords.github.io/js-dev-final-capstone-starter-simon-says/

And the actual link to the repository with the code:

https://github.com/Milfords/js-dev-final-capstone-starter-simon-says

Currently, I have my file paths for the audio files in my index.js file as such:

const winner = new Audio('../assets/winner-winner-sound.mp3');

And in a different part of the index.js file I have some of them setup as a property in an object like this:

sound: new Audio('../assets/simon-says-sound-1.mp3')

I have tried changing the file path many times using examples like this:

../../assets/simon-says-sound-1.mp3
./assets/simon-says-sound-1.mp3
./js-dev-final-capstone-starter-simon-says/assets/simon-says-sound-1.mp3
../js-dev-final-capstone-starter-simon-says/assets/simon-says-sound-1.mp3

I have seen similar questions on stack overflow, but haven’t found any solutions that are working for my particular problem.

I was expecting to see the audio files showing in the assets folder of the project, but when the GitHub version loads, it is missing the audio files from the assets in the sources tab in the chrome dev tools.

I wanted to toggle between different colors for each textbox attribute as their own individual “presets”. And that, if there were multiple textboxes, the same preset would apply. It supposed to be based off this code: HTML & JS

Here’s my code below, I apologize if it’s messy for you guys :

The title

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h3>Toggle the Colors of a textbox on a Button Click</h3>

I tried to use a “color” class for it.

<input type="text" id="txt" placeholder="Type Here" class="colors"> <br>
<input type="text" id="txt2" placeholder="Type Here" class="colors"> <br>
<button id="colorButton">Click</button>

I made a “addEventListen” for the button, but maybe I should’ve just done an onClick. The textPreset variable contains the list of presets.

<script>
    var textPreset = ["Blank Paper", "Calc LCD", "Blue LCD", "Red LED", "Neon Yellow"]

 var i = 0
 const button = document.getElementById("colorButton");
 button.addEventListener("click", cyclePresets);

The cyclePresets function is suppose to use the textPreset var to correlate with the textbox attributes. preset is obviously is the value of the textPreset array.

  function cyclePresets(textColor, placeHolder, textBox){
      textPreset[0] = ("black", "grey", "white");
      textPreset[1] = ("black", "black", "green");
      textPreset[2] = ("black", "black", "blue");
      textPreset[3] = ("red", "red", "black");
      textPreset[4] = ("yellow", "yellow", "black");
       var preset = textPreset[i];

i obviously loops through the array, tell if I should just use a for-loop.

      if (i == 5){
      i = 0;
      }
      else{
      i = i + 1;
      }

That textBox parameter might’ve been bad as well, as I’m with placeholder stuff, just took what I saw from tutorials and slapped on there. Then I tried to set the textboxes to the preset var, which was probably a idea lmao.

      textColor = document.getElementsByClassName ("colors").style.color;
      placeHolder = document.getElementsByClassName ("colors").style.backgroundColor;
      textBox = document.getElementsByClassName ("colors")[0].placeholder.style.color;
  
      document.getElementsByClassName("colors") = preset;
  
  }
</script>
</body>
</html>

I’m going to assume I made a lot of errors, but please don’t get mad at me. I’ve just started learning these things. Maybe I’m thinking too much or I’m just too damn ambitious for my own good. Also do I need to use CSS for this? Full code here

I have the following nextjs component “Navbar.jsx”:

'use client';

import { motion } from 'framer-motion';

import styles from '../styles';
import { navVariants } from '../utils/motion';
import Link from 'next/link';

const Navbar = () => (
  <motion.nav
    variants={navVariants}
    initial="hidden"
    whileInView="show"
    className={`${styles.xPaddings} py-8 relative`}
  >

    <div className="absolute w-[50%] inset-0 gradient-01" />
    <div
      className={`${styles.innerWidth} mx-auto flex justify-between gap-8`}
    >
      <Link href='/'>NAV TEST LINK</Link>
      <Link href='/'>
      <img
        src="/search.svg"
        alt="search"
        className="w-[24px] h-[24px] object-contain"
      />
      </Link>
      <Link href='/'>NAV TEST LINK 2</Link>
      <h2 className="font-extrabold text-[24px] leading-[30.24px] text-white">
        METAVERSUS
      </h2>
      <Link href='/'>NAV TEST LINK 3</Link>
      <Link href='/'>
      <img
        src="/menu.svg"
        alt="menu"
        className="w-[24px] h-[24px] object-contain"
      />
      </Link>

    </div>
  </motion.nav>
);

export default Navbar;

I realized that the first div <div className="absolute w-[50%] inset-0 gradient-01" /> is blocking some of the Link elements and makign the hyperlink not visible. Is there a way, besides adding “z-10” to all the Link elements, to make them all visible while keeping the “inset-0” div as is?

I come to seek your help in a Django web project. I have a sidebar that displays various options, and I need two button groups to become visible when clicking on the following element:

I created a JavaScript script to achieve this functionality, but the button groups still do not become visible on the page. If someone could assist me, I would greatly appreciate it.

<ul class="nav child_menu">
    {% if user.id_perfil.id_permiso.descripcion|lower == 'direccion' or user.id_perfil.id_permiso.descripcion|lower == 'admin' %}
        <li><a href="{% url 'listar_sucursales' %}">Establecimientos</a></li>                          
        <li><a href="{% url 'listar_tipos_persona' %}" id="tipo-persona-link">Tipo de persona</a></li>
        <li><a href="{% url 'listar_generos' %}">Genero persona</a></li>
        <li><a href="{% url 'listar_personas' %}">Persona</a></li>
        <li><a href="{% url 'listar_alumnos' %}">Alumno</a></li>
    {% else %}
    {% endif %}
    {% if user.id_perfil.id_permiso.descripcion|lower == 'convivencia escolar' or user.id_perfil.id_permiso.descripcion|lower == 'direccion' or user.id_perfil.id_permiso.descripcion|lower == 'inspectoria' or user.id_perfil.id_permiso.descripcion|lower == 'admin' %}
        <li><a href="{% url 'listar_cursos' %}">Curso</a></li>
    {% else %}
    {% endif %}
</ul>

<div id="botoneras" style="display: none;">
    <!-- Botonera Content -->
    <button>Apoderado</button>
    <button>Docente</button>
</div>`

<script>
    // Get the "Tipo de persona" link
    const tipoPersonaLink = document.getElementById("tipo-persona-link");

    // Add a click event to the "Tipo de persona" link
    tipoPersonaLink.addEventListener("click", function(event) {
        event.preventDefault(); // Prevent the default navigation behavior

        // Show or hide the button groups
        const botoneras = document.getElementById("botoneras");
        if (botoneras.style.display === "none") {
            botoneras.style.display = "block";
        } else {
            botoneras.style.display = "none";
        }
    });
</script>

MDN says that a callback is a function that is passed as an argument to another function. As far as I understand, it means callback is included within parentheses. This is the link.

But, I once came across an article on Freecodecamp saying that callback is a function that is similarly described by MDN, while a callback function is a function that is included in another function block. It means that callback function acts as the child function.

Am I wrong or there’s just some confusion between the two sources?

What is the issue with the following code I have in trying to define my own function to sort by?

let a = ['name', 'age'];
console.log(a);
a.sort((x,y)=>x-y); // whyoesn't this sort properly?
console.log(a);
a.sort();
console.log(a);

Hi
im sending data to epayco billing with reference code named **ref_payco **and i obtained partially data,some data retrieve me in blank,i ave online shop with php,mysql,no frameworks,i have signup process.

but i need to capture all data in epayco billing checkout because i need to allow to users buy as guests.

some here a little part of php code:

<?php
ob_start();
session_start();
require_once('../../admin/inc/config.php');
?>
<?php
$error_message = '';

$item_name = 'Product Item(s)';
$item_amount = $_SESSION['final_total'];

$payment_date = date('Y-m-d H:i:s');

$notify_url = 'payment/epayco/confirmacion.php';
?>

SORRY formatting the code,ever i have problems with stackoverflow to post because code format

Major part of code its made in javascript,code here:

<script type="text/javascript">
function getQueryParam(param) {
location.search.substr(1)
.split("&")
.some(function(item) { // returns first occurence and stops
return item.split("=")[0] == param && (param = item.split("=")[1])
})
return param
}
$(document).ready(function() {
//llave publica del comercio

//Referencia de payco que viene por url
var ref_payco = getQueryParam('ref_payco');
//Url Rest Metodo get, se pasa la llave y la ref_payco como paremetro
var urlapp = "https://secure.epayco.co/validation/v1/reference/" + ref_payco;
 
$.get(urlapp, function(response) {


if (response.success) {

if (response.data.x_cod_response == 1) {
//Codigo personalizado
//alert("Transaccion Aprobada");

//console.log('transacción aceptada');
            
//Id del cliente  
var cust_id_cliente = response.data.x_cust_id_cliente;
console.log(cust_id_cliente); 
              
//Número de recibo de la transacción
var ref_payco = response.data.x_ref_payco;
console.log(ref_payco);
              
//Descripción del producto
var description = response.data.x_description;
console.log(description);
              
//Valor total del producto
var amount = response.data.x_amount;
console.log(amount);  
              
//Valor total del producto (2)
var amount_country = response.data.x_amount_country;
console.log(amount_country);    
              
//Valor total del producto (3)
var amount_country2 = response.data.x_amount_ok;
console.log(amount_country2);
              
//IVA
var iva = response.data.x_tax;
console.log(iva);  
              
//Impuesto al consumo ICO
var impuesto_consumo = response.data.x_tax_ico;
console.log(impuesto_consumo);  
              
//Valor sin IVA
var amount_base = response.data.x_amount_base;
console.log(amount_base); 
             
//Código de la moneda (COP,USD)
var currency_code = response.data.x_currency_code;
console.log(currency_code);   
            
//ref_cliente V1 (id factura 1)
var invoice = response.data.x_id_invoice;   
console.log(invoice);
              
//ref_cliente V2 (id factura 2)
var invoice_factura = response.data.x_id_factura;   
console.log(invoice_factura);  
              
//ref_payco  
var transaction_id = response.data.x_transaction_id;  
console.log(transaction_id);
            
//nombre_banco  
var bank_name = response.data.x_bank_name;
console.log(bank_name);  
              
//ultimos_digitos_de_la_tarjeta
var cardnumber = response.data.x_cardnumber;
console.log(cardnumber); 
              
//Número de cuotas a diferir el pago
var quotas = response.data.x_quotas;
console.log(quotas); 
              
//x_respuesta V1
var respuestav1 = response.data.x_respuesta;
console.log(respuestav1);
              
//x_respuesta V2
var respuestav2 = response.data.x_response;
console.log(respuestav2); 
              
//Código de aprobación
var approval_code = response.data.x_approval_code;
console.log(approval_code);
              
//Fecha y hora de la transacción
var fecha_transaccion = response.data.x_fecha_transaccion;
console.log(fecha_transaccion); 
              
//Fecha y hora de la transacción V2
var fecha_transaccionv2 = response.data.x_transaction_date;
console.log(fecha_transaccionv2);  
              
//Código de respuesta de la transacción V1
var cod_respuestav1 = response.data.x_cod_respuesta;
console.log(cod_respuestav1); 
               
//Código de respuesta de la transacción V2
var cod_respuestav2 = response.data.x_cod_response;
console.log(cod_respuestav2); 
              
//Descripción de la respuesta
var response_reason_text = response.data.x_response_reason_text;
console.log(response_reason_text);
              
//Código error de la transacción
var errorcode = response.data.x_errorcode;
console.log(errorcode); 
              
//Código estado de la transacción
var cod_transaction_state = response.data.x_cod_transaction_state;
console.log(cod_transaction_state);
              
//Estado de la transacción
var transaction_state = response.data.x_transaction_state;
console.log(transaction_state);
              
//Franquicias 
var franchise = response.data.x_franchise; 
console.log(franchise);   
             
//Negocio 
var business = response.data.x_business; 
console.log(business); 
              
//tipo_de_documento 
var customer_doctype = response.data.x_customer_doctype; 
console.log(customer_doctype);   
             
//numero_documento  
var customer_document = response.data.x_customer_document; 
console.log(customer_document); 
             
//nombre_persona_de_la_tarjeta  
var customer_name = response.data.x_customer_name; 
console.log(customer_name);
              
//Apellidos del tarjetahabiente  
var customer_lastname = response.data.x_customer_lastname; 
console.log(customer_lastname);   
              
//Email del tarjetahabiente  
var customer_email = response.data.x_customer_email; 
console.log(customer_email);
               
//Teléfono del tarjetahabiente  
var customer_phone = response.data.x_customer_phone; 
console.log(customer_phone);  
              
//Celular del tarjetahabiente
var customer_movil = response.data.x_customer_movil; 
console.log(customer_movil); 
              
//Indicador del país del cliente 
var customer_ind_pais = response.data.x_customer_ind_pais; 
console.log(customer_ind_pais); 
              
//País del tarjetahabiente
var customer_country = response.data.x_customer_country; 
console.log(customer_country);  
              
//Ciudad del tarjetahabiente 
var customer_city = response.data.x_customer_city; 
console.log(customer_city); 
              
//Dirección del tarjetahabiente 
var customer_address = response.data.x_customer_address; 
console.log(customer_address); 
              
//Ubicación IP del tarjetahabiente  
var customer_ip = response.data.x_customer_ip; 
console.log(customer_ip);
              
//Llave de seguridad generada por ePayco
var signature = response.data.x_signature; 
console.log(signature);   
              
}
//Transaccion Rechazada
if (response.data.x_cod_response == 2) {
//console.log('transacción rechazada');
              
//ref_cliente
var invoice = response.data.x_id_invoice;   
//console.log(invoice);
              
//ref_payco  
var transaction_id = response.data.x_transaction_id;  
//console.log(transaction_id);
              
}
//Transaccion Pendiente
if (response.data.x_cod_response == 3) {
//console.log('transacción pendiente');
              
//ref_cliente
var invoice = response.data.x_id_invoice;   
//console.log(invoice);
              
//ref_payco  
var transaction_id = response.data.x_transaction_id;  
//console.log(transaction_id);

}
//Transaccion Fallida
if (response.data.x_cod_response == 4) {
//console.log('transacción fallida');
}

} else {
//alert("Error consultando la información");
}
});

});
</script>

Fnially,here are images of code,response..etc

php reponse

get data

json

im trying to retrieve all data from epayco and i need to obtain all data

I have this small fastapi application

import uvicorn
from fastapi import FastAPI
from starlette.responses import FileResponse

app = FastAPI()


@app.get("/a")
async def read_index():
    return FileResponse('static/index.html')


@app.get("/a/b")
def download():
    return "get"


@app.post("/a/b")
def ab():
    return "post"


def main():
    uvicorn.run("run:app", host="0.0.0.0", reload=True, port=8001)


if __name__ == "__main__":
    main()

and in static/index.html I have

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <section>
      <form method="post" action="/a/b" enctype="multipart/form-data">
        <div>
          <p>Download:</p>
        </div>
        <div>
          <input type="submit" value="Download"/>
        </div>
      </form>
    </section>
  </body>
</html>

I send a get request to http://127.0.0.1:8001/a and click on the download button it loads, it returns “get”

However, I change the application to

import uvicorn
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

app.mount("/a", StaticFiles(directory="static", html=True))



@app.get("/a/b")
def download():
    return "get"


@app.post("/a/b")
def ab():
    return "post"


def main():
    uvicorn.run("run:app", host="0.0.0.0", reload=True, port=8001)


if __name__ == "__main__":
    main()

with the same HTML file, I click on the download button, and I get detail: "Method Not Allowed" because it is doing INFO: 127.0.0.1:58109 - "POST /b HTTP/1.1" 405 Method Not Allowed

I want to use mount becuase I want to put js and css files there as well, to be used by the index.html file. how should I do this?

I noticed that in the hole internet there is not existence of this game like everyone vanished and actually was a quite good video-game early of the 2000s was a 2D game help.

A website or a the full videogame

tengo tres archivos dentro de un sistema CMV, necesito ubicar los puntos donde se realizaron ventas los archivos son vista.js, geolocaliza.php y geolocaliza.html pero al correr me da el error: aught ReferenceError: google is not defined
at mostrarPuntos (vista.js:)

los archivos son los siguientes: gracias de antemano

vista.js

function mostrarPuntos(puntos) {
  // Creamos un objeto para el mapa
  alert ('mostrar puntos-----');
  var mapa = new google.maps.Map(document.getElementById("mapa"), {
    zoom: 8,
    center: { lat: 0.5869132, lng: -78.0520032 } // Coordenadas de San Francisco
  });
  
  // Iteramos sobre los puntos y los añadimos al mapa
  for (var i = 0; i < puntos.length; i++) {
    var punto = puntos[i];
    var latLng = new google.maps.LatLng(punto.latitud, punto.longitud);
    var marcador = new google.maps.Marker({
      position: latLng,
      mapa: mapa,
      title: punto.nombre
    });
  }
}

geolocaliza.php

      if(isset($_POST['fechaini2']))
      {
         
         $this->localiza();
      }


    }
    public function localiza() {
        $this->new_error_msg ('localiza joly joly ');
        $this->template = FALSE;
        $fechai = $_POST['fechaini2']; //$_GET['fecha'];
        $puntos = $this->obtenerPuntosx($fechai);
        $puntos_json = json_encode($puntos); // Convertir el array a JSON
        echo "<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=Mi_clave_API&callback=initMap' async defer></script>";
        echo "<script type = 'text/javascript' src='plugins/geolocaliza/view/js/vista.js'></script>";
        echo "<script type='text/javascript'>mostrarPuntos(JSON.parse('" . addslashes($puntos_json) . "'));</script>";
    }

geolocaliza.html

`{include="header"} /// cabecera de html para todos mis html

<div id="g_localiza">
    <form action="{$fsc->url()}" method="post" class="form">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">VENTAS</h3>
            </div>
            <div class="row"> 
                <div class="form-group">
                    <div class="form-group col-sm-2">
                        Fecha Inicial
                        <input type="text" name="fechaini2" class="form-control datepicker" value=""  autocomplete="off"/>
                    </div>
                    <div class="form-group col-sm-2 ">
                        <div class="form-group">   
                            Fecha fin
                            <input type="text" name="fechafin2" class="form-control datepicker" value="{$fsc->fecfin}" autocomplete="off"/>
                        </div>  
                    </div>   
                                               
                    <div class="form-group col-sm-2">
                        <div class="panel-footer">
                            <button class="btn btn-sm btn-primary" type="submit" onclick="this.disabled=true;this.form.submit();">
                                <span class="glyphicon glyphicon-import"></span> &nbsp; Generar 
                            </button>
                        </div>
                    </div>
                    <button id="mostrar-puntos" onclick="mostrarPuntos()">Mostrar puntos</button>
                    

                   
                    <div id="mapa"></div>

                </div>
            </div>  
        </div>
    </form>      
</div>     

he cambiado la etiqueta echo “”; en el archivo html o en el archivo js pero siempre continua el mismo error y otros cambios

I have to show “thank you popup” after submitting of all contact forms.
One of the forms is a popup itself, so I have to remove its active class and to add active class to “thank you popup”

jQuery('div#wpcf7-f1648-o4 form, div#wpcf7-f101-o1 form, div#wpcf7-f38-o3 form').on('submit', function() {
jQuery('#popUp').removeClass('popUp__active');  
jQuery('#popUpThanks').addClass('popUp__active');
})

But “thank you popup” appears even if inputs are empty. It had to appear is the form is sent, submit even isn’t about sending? WHat’s about exactly sending then?

I prefer to use jQuery VERY VERY MUCH, but I tried vanilla js to use function from cf7 documentation

const popUpThanks = document.getElementById('popUpThanks')
const popUp = document.getElementById('popUp')
var wpcf7Elm = document.querySelector( '.wpcf7' )
 
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
        popUpThanks.classList.add('popUp__active');
        popUp.classList.remove('popUp__active');
}, false);

It works only for the first form. With second, third etc it doesn’t work – popup doesn’t appear.

If it is a way to fix it in jQuery – it would be perfect, if not, but it’s a way to make it work in vanilla js – I’ll be very thankful to.

I’m working with Pokemon API and I’m displaying different cards with Pokemon info, which works fine.
Every card has a MORE INFO button, if you click there, a new page will open with more info of that particular Pokemon. But I’m not sure how to achieve that. I could add that “more info” card in the index.html but I need that extra info in a new page.

index.html

<main>
    <div>
        <button id="btn-pokemon" type="button">Click to see Pokemon</button>
    </div>

    <div class="card" id="details" >
        <div class="more-details"></div>
    </div>
    
    <div class="container-pokemon" id="cardPokemon"></div>

</main>

Details.html

<div id=“details” >
    <h2>Pokemon Details</h2>
    <div class="more-details"></div>
</div>

App.js

const cardPokemon = document.querySelector("#cardPokemon");
const cardDetalle = document.querySelector('#detalle');
const details = document.querySelector('.more-details');
const btnPokemon = document.querySelector('#btn-pokemon');

const endPoint = "https://pokeapi.co/api/v2/pokemon/";

function showPokemon(poke) {

    let tipoDePokemon = poke.types.map((type) => `<p>${type.type.name}</p>`);
    tipoDePokemon = tipoDePokemon.join('');

    let abilitiesPokemon = poke.abilities.map((ability) => `<p>${ability.ability.name}</p>`);
    abilitiesPokemon = abilitiesPokemon.join('');

   const containerPokemon = document.createElement("div");

   containerPokemon.innerHTML = `
        <div class="card-pokemon">
            <span>${poke.id}</span>
            <div class="img">
                <img src="${poke.sprites.other["official-artwork"].front_default}" alt="${poke.name}">
            </div>
            <div class="info">
                <div>
                    <h2>${poke.name}</h2>
                    <div>
                        <p>Tipo de Pokemon:</>
                        ${tipoDePokemon}
                        <p>base_experience:</>
                        ${poke.base_experience}
                    </div>
                    <div>
                        <p class="stat">${poke.height}m</p>
                        <p class="stat">${poke.weight}kg</p>
                    </div>
            </div>
            <button class="btn-detalle" onclick="seeDetail(${poke.id})"> MORE INFO </button> 
     
        </div>
    `;
    cardPokemon.append(containerPokemon)
}

function detailsPokemon(poke) {

   details.innerHTML = `
        <div class="card-pokemon">
            <span>ID: ${poke.id}</span>
            <h2 class="pokemon-nombre">${poke.name}</h2>
        </div>
    `;

}

function seeDetail(id){

    console.log(id)
 
    fetch(endPoint + id)
    .then((response) => response.json())
    .then(data => detailsPokemon(data))

    window.open('details.html', '_blank');
    
}


btnPokemon.addEventListener('click', function() {

    for (let i = 1; i <= 100; i++) {
        fetch(endPoint + i)
        .then((response) => response.json())
        .then(data => showPokemon(data))
    }

})