I am trying to randomly generate a Pokemon team using PokeAPI and Javascrip, Ive tried a few things but it doesnt seem to be working, this is what I have so far:
https://codepen.io/Alyssamc17/pen/dyqqeMp
const nameElem = document.getElementById("name");
const pokemonImage = document.getElementById('pokemon')
const heightElem = document.getElementById("height");
const weightElem = document.getElementById("weight");
const button = document.querySelector(".button");
button.addEventListener('click', (e) => {
e.preventDefault()
const randomNumber = Math.ceil(Math.random() * 905)
fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
.then(response => response.json())
.then(pokemon => {
const {
name,
height,
weight,
sprites
} = pokemon;
console.log(name)
nameElem.innerHTML = name;
heightElem.innerHTML = height;
weightElem.innerHTML = weight;
pokemonImage.setAttribute('src', sprites.front_default);
})
})
I want to have 6 api requests.
>Solution :
So what I’ve edited is the HTML to add an ID to each of them just for ease:
So the new HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="design.css">
<title>Pokemon Team Generater</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="shortcut icon" type="image/jpg" href="favicon.png"/>
</head>
<body>
<h1 class="pt-3 text-danger">Pokemon Team Generater</h1>
<div class="container text-center">
<div class="row row-cols-3">
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-0">
<h3>Name:</h3>
<div id="name-0"></div>
<h3>Height:</h3>
<div id="height-0"></div>
<h3>Weight:</h3>
<div id="weight-0"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-1">
<h3>Name:</h3>
<div id="name-1"></div>
<h3>Height:</h3>
<div id="height-1"></div>
<h3>Weight:</h3>
<div id="weight-1"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-2">
<h3>Name:</h3>
<div id="name-2"></div>
<h3>Height:</h3>
<div id="height-2"></div>
<h3>Weight:</h3>
<div id="weight-2"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-3">
<h3>Name:</h3>
<div id="name-3"></div>
<h3>Height:</h3>
<div id="height-3"></div>
<h3>Weight:</h3>
<div id="weight-3"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-4">
<h3>Name:</h3>
<div id="name-4"></div>
<h3>Height:</h3>
<div id="height-4"></div>
<h3>Weight:</h3>
<div id="weight-4"></div>
</div>
<div class="g-col-6 g-col-md-4 p-5">
<img src="" id="pokemon-5">
<h3>Name:</h3>
<div id="name-5"></div>
<h3>Height:</h3>
<div id="height-5"></div>
<h3>Weight:</h3>
<div id="weight-5"></div>
</div>
</div>
</div>
<div class="text-center">
<button type="button" class="button btn btn-outline-danger btn-lg">Generate Pokemon Team!</button>
</div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
And the JS behind that is:
const button = document.querySelector(".button");
button.addEventListener('click', (e) => {
e.preventDefault()
for (let i = 0; i < 6; i++) {
const randomNumber = Math.ceil(Math.random() * 905)
const nameElem = document.getElementById("name-" + i);
const pokemonImage = document.getElementById('pokemon-' + i)
const heightElem = document.getElementById("height-" + i);
const weightElem = document.getElementById("weight-" + i);
fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
.then(response => response.json())
.then(pokemon => {
const {
name,
height,
weight,
sprites
} = pokemon;
console.log(name)
nameElem.innerHTML = name;
heightElem.innerHTML = height;
weightElem.innerHTML = weight;
pokemonImage.setAttribute('src', sprites.front_default);
})
}
})
And the CSS isn’t even changed.