Build a Pokémon Search App Project - types portrayal

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

It looks like the issue is you’re including the text “Types:” inside of the #types paragraph when it should just contain the span element(s) .

Thanks for the hint, I could make it work by populating the preexisting html with document.getElementById(…)