Build a Pokémon Search App - Code works but tests dont pass

JavaScript
1

My code works as intended, but doesn’t pass any test from 15 to the last, except 21 (alert error).

script.js:

const apiPrefix = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/"
function $(e) {
  return document.querySelector(e)
}

let container = $('.data-container')
let input = $('#search-input')
let button = $('#search-button')
let form = $('form')
let pokemonName = $('#pokemon-name')
let pokemonId = $('#pokemon-id')
let weight = $('#weight')
let height = $('#height')

button.addEventListener('click', async () => {
  try {
    if (!input.value) {
      throw new Error("Pokémon not found")
    }
    let response = await fetch(apiPrefix + input.value.toLowerCase())
    if (!response.ok) {
      throw new Error("Pokémon not found")
    }
    let oldImg = $('#sprite')
    let oldTypes = $('#types')
    if (oldImg) {
      container.removeChild(oldImg)
    }
    if (oldTypes) {
      container.removeChild(oldTypes)

    }
    let data = await response.json()
    pokemonName.innerText = data.name.toUpperCase()
    pokemonId.innerText = '#' + data.id
    weight.innerText = 'Weight: ' + data.weight
    height.innerText = 'Height: ' + data.height
    for (const item of data.stats) {
      console.log(item.stat.name)
      $(`#${item.stat.name}`).innerText = item["base_stat"]
    }
    let img = document.createElement('img')
    img.src = data.sprites["front_default"]
    img.id = 'sprite'
    container.appendChild(img)
    let types = document.createElement('ul')
    for (const tipo of data.types) {
      let li = document.createElement('li')
      li.innerText = tipo.type.name.toUpperCase()
      types.appendChild(li)
    }
    types.id = 'types'
    container.appendChild(types)
  } catch (error) {
    alert(error.message)
  }
})

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>
  <form>
    <input type="text" id="search-input" required/>
    <button id="search-button" type="submit">Search</button>
    <div id="prueba"></div>
    <div class="data-container">
      <p id="pokemon-name"></p>
      <p id="pokemon-id"></p>
      <p id="weight"></p>
      <p id="height"></p>
      <p id="types"></p>
      <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>
  </form>
  <script src="script.js"></script>
</body>
</html>

i don’t know what am i doing wrong

2

#15 - This is the test: When the #search-input element contains the value Pikachu and the #search-button element is clicked…

Where do you check for Pikachu after clicking the button ? I don’t see it in the provided code.

3

There appear to be some conflict between your $ function and the background code doing tests. After renaming $ to something else, everything passes.

1 Like