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

HTML-CSS
1

Tell us what’s happening:

You should have an input element with an id of “search-input” and is required.

The above is the first test and only that doesn’t pass and all the others pass

I know that this is still in beta but i think addressing this issue maybe helpful for the devs

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://api.fontshare.com/v2/css?f[]=boska@400&f[]=satoshi@400,500,700,900&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Search and view details of Pokémon by name or ID">
  <meta name="keywords" content="Pokémon, search, stats, details">
  <meta name="author" content="Your Name">
  <title>Pokémon Search App</title>
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <main>
    <section class="1" aria-label="Pokémon Search">
      <div id="search-input-div">
        <input id="search-input" placeholder="Search by Pokémon name or ID." aria-label="Search Pokémon">
        <button id="search-button" aria-label="Search">Search</button>
      </div>
    </section>
    <section class="pokemon-image-details" aria-label="Pokémon Details">
      <img id="sprite" alt="Pokémon sprite" aria-label="Pokémon image">
      <div class="pokemon-details">
        <p id="pokemon-name" aria-label="Pokémon name"></p>
        <p id="pokemon-id" aria-label="Pokémon ID"></p>
        <div class="weight-height">
          <p id="weight" aria-label="Pokémon weight"></p>
          <p id="height" aria-label="Pokémon height"></p>
        </div>
        <div id="types" aria-label="Pokémon types">
        </div>
      </div>
    </section>
    <section class="base-stats-container" aria-label="Pokémon Base Stats">
      <div>
        <div class="poke-data-base">
          <h1>Base</h1>
          <p id="hp-base" aria-label="HP stat">HP</p>
          <p id="attack-base" aria-label="Attack stat">Attack</p>
          <p id="defense-base" aria-label="Defense stat">Defense</p>
          <p id="special-attack-base" aria-label="Special Attack stat">Special Attack</p>
          <p id="special-defense-base" aria-label="Special Defense stat">Special Defense</p>
          <p id="speed-base" aria-label="Speed stat">Speed</p>
        </div>  
        <div class="poke-data-stats">
          <h1>Stats</h1>
          <p id="hp" aria-label="HP stat"></p>
          <p id="attack" aria-label="Attack stat"></p>
          <p id="defense" aria-label="Defense stat"></p>
          <p id="special-attack" aria-label="Special Attack stat"></p>
          <p id="special-defense" aria-label="Special Defense stat"></p>
          <p id="speed" aria-label="Speed stat"></p>
        </div>  
      </div>
    </section>
  </main>  
  <script src="script.js"></script>
</body>
</html>


/* file: script.js */
const searchInput = document.getElementById("search-input")
const searchInputButton = document.getElementById("search-button")
const pokemonName = document.getElementById("pokemon-name")
const pokemonId = document.getElementById("pokemon-id")
const weightVal = document.getElementById("weight")
const heightVal = document.getElementById("height")
const typesDiv = document.getElementById("types")
const pokemonImg = document.getElementById("sprite")
const url = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
const baseStatsContainerStats = document.querySelectorAll(".base-stats-container .poke-data-stats p");
const baseStatsContainerBase = document.querySelectorAll(".base-stats-container .poke-data-base");


const fetchData = async  (val) => {
  try {
    let url = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
    let data = await fetch(`${url}/${val}`)
    let resolved = await data.json()
    if (resolved.hasOwnProperty("name"||"id")) {
      updateUi(resolved)
    }

    
  }
  catch (error) { 
    alert("Pokémon not found")
  }
}

const updateUi = (dataObj) => {
  const pokemonTypesColors = {
    normal: ["#A8A77A", "#000000"],   // Background: normal, Text: black
    fire: ["#EE8130", "#FFFFFF"],     // Background: fire, Text: white
    water: ["#6390F0", "#FFFFFF"],    // Background: water, Text: white
    electric: ["#F7D02C", "#000000"], // Background: electric, Text: black
    grass: ["#7AC74C", "#000000"],    // Background: grass, Text: black
    ice: ["#96D9D6", "#000000"],      // Background: ice, Text: black
    fighting: ["#C22E28", "#FFFFFF"], // Background: fighting, Text: white
    poison: ["#A33EA1", "#FFFFFF"],   // Background: poison, Text: white
    ground: ["#E2BF65", "#000000"],   // Background: ground, Text: black
    flying: ["#A98FF3", "#000000"],   // Background: flying, Text: black
    psychic: ["#F95587", "#FFFFFF"],  // Background: psychic, Text: white
    bug: ["#A6B91A", "#000000"],      // Background: bug, Text: black
    rock: ["#B6A136", "#000000"],     // Background: rock, Text: black
    ghost: ["#735797", "#FFFFFF"],    // Background: ghost, Text: white
    dragon: ["#6F35FC", "#FFFFFF"],   // Background: dragon, Text: white
    dark: ["#705746", "#FFFFFF"],     // Background: dark, Text: white
    steel: ["#B7B7CE", "#000000"],    // Background: steel, Text: black
    fairy: ["#D685AD", "#000000"]     // Background: fairy, Text: black
  };
let  { base_experience , height  , id ,  name ,  order ,  sprites ,  stats ,  types ,  weight } = dataObj;
pokemonName.innerText = name.toUpperCase();
pokemonId.innerText = `#${id}`;
weightVal.innerText = `Weight: ${weight}`
heightVal.innerText = `Height: ${height}`
stats.forEach((ele,ind) => baseStatsContainerStats[ind].innerText = ele.base_stat)
types.forEach((ele) => {
  let {type} = ele;
  type = type.name
  typesDiv.innerHTML += `<div style="background-color:${pokemonTypesColors[type][0]};color:${pokemonTypesColors[type][1]}" class="type " id="${type}"> ${type.toUpperCase()}</div>`
})
pokemonImg.src = sprites["front_default"] 
pokemonImg.alt = "image-of-" + sprites["front_default"] 
pokemonImg.id = "sprite"
// console.log(sprites);

}

const resetEles = () => {
  pokemonName.innerText = ""
pokemonId.innerText = ""
weightVal.innerText = ""
heightVal.innerText = ""
typesDiv.innerHTML = ""
pokemonImg.src = ""

}

searchInput.addEventListener("keydown",(ele) => {
  if (ele.key === "Enter") {
    resetEles()
    fetchData(searchInput.value.toLowerCase())
    searchInput.value = ""
  }
})

searchInputButton.addEventListener("click",(ele) => {
    resetEles()
    fetchData(searchInput.value.toLowerCase())
    searchInput.value = ""
})

/* file: styles.css */
:root {
    --main-bg: #FFBA08;
    --table-bg: #FAA307;
    --button-color: #dc2f02;
}
body {
    background-color:#FFBA08 ;
    padding: 5px;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #03071E;
    font-family: 'Satoshi', sans-serif;
}

::placeholder {
    color: #370617;
    opacity: 0.3;
    font-size: 22px;
    font-weight: 500;
}

main {
    height: 100vh;
    width: 100%;
    background-color: var(--main-bg);
}

input:focus {
    width: 200px;
    outline: none;
}

#search-input-div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
}

#search-input-div input, #search-input-div button {
    margin: 11px;
    height: 52px;
    background-color: var(--button-color);
    border: 2px solid #fb5607;
    border-radius: 12px;
    font-size: 30px;
}

#search-input-div input {
    width: 37vw;
    padding: 15px;
}

#search-input-div button {
    width: 6vw;
    font-size: 22px;
    font-weight: 500;
    color: #333333;
}

.pokemon-image-details {
    display: flex;
    justify-content: center;
    margin-top: 66px;
    height: 300px;
}

.pokemon-image-details img {
    height: 400px;
    margin-top: -75px;
    margin-right: -30px;
}

#pokemon-name, #pokemon-id {
    /* text-transform:uppercase; */
    font-weight: bolder;
}

#pokemon-name {
    font-size: 65px;
}

#pokemon-id {
    font-size: 35px;
}

.weight-height {
    display: flex;
    font-size: 22px;
    font-weight: 600;
}

.weight-height * {
    margin-right: 22px;
}

.pokemon-details {
    display: flex;
    flex-direction: column;
}

.base-stats-container {
    display: flex;
    justify-content: center;
}

.base-stats-container > div {
    display: flex;
    background-color: var(--table-bg);
    border-radius: 8px;
    padding: 22px;
}

.base-stats-container h1 {
    text-align: center;
    font-size: 36px;
    font-weight: 900;
}

.base-stats-container > div > div {
    width: 20vw;
}

.base-stats-container p {
    padding: 5.4px;
    font-weight: 600;
    font-size: 20px;
}

.poke-data-base p::after {
    content: " :";
}

.poke-data-stats > p {
    text-align: center;
}

#types {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.type {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 29px;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
    margin-top: 2px;
}

@media (max-width: 768px) {
    
    #search-input-div input {
        width: 70vw
    }

    #search-input-div button {
        width: 20vw;
    }

    .pokemon-image-details {
        flex-direction: column;
        align-items: center;
        height: auto;
    }

    .pokemon-image-details img {
        margin-right: 0;
    }
.base-stats-container {
    position: relative;
    top: 50px;
    text-align: center;
    width: 100vw;
    
}

body  {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

    .base-stats-container > div > div {
        position: relative;
        padding: -12px;
        width: 42vw;
    }
}

@media (max-width: 480px) {


.pokemon-image-details img {
    height: 400px;
    margin-top: -125px;
    margin-right: -30px;
}

    #search-input-div input, #search-input-div button {
        font-size: 18px;
    }

    #pokemon-name {
        font-size: 40px;
    }

    #pokemon-id {
        font-size: 25px;
    }

    .base-stats-container h1 {
        font-size: 28px;
    }
    .base-stats-container {
        margin-left: -7.6px;
    }
    .base-stats-container p {
        font-size: 16px;
    }
    #search-input-div input, #search-input-div button {
        margin: 6px;
        height: 40px;
        background-color: var(--button-color);
        border: 2px solid #fb5607;
        border-radius: 10px;
        font-size: 14px;
    }

    #search-input-div input {
        width: 69vw;
        padding: 15px;
        
    }

    ::placeholder {
        color: #370617;
        opacity: 0.3;
        font-weight: 500;
        font-size: 14px;

    }
}

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

2

I haven’t tried this project but if the hint says that the input field should be required then maybe try adding the required attribute to it to see what happens.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.