Build a Pokémon Search App Project - Build a Pokémon Search App

Tell us what’s happening:

i dont like the fcc editor so i use vs code then copy th code to fcc, now everything is fine until the step that requires you to add an img with src of front_default and id sprite, the thing is it works on vscode but on fcc it doesnt

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>camp</title>
  <script src="./script.js" defer></script>
</head>
<body>
  <input type="text" id="search-input" required>
  <button id="search-button">search</button>
  <div id="pokemon-name"></div>
  <div id="pokemon-id"></div>
  <div id="weight"></div>
  <div id="height"></div>
  <div id="types"></div>
  <div id="hp"></div>
  <div id="attack"></div>
  <div id="defense"></div>
  <div id="special-attack"></div>
  <div id="special-defense"></div>
  <div id="speed"></div>
</body>
</html>
/* file: styles.css */

/* file: script.js */
window.addEventListener("load",()=>{
  const input = document.getElementById("search-input");
  const search = document.getElementById("search-button");
  const sprite_cont = document.getElementById("sprite-cont");
  const name = document.getElementById("pokemon-name");
  const id = document.getElementById("pokemon-id");
  const weight = document.getElementById("weight");
  const height = document.getElementById("height");
  const types = document.getElementById("types");
  const hp = document.getElementById("hp");
  const attack = document.getElementById("attack");
  const defense = document.getElementById("defense");
  const Sattack = document.getElementById("special-attack");
  const Sdefense = document.getElementById("special-defense");
  const speed = document.getElementById("speed");
  const url = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/";
  search.addEventListener("click",()=>{
    fetch(url+input.value.toLowerCase())
    .then(a => a.json())
    .then(a => display(a))
    .catch((e) => reset());
    function display(a){
      //console.log(a);
      name.innerHTML = a.name.toUpperCase();
      id.innerHTML = "#"+a.id;
      weight.innerHTML = "Weight: "+a.weight;
      height.innerHTML = "Height: "+a.height;
      //types.innerHTML = a.types[0].name;
      hp.innerHTML = a.stats[0].base_stat;
      attack.innerHTML = a.stats[1].base_stat;
      defense.innerHTML = a.stats[2].base_stat;
      Sattack.innerHTML = a.stats[3].base_stat;
      Sdefense.innerHTML = a.stats[4].base_stat;
      speed.innerHTML = a.stats[5].base_stat;
      sprite_cont.innerHTML = `
      <img id="sprite" src="${a.sprites.front_default}" alt="${a.name} front default sprite">
      `;
    }
    function reset(){
      const sprite = document.getElementById('sprite');
      if (sprite) sprite.remove();
      alert("Pokémon not found");
      pokemonName.textContent = '';
      pokemonID.textContent = '';
      types.innerHTML = '';
      height.textContent = '';
      weight.textContent = '';
      hp.textContent = '';
      attack.textContent = '';
      defense.textContent = '';
      Sattack.textContent = '';
      Sdefense.textContent = '';
      speed.textContent = '';
    }
  });
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36 Edg/125.0.0.0

Challenge Information:

Build a Pokémon Search App Project - Build a Pokémon Search App

Welcome to the forum @moazdeyaa19

Try adding an element in html for the sprite image.

Happy coding

<script src="./script.js" defer></script>

You can’t use defer with the fCC editor. Add the script element at the bottom of the HTML before the closing </body> tag.