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

Tell us what’s happening:

Is there a way you can explain to me how to complete th

Your code so far


<!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>
  <style>
    /* Add your CSS code here */
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

    #search-input {
      width: 300px;
      height: 30px;
      border: 1px solid black;
      border-radius: 5px;
      padding: 5px;
    }

    #search-button {
      width: 100px;
      height: 40px;
      border: none;
      border-radius: 5px;
      background-color: green;
      color: white;
      font-size: 18px;
    }

    #sprite {
      width: 200px;
      height: 200px;
    }

    #pokemon-name {
      font-size: 32px;
      font-weight: bold;
    }

    #pokemon-id {
      font-size: 24px;
      color: gray;
    }

    #weight, #height {
      font-size: 18px;
    }

    #types {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px;
    }

    .type {
      width: 100px;
      height: 30px;
      border: 1px solid black;
      border-radius: 5px;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      margin: 10px;
    }

    .stat {
      width: 100px;
      height: 30px;
      border: 1px solid black;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <h1>Pokémon Search App</h1>
  <p>Enter a Pokémon name or ID and click the search button</p>
  <input type="text" id="search-input" placeholder="Enter a Pokémon name or ID">
  <button id="search-button">Search</button>
  <div id="pokemon-container">
    <!-- Add your HTML elements here -->
    <img id="sprite" src="" alt="">
    <h2 id="pokemon-name"></h2>
    <p id="pokemon-id"></p>
    <p id="weight"></p>
    <p id="height"></p>
    <div id="types"></div>
    <div id="stats">
      <div class="stat" id="hp"></div>
      <div class="stat" id="attack"></div>
      <div class="stat" id="defense"></div>
      <div class="stat" id="special-attack"></div>
      <div class="stat" id="special-defense"></div>
      <div class="stat" id="speed"></div>
    </div>
  </div>
  <script>
    // Add your JavaScript code here
    // Get the elements from the document
    const searchInput = document.getElementById("search-input");
    const searchButton = document.getElementById("search-button");
    const pokemonContainer = document.getElementById("pokemon-container");
    const sprite = document.getElementById("sprite");
    const pokemonName = document.getElementById("pokemon-name");
    const pokemonId = 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 specialAttack = document.getElementById("special-attack");
    const specialDefense = document.getElementById("special-defense");
    const speed = document.getElementById("speed");

    // Define the base URL for the API
    const baseURL = "https://pokeapi.freecodecamp.rocks/api/v2/pokemon/";

    // Add an event listener to the search button
    searchButton.addEventListener("click", function() {
      // Get the value from the search input
      const query = searchInput.value.trim().toLowerCase();

      // Check if the query is empty
      if (query === "") {
        // Alert the user to enter a valid input
        alert("Please enter a Pokémon name or ID");
      } else {
        // Fetch the data from the API using the query
        fetch(baseURL + query)
          .then(function(response) {
            // Check if the response is ok
            if (response.ok) {
              // Return the response as JSON
              return response.json();
            } else {
              // Throw an error
              throw new Error("Pokémon not found");
            }
          })
          .then(function(data) {
            // Display the data to the user
            displayPokemon(data);
          })
          .catch(function(error) {
            // Alert the user about the error
            alert(error.message);
          });
      }
    });

    // Define a function to display the Pokémon data
    function displayPokemon(data) {
      // Set the sprite src to the front_default image
      sprite.src = data.sprites.front_default;

      // Set the pokemon name to the name in uppercase
      pokemonName.textContent = data.name.toUpperCase();

      // Set the pokemon id to the id with a # prefix
      pokemonId.textContent = "#" + data.id;

      // Set the weight to the weight with a Weight: prefix
      weight.textContent = "Weight: " + data.weight;

      // Set the height to the height with a Height: prefix
      height.textContent = "Height: " + data.height;

      // Clear the types element
      types.innerHTML = "";

      // Loop through the types array
      for (let type of data.types) {
        // Create a new div element for each type
        let typeDiv = document.createElement("div");

        // Add the type class to the div
        typeDiv.classList.add("type");

        // Set the text content to the type name in uppercase
        typeDiv.textContent = type.type.name.toUpperCase();

        // Append the div to the types element
        types.appendChild(typeDiv);
      }

      // Set the hp to the hp stat with a HP: prefix
      hp.textContent = "HP: " + data.stats[0].base_stat;

      // Set the attack to the attack stat with a Attack: prefix
      attack.textContent = "Attack: " + data.stats[1].base_stat;

      // Set the defense to the defense stat with a Defense: prefix
      defense.textContent = "Defense: " + data.stats[2].base_stat;

      // Set the special attack to the special-attack stat with a Sp. Atk: prefix
      specialAttack.textContent = "Sp. Atk: " + data.stats[3].base_stat;

      // Set the special defense to the special-defense stat with a Sp. Def: prefix
      specialDefense.textContent = "Sp. Def: " + data.stats[4].base_stat;

      // Set the speed to the speed stat with a Speed: prefix
      speed.textContent = "Speed: " + data.stats[5].base_stat;
    }
  </script>
</body>
</html>

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

  • Your baseURL is wrong. Check the PokéAPI Proxy docs.

  • When you search for a Pokemon that doesn’t exist the API will respond with a 404. So your catch code will run and not do what the requirements are asking for.

  • Open the browser console and run the tests. Read the messages.