Hi, somehow I get Error: [TypeError: Failed to fetch] when using fCC editor, but it works through VS Code and browser
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
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');
const pokemonImg = document.getElementById('sprite');
const fetchURL = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon';
const findPokemon = async() => {
let pokemonFound = false;
try {
const result = await fetch(fetchURL);
const data = await result.json();
const { results } = data;
for (let i = 0; i < results.length; i++) {
if (results[i].name === searchInput.value.toLowerCase() || data.results[i].id == searchInput.value) {
const resultDetails = await fetch(results[i].url);
const pokemonDetails = await resultDetails.json();
pokemonName.textContent = pokemonDetails.name.toUpperCase();
pokemonId.textContent = `#${pokemonDetails.id}`;
pokemonWeight.textContent = `Weight: ${pokemonDetails.weight}`;
pokemonHeight.textContent = `Height: ${pokemonDetails.height}`;
pokemonImg.src = pokemonDetails.sprites.front_default;
pokemonTypes.innerHTML = '';
pokemonDetails.types.forEach(type => {
const typeElement = document.createElement('span');
typeElement.textContent = type.type.name.toUpperCase();
pokemonTypes.appendChild(typeElement);
});
pokemonHp.textContent = pokemonDetails.stats[0].base_stat;
pokemonAttack.textContent = pokemonDetails.stats[1].base_stat;
pokemonDefense.textContent = pokemonDetails.stats[2].base_stat;
pokemonSpecialAttack.textContent = pokemonDetails.stats[3].base_stat;
pokemonSpecialDefense.textContent = pokemonDetails.stats[4].base_stat;
pokemonSpeed.textContent = pokemonDetails.stats[5].base_stat;
pokemonFound = true;
break;
}
}
if (!pokemonFound) {
alert('Pokémon not found');
}
} catch (err) {
console.error('Error:', err);
}
}
searchButton.addEventListener("click", findPokemon);
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App