class Card{ constructor(name, height, sprite, abilities=[], types=[] , statsNames , statsValues , id ){ this.name = name; this.height = height; this.sprite = sprite; this.abilities = abilities ; this.types = types; this.statsNames = statsNames ; this.statsValues = statsValues ; this.id = id; } draw(){ let output = document.querySelector("#output"); output.innerHTML = "

" +this.name.toUpperCase()+ "

Id: "+this.id+"

Height: "+this.height+"

Types:

Abilities:

"; output = document.querySelector("#types"); for(let t of this.types){ output.innerHTML += t +"
"; } output = document.querySelector("#abilities"); for(let t of this.abilities) { output.innerHTML += t +"
"; } output = document.querySelector("#stats"); for(let t in this.statsNames ) { output.innerHTML += this.statsNames[t] +":"+this.statsValues[t] +"
"; } } } const url1 = "https://pokeapi.co/api/v1/pokemon/22"; const url2 = "https://pokeapi.co/api/v2/pokemon/"; function searchPokemon(word){ let output = document.getElementById("output"); output.style.opacity= "0.0"; fetch(url2 +word).then(response=>response.json() ).then(json =>{ //console.log(JSON.stringify(json,null," ")) ; ; let types = []; for(let t in json.types){ ; types.push(json.types[t].type.name); } let abilities = []; for(let a in json.abilities){ ; abilities.push(json.abilities[a].ability.name); } let statsNames = []; let statsValues = []; for(let s in json.stats){ //console.log(json.stats[s].stat.name); //console.log(json.stats[s].base_stat); statsNames.push(json.stats[s].stat.name); statsValues.push(json.stats[s].base_stat); } var card = new Card(json.name, json.height, json.sprites.front_shiny, abilities, types, statsNames , statsValues , json.id); card.draw(); reveal(); }) } window.onload =()=>{ searchPokemon(Math.ceil(Math.random()*802)) } function reveal(){ let output = document.getElementById("output"); if(Number(output.style.opacity) < 1){ output.style.opacity = Number(output.style.opacity)+0.025; setTimeout(reveal, 100); } }

Pokemon API