Tell us what’s happening:
Hi everyone, please spare some time and help with the code I’ve been working on. I think it is functional enough to work, but I’m not sure why it is not yet passing.
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">
<title>Document</title>
</head>
<body>
<main>
<form>
<input id="search-input" required>
<button id="search-button">Search Pokemon</button>
</form>
<div id="result">
</div>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const resultDiv = document.getElementById('result');
const pokemonDatabaseUrl = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon'
//Functions
const urlJoin = () => {
const pokemonSearcher = searchInput.value.toLowerCase().replace(/\s/g, "-");
return pokemonDatabaseUrl + '/' + pokemonSearcher;
}
const fetchData = async () => {
try {
const res = await fetch(urlJoin())
const data = await res.json();
displayPokemon(data);
} catch (err) {
resultDiv.innerHTML = `<p>There was an error loading the pokemon!</p>`
}
};
const displayPokemon = (data) => {
const { name, id, weight } = data;
resultDiv.innerHTML = `
<p id="pokemon-name">Name: ${name}</p>
<p id="pokemon-id">ID: ${id}</p>
<p id="weight">Weight: ${weight}</p>
<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>
`
}
//Event listeners
searchButton.addEventListener('click', (e) => {
e.preventDefault();
resultDiv.innerHTML = fetchData();
})
/* 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/126.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
Please talk to us about which tests are failing and what debugging you’ve done. Thanks
Tell us what’s happening:
Hi everyone, I forgot to save code in my previous post. I am not passing the requirements for Pokemon types and images at all. When I try to search for the pokemon, it is actually working and can see that the required elements and content should pass. Can anyone please help ?
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">
<title>Document</title>
</head>
<body>
<main>
<form>
<input id="search-input" required>
<button id="search-button">Search Pokemon</button>
</form>
<div id="result">
<p id="pokemon-name"></p>
<p id="pokemon-id"></p>
<p id="weight"></p>
<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>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const resultDiv = document.getElementById('result');
const pokemonDatabaseUrl = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon'
const pokemonName = document.getElementById('pokemon-name');
const pokemonId = document.getElementById('pokemon-id');
const pokemonWeight = document.getElementById('weight');
const pokemonHeight = document.getElementById('height');
const pokemonTypes = document.getElementById('types');
const pokemonHp = document.getElementById('hp');
const pokemonAttack = document.getElementById('attack');
const pokemonDefense = document.getElementById('defense');
const pokemonSpecialAttack = document.getElementById('special-attack');
const pokemonSpecialDefense = document.getElementById('special-defense');
const pokemonSpeed = document.getElementById('speed');
//Functions
const urlJoin = () => {
const pokemonSearcher = searchInput.value.toLowerCase().replace(/\s/g, "-");
return pokemonDatabaseUrl + '/' + pokemonSearcher;
}
const fetchData = async () => {
try {
const res = await fetch(urlJoin())
const data = await res.json();
displayPokemon(data);
} catch (err) {
alert("Pokémon not found")
}
};
const displayPokemon = (data) => {
const { name, id, weight, height, types, sprites, stats } = data;
for (let i = 0; i < types.length; i++) {
pokemonTypes.innerHTML += `<span>${types[i].type.name.toUpperCase()}</span>`
}
const img = document.createElement('img');
img.src = sprites.front_default;
img.id = 'sprite';
resultDiv.insertBefore(img,pokemonName);
pokemonName.textContent = name.toUpperCase();
pokemonId.textContent = id;
pokemonWeight.textContent = weight;
pokemonHeight.textContent = height;
pokemonHp.textContent = stats[0].base_stat;
pokemonAttack.textContent = stats[1].base_stat;
pokemonDefense.textContent = stats[2].base_stat;
pokemonSpecialAttack.textContent = stats[3].base_stat;
pokemonSpecialDefense.textContent = stats[4].base_stat;
pokemonSpeed.textContent = stats[5].base_stat;
}
//Event listeners
searchButton.addEventListener('click', (e) => {
e.preventDefault();
fetchData();
});
/* 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/126.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
You need to clear the type and image between searches.
Thank you so much for the help, I’m passing all the pokemon types requirements now, but I can’t seem to remove the image in between searches. Can you spare some time to help me further ?
Update: I updated my code with removeChild() method and found it works. But the last requirement is not letting me pass. Can anyone please help me with this:
When the #search-input element contains a valid Pokemon id and the #search-button element is clicked, the UI should be filled with the correct data.
Please post your updated code.
I think there might be a bug, once I refresh the page, I passed. Thank you so much for your great help !