Repository navigation
Expand file tree
/
Copy pathpokemon.js
More file actions
52 lines (42 loc) · 1.61 KB
/
Copy pathpokemon.js
File metadata and controls
52 lines (42 loc) · 1.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
let name, pokemon, sprite, abilities
const showDiv = document.querySelector('#show')
async function getPokemon() {
name = document.querySelector('#pokemon_name').value
try {
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`)
const data = await response.json()
sprite = data.sprites.front_default
type = data.types[0].type.name
abilities = data.abilities
console.log(data, data.abilities)
renderPokemon(sprite, type, abilities)
} catch (error) {
alert('pokemon not found')
}
}
function renderPokemon(sprite, pokemonType, abilities) {
const divImg = document.querySelector('img')
divImg ? divImg.remove() : ''
const img = document.createElement('img')
img.setAttribute('src', sprite)
const typeElement = document.querySelector('#type')
typeElement ? typeElement.remove() : ''
const type = document.createElement('p')
type.setAttribute('id', 'type')
const textType = document.createTextNode(`Type: ${pokemonType}`)
type.appendChild(textType)
const ul = document.querySelector('ul')
ul ? ul.remove() : ''
const ulElement = document.createElement('ul')
abilities.map((ab, index) => {
const li = document.createElement('li')
const textLi = document.createTextNode(`Ability ${index+1}: ${ab.ability.name}`)
li.appendChild(textLi)
ulElement.appendChild(li)
})
showDiv.appendChild(img)
showDiv.appendChild(type)
showDiv.appendChild(ulElement)
}
const button = document.querySelector('button')
button.addEventListener('click', getPokemon)