Tell us what’s happening:
The tests concerning the types of the Pokemon are failing. I am not sure what the requirements " the #types element should contain a single inner element" and " the #types element should contain a two inner element" actually mean…
List elements inside an unordered list didn’t work, span elements within a paragraph element didn’t work…
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>Pokemon Search App</title>
</head>
<body>
<input required type="text" id="search-input">
<button id="search-button">Search Pokemon</button>
<div id="pokemon-container">
<h1 id="pokemon-name"></h1>
<img src="" alt="" id="sprite">
<h2 id="pokemon-id"></h2>
<p id="weight">
<p id="height"></p>
<p id="types"></p>
<p id="hp"></p>
<p id="attack"></p>
<p id="defense"></p>
<p id="special-attack"></p>
<p id="special-defense"></p>
<p id="speed"></p>
</div>
<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
#pokemon-container {
width: 50%;
margin: 0 auto;
text-align: center;
}
/* file: script.js */
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonContainer = document.getElementById("pokemon-container");
const baseURL = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/"
searchButton.addEventListener("click", () => {
const endpoint = searchInput.value.toLowerCase().match(/\w/g).join("").replaceAll(" ", "-")
console.log(endpoint)
fetch(baseURL + endpoint)
.then(response => response.json())
.then(({name, sprites, id, weight, height, types, stats}) => {
console.log(types)
pokemonContainer.innerHTML = `
<h1 id="pokemon-name">${name.toUpperCase()}</h1>
<img src="${sprites.front_default}" width="100" alt="" id="sprite">
<h2 id="pokemon-id">#${id}</h2>
<p id="weight">Weight: ${weight}</p>
<p id="height">Height: ${height}</p>
<p id="types">Types: ${types.map(type => `<span>${type.type.name.toUpperCase()}</span>`).join(" ")}</p>
<p id="hp">hp: ${stats[0].base_stat}</p>
<p id="attack">Attack: ${stats[1].base_stat}</p>
<p id="defense">Defense: ${stats[2].base_stat}</p>
<p id="special-attack">Special Attack: ${stats[3].base_stat}</p>
<p id="special-defense">Apecial Defense: ${stats[4].base_stat}</p>
<p id="speed">Speed: ${stats[5].base_stat}</p>`})
.catch(error => alert("Pokémon not found"))
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App