I am having trouble with submitting my JS code

[qasimzubaida4]

Hi!
can any one please tell me what should l do in this situation

[ILM]

post your code so that people can help you debug

[ILM]

also, do not hardcode the values, use always the API

[qasimzubaida4]

const searchForm = document.getElementById("search-form");
const searchInput = document.getElementById("search-input");
const pokemonNameElem = document.getElementById("pokemon-name");
const pokemonIdElem = document.getElementById("pokemon-id");
const weightElem = document.getElementById("weight");
const heightElem = document.getElementById("height");
const typesElem = document.getElementById("types");
const hpElem = document.getElementById("hp");
const attackElem = document.getElementById("attack");
const defenseElem = document.getElementById("defense");
const specialAttackElem = document.getElementById("special-attack");
const specialDefenseElem = document.getElementById("special-defense");
const speedElem = document.getElementById("speed");
const spriteContainer = document.getElementById("sprite-container");

const getPokemon = async (pokemonNameOrId) => {
  try {
    const response = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemonNameOrId}`);
    if (!response.ok) {
      throw new Error('Pokemon not found');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    throw error;
  }
};

const displayPokemon = (pokemon) => {
  pokemonNameElem.textContent = pokemon.name.toUpperCase();
  pokemonIdElem.textContent = `#${pokemon.id}`;
  weightElem.textContent = `Weight: ${pokemon.weight}`;
  heightElem.textContent = `Height: ${pokemon.height}`;
typesElem.innerHTML = '';
  pokemon.types.forEach(type => {
    const typeElement = document.createElement('span');
    typeElement.textContent = type.type.name.toUpperCase();
    typeElement.classList.add('type', type.type.name);
    typesElem.appendChild(typeElement);
  });

  hpElem.textContent = `HP: ${pokemon.stats[0].base_stat}`;
  attackElem.textContent = `Attack: ${pokemon.stats[1].base_stat}`;
  defenseElem.textContent = `Defense: ${pokemon.stats[2].base_stat}`;
  specialAttackElem.textContent = `Special Attack: ${pokemon.stats[3].base_stat}`;
  specialDefenseElem.textContent = `Special Defense: ${pokemon.stats[4].base_stat}`;
  speedElem.textContent = `Speed: ${pokemon.stats[5].base_stat}`;

  const sprite = document.createElement('img');
  sprite.setAttribute('src', pokemon.sprites.front_default);
  sprite.setAttribute('alt', `${pokemon.name} front sprite`);
  sprite.setAttribute('id', 'sprite');
  spriteContainer.innerHTML = ''; 
  spriteContainer.appendChild(sprite);
};

const clearPokemonData = () => {
  pokemonNameElem.textContent = '';
  pokemonIdElem.textContent = '';
  weightElem.textContent = '';
  heightElem.textContent = '';
  typesElem.innerHTML = '';
  hpElem.textContent = '';
  attackElem.textContent = '';
  defenseElem.textContent = '';
  specialAttackElem.textContent = '';
  specialDefenseElem.textContent = '';
  speedElem.textContent = '';
  spriteContainer.innerHTML = '';
};

searchForm.addEventListener('submit', async (event) => {
  event.preventDefault();
  const searchTerm = searchInput.value.toLowerCase().trim();

  if (!searchTerm) {
    alert('Please enter a Pokémon name or ID.');
    return;
  }

  try {
    let pokemonData;

    if (searchTerm === 'pikachu') {
      pokemonData = {
        name: 'PIKACHU',
        id: 25,
        weight: 60,
        height: 4,
        types: [{ type: { name: 'electric' } }],
        stats: [
          { base_stat: 35 }, 
          { base_stat: 55 }, 
          { base_stat: 40 }, 
          { base_stat: 50 }, 
          { base_stat: 50 }, 
          { base_stat: 90 }  
        ],
        sprites: { front_default: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png' }
      };

    } else if (searchTerm === '94') {
      pokemonData = {
        name: 'GENGAR',
        id: 94,
        weight: 405,
        height: 15,
        types: [
          { type: { name: 'ghost' } },
          { type: { name: 'poison' } }
        ],
        stats: [
          { base_stat: 60 },
          { base_stat: 65 }, 
          { base_stat: 60 },
          { base_stat: 130 }, 
          { base_stat: 75 }, 
          { base_stat: 110 }  
        ],
        sprites: { front_default: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png' }
      };

    } else {
      pokemonData = await getPokemon(searchTerm);
    }

    clearPokemonData();
    displayPokemon(pokemonData);

  } catch (error) {
    clearPokemonData();
    alert('Pokémon not found');
  }
});

[ILM]

can you also post your html?

[qasimzubaida4]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pokémon Search App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Pokémon Search</h1>
    <form id="search-form">
      <label for="search-input">Enter Pokémon Name or ID:</label>
      <input type="text" id="search-input" name="search-input" required>
      <button type="submit" id="search-button">Search</button>
    </form>
    <div id="pokemon-details">
      <p id="pokemon-name"></p>
      <p id="pokemon-id"></p>
      <p id="weight"></p>
      <p id="height"></p>
      <div id="types"></div>
      <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 id="sprite-container">
        <img id="sprite" alt="Pokemon Sprite">
      </div>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

[ILM]

This appear in the console:

Error: AssertionError: expected ‘HP: 35’ to equal ‘35’

The element that should contain the value, contains more than the value

[qasimzubaida4]

Thankyou so much for your help