Getting data from Pokeapi.co

pokeapi-script.js

const apiData = {
    url: 'https://pokeapi.co/api/v2/',
    type: 'pokemon',
    id: '25',
}

const {url, type, id} = apiData

const apiUrl = `${url}${type}/${id}`

fetch(apiUrl)
    .then( (data) => {
        if(data.ok){
            return data.json()
        }
        throw new Error('Response not ok.'); 
    })
    .then( pokemon => generateHtml(pokemon))
    .catch( error => console.error('Error:', error))


const generateHtml = (data) => {
    console.log(data)
    const html = `
        <div class="name">${data.name}</div>
        <img src=${data.sprites.front_default}>
        <div class="details">
            <span>Height: ${data.height}</span>
            <span>Weight: ${data.weight}</span>
        </div>
    `
    const pokemonDiv = document.querySelector('.pokemon')
    pokemonDiv.innerHTML = html

Can you share your code? @ConnorDEllement

@brickbones I had the same problem. I copied your pokeapi-script.js code and got the following:

main_test.js:19 Error: TypeError: Cannot set property 'innerHTML' of null
at generateHtml (main_test.js:33)
at main_test.js:18

@brickbones I had the same problem. I copied your pokeapi-script.js code and got the following:

main_test.js:19 Error: TypeError: Cannot set property 'innerHTML' of null
at generateHtml (main_test.js:33)
at main_test.js:18

const apiData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
id: '25',
}

const {url, type, id} = apiData
const apiUrl = ${url}${type}/${id}

fetch(apiUrl)
.then( (data) => data.json())
.then( (pokemon) => generateHtml(pokemon) )

const generateHtml = (data) => {
console.log(data)
const html = <div class="name">${data.name}</div> <img src=${data.sprites.front_default}> <div class="details"> <span>Height: ${data.height}</span> <span>Weight: ${data.weight}</span> </div>
const pokemonDiv = document.querySelector('.pokemon')
pokemonDiv.innerHTML = html
}

Hi,
You need to add a html file with a class of pokemon. Then it will generate pikachu data inside the div.
Link this js file in html.

const apiData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
id: '25',
}

const {url, type, id} = apiData

const apiUrl = ${url}${type}/${id}

const generateHtml = (data) => {
console.log(data)
const html = <div class="name">${data.name}</div> <img src=${data.sprites.front_default}> <div class="details"> <span>Height: ${data.height}</span> <span>Weight: ${data.weight}</span> </div>
const pokemonDiv = document.querySelector('.pokemon');
console.log(pokemonDiv);
pokemonDiv.innerHTML = html;
}

fetch(apiUrl)
.then( (data) => {
if(data.ok){
return data.json()
}
throw new Error('Response not ok.');
})
.then( pokemon => generateHtml(pokemon))
.catch( error => console.error('Error:', error))

https://www.youtube.com/watch?v=tFVdxGgJPCo

Watch this video

Hello, I've been following the tutorials and really like it, but i want to improve a little bit from how i would like to use the API,

from the tutorial, it shows pokemon depends on static id written inside the code, but i would like to make the pokemon change every couple second, my idea is to loop through the id object from the api, but i don't know how to code it, would anyone help me with this? Regards

Hello, if some one want to copy this project + search field here you are

HTML

<title>Search Pokemons</title>

<script src="apiPoke.js"></script>

Enter No:

JavaScript

function srchPoke(){
const pokeID = document.getElementById("number").value;
//alert(pokeID)
const apiPokeData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
//id: 55,
}
const {url, type,} = apiPokeData
const apiUrl = ${url}${type}/
const finalApiUrl = apiUrl+pokeID

//console.log(pokeID)

fetch(finalApiUrl)
.then( (data) => {
if(data.ok){
return data.json()
}
throw new Error('Response not ok.');
})
.then( pokemon => generateHtml(pokemon))
.catch( error => console.error('Error:', error))

const generateHtml = (data) => {
console.log(data)
const html = <div class="name">${data.name}</div> <img src=${data.sprites.front_default}> <div class="details"> <span>Height: ${data.height}</span> <span>Weight: ${data.weight}</span> </div>
const pokemonDiv = document.querySelector('.pokemon')
pokemonDiv.innerHTML = html
}

hi nice job
but the html variable will bring up an error its rather nice if you use a different variable name and also the closing curry bracket is missing