Tell us what’s happening:
I would like to understand why the for loop is not accepted for types listing. It looks to me that it produces the correct behaviour.
for (const element of data.types){
types.innerHTML +=<span class="type ${element.type.name}">${element.type.name.toUpperCase()}</span>}
I found a solution with “map” but I would like to understand what’s the issue.
Thanks in advance,
Lucia
Your code so far
<!DOCTYPE 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" />
<title>Pokemon Search App</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header>
<h1 class="title">Pokemon Search App</h1>
</header>
<main>
<div>
Search for Pokémon Name or ID:
<input type="text" id="search-input" required>
<button id ="search-button" type="submit" placeholder="Enter your Pokemon...">Search</button>
<div id="pokemon-name"></div>
<div id="pokemon-id"></div>
<div id="sprite-container"></div>
<div id="weight"></div><div id="height"></div>
<div id="types"></div>
<table id="stats">
<thead><tr><th>Base</th><th>Stats</th></tr></thead>
<tbody>
<tr><th>HP:</th><th id="hp"></th></tr>
<tr><th>Attack:</th><th id="attack"></th></tr>
<tr><th>Defense:</th><th id="defense"></th></tr>
<tr><th>Sp. Attack:</th><th id="special-attack"></th></tr>
<tr><th>Sp. Defense:</th><th id="special-defense"></th></tr>
<tr><th>Speed:</th><th id="speed"></th></tr>
</tbody>
</table>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
const pokemonID = document.getElementById('pokemon-id');
const pokemonName = document.getElementById('pokemon-name');
const spriteContainer = document.getElementById('sprite-container');
const types = document.getElementById('types');
const height = document.getElementById('height');
const weight = document.getElementById('weight');
const hp = document.getElementById('hp');
const attack = document.getElementById('attack');
const defense = document.getElementById('defense');
const specialAttack = document.getElementById('special-attack');
const specialDefense = document.getElementById('special-defense');
const speed = document.getElementById('speed');
const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const button = document.getElementById('search-button')
const resetView =()=>{
pokemonID.innerText=``
pokemonName.innerText =``
types.innerText=``
height.innerText=``;
weight.innerText=``;
hp.innerText=``;
attack.innerText=``;
defense.innerText=``;
specialAttack.innerText=``;
specialDefense.innerText=``;
speed.innerText=``;
spriteContainer.innerHTML=``;
types.innerHTML=``;
}
const findPokemon = async ()=>{
try{
const response = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput.value.toLowerCase()}`);
const data = await response.json()
pokemonID.innerText=`#${data.id}`
pokemonName.innerText =`${data.name}`
console.log(data.types)
for (const element of data.types){
console.log(element.type.name)
types.innerHTML +=`<span class="type ${element.type.name}">${element.type.name.toUpperCase()}</span> `}
height.innerText=`Height: ${data.height}`;
weight.innerText=`Weight: ${data.weight}`;
hp.innerText=`${data.stats[0].base_stat}`;
attack.innerText=`${data.stats[1].base_stat}`;
defense.innerText=`${data.stats[2].base_stat}`;
specialAttack.innerText=`${data.stats[3].base_stat}`;
specialDefense.innerText=`${data.stats[4].base_stat}`;
speed.innerText=`${data.stats[5].base_stat}`;
spriteContainer.innerHTML=`<img src="${data.sprites.front_default}" id="sprite">`;
}
catch (err) {
resetView();
alert('Pokémon not found');
console.log(`Pokémon not found: ${err}`);
}
};
button.addEventListener('click',findPokemon)
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
