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

satisfied all the user stories but the test’s are not passing

my code:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pokémon Search</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <h1>Pokémon Search</h1>
    <div>
      <div class="textd">
        <input required class="text"id="search-input"type="text"placeholder="Enter Pokémon Name or ID"/>
      </div>
        <div class="btn">
        <button id="search-button">Search</button>
        </div>      
    </div>
    <div class="result"id="result"></div>
    <script src=./script.js></script>
  </body>
</html>

CSS:

:root {
  --dark-grey: #0a0a0a;
  --white: #a1a1a1;
  --yellow: #f9be39;
}

body {
  color: var(--white);
  background-color: var(--dark-grey);
}

.textd{
  display:flex;
  justify-content: space-around;
}
.text{
  background-color:var(--dark-grey);
  padding: 0px 50px 0px 50px;
  border-radius: 10px;
  color:var(--white);
}

.btn{
  display:flex;
  justify-content: center;
  padding:20px;
}

button{
  background-color:var(--dark-grey);
  color:var(--white);
  margin:10 10 10 10;
  border-color:var(--yellow);
}
h1,h6{
  margin:100 0 50 0;
  display:flex;
  justify-content:center;
}
span{
  margin-right:10
  
}

.result{
  display:grid;
  justify-content:center;
}

.NI{
  display:flex;
  justify-content:space-between;
  color:red;
}

JS:

const pokemon = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
const inputText = document.getElementById("search-input");
const button = document.getElementById("search-button");
const result = document.getElementById("result");


const fetchData = async () => {
  try {
    const res = await fetch(pokemon);
    const data = await res.json();
    pokemonStats(data);  
  } catch (err) {
    console.log(err);
  }
};
fetchData();

const pokemonStats = (data) =>{
    button.addEventListener("click", async ()=>{
        const {results} = data;
        const foundId = results.find((element) => element.id  == (inputText.value).toLowerCase());
        const foundName = results.find((element) => element.name == (inputText.value).toLowerCase());
          if(foundId){
            const url = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${foundId.id}/`;
            const urlRes = await fetch(url);
            const urlData = await urlRes.json();
            const {height,weight,stats} = urlData;
            let a=[];
            const types = ()=>{
                for(let i=0;i<urlData.types.length;i++){
                  a.push(`<span>${urlData.types[i].type.name}</span>`);
               }
            }
            types()
            result.innerHTML = `  
                                <img id="pokemon-img"src="${urlData.sprites.front_default}"/>
                                <div class="NI">
                                <div id="pokemon-name">${(foundId.name).toUpperCase()}</div>
                                <div id="pokemon-id">#${foundId.id}</div>
                                </div>
                                <div id="weight">Weight: ${weight}</div>
                                <div id="height">Height: ${height}</div>
                                <div id="types">Type: ${a.join("")}</div>
                                <div id="hp">HP: ${stats[0].base_stat}</div>
                                <div id="attack">Attack: ${stats[1].base_stat}</div>
                                <div id="defense">Defence: ${stats[2].base_stat}</div>
                                <div id="special-attack">Special Attack: ${stats[3].base_stat}</div>
                                <div id="special-defense">Special Defence: ${stats[4].base_stat}</div>
                                <div id="speed">Speed: ${stats[5].base_stat}</div>
                              `
            }else if(foundName){
            const url = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${foundName.id}/`;
            const urlRes = await fetch(url);
            const urlData = await urlRes.json();
            const {height,weight,stats} = urlData;
            let a=[];
            const types = ()=>{
                for(let i=0;i<urlData.types.length;i++){
                  a.push(`<span>${urlData.types[i].type.name}</span>`);
               }
            }
            types()
            result.innerHTML = `  
                                <img src="${urlData.sprites.front_default}"/>
                                <div class="NI">
                                <div id="pokemon-name">${foundName.name.toUpperCase()}</div>
                                <div id="pokemon-id">#${foundName.id}</div>
                                </div>
                                <div id="weight">Weight: ${weight}</div>
                                <div id="height">Height: ${height}</div>
                                <div id="types">Type: ${a.join("")}</div>
                                <div id="hp">HP: ${stats[0].base_stat}</div>
                                <div id="attack">Attack: ${stats[1].base_stat}</div>
                                <div id="defense">Defence: ${stats[2].base_stat}</div>
                                <div id="special-attack">Special Attack: ${stats[3].base_stat}</div>
                                <div id="special-defense">Special Defence: ${stats[4].base_stat}</div>
                                <div id="speed">Speed: ${stats[5].base_stat}</div>
                              `            
                        }else{
                            alert("Pokémon not found");
                      }
  });
};

i tried adding the divs directly to the html and those test cases were passing but remaining still failed.

ps: yes i know its not clean code & i didn’t follow “DRY” but hey it works, so is it a test case parameter issue ? or did i do something wrong ?

my browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0

Challenge Information:

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

I’m fairly sure tests checking if elements are existing will be checked before clicking search button. This means at the time test is checking, they don’t exist yet, as some of them are created only during preparing result.

Make sure the expected elements contain only the values that tests are indicating.

okay so I did some changes and only one test is not passing now !

User Stories 14: When the #search-input element contains the value Red and the #search-button element is clicked, an alert should appear with the text Pokémon not found

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pokémon Search</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <h1>Pokémon Search</h1>
    <div>
      <div class="textd">
        <input required class="text"id="search-input"type="text"placeholder="Enter Pokémon Name or ID"/>
      </div>
        <div class="btn">
        <button id="search-button">Search</button>
        </div>      
    </div>
    <div class="result"id="result">
    </div>
    <script src=./script.js></script>
  </body>
</html>

CSS:

:root {
  --dark-grey: #0a0a0a;
  --white: #a1a1a1;
  --yellow: #f9be39;
}

body {
  color: var(--white);
  background-color: var(--dark-grey);
}

.textd{
  display:flex;
  justify-content: space-around;
}
.text{
  background-color:var(--dark-grey);
  padding: 0px 50px 0px 50px;
  border-radius: 10px;
  color:var(--white);
}

.btn{
  display:flex;
  justify-content: center;
  padding:20px;
}

button{
  background-color:var(--dark-grey);
  color:var(--white);
  margin:10 10 10 10;
  border-color:var(--yellow);
}
h1,h6{
  margin:100 0 50 0;
  display:flex;
  justify-content:center;
}
span{
  margin-right:10
  
}

.result{
  display:grid;
  justify-content:center;
}

.NI{
  display:flex;
  justify-content:space-between;
  color:red;
}
.SI{
  display:flex;
  justify-content:space-between;
  
}

JS:

const pokemon = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
const inputText = document.getElementById("search-input");
const button = document.getElementById("search-button");
const result = document.getElementById("result");


const fetchData = async () => {
  try {
    const res = await fetch(pokemon);
    const data = await res.json();
    pokemonStats(data);  
  } catch (err) {
    console.log(err);
  }
};
fetchData();

const pokemonStats = (data) =>{
    button.addEventListener("click", async ()=>{
        const {results} = data;
        const foundId = results.find((element) => element.id  == (inputText.value).toLowerCase());
        const foundName = results.find((element) => element.name == (inputText.value).toLowerCase());
          if(foundId){
            const url = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${foundId.id}/`;
            const urlRes = await fetch(url);
            const urlData = await urlRes.json();
            const {height,weight,stats} = urlData;
            let a=[];
            const types = ()=>{
                for(let i=0;i<urlData.types.length;i++){
                  a.push(`<span>${urlData.types[i].type.name}</span>`);
               }
            }
            types()
            result.innerHTML = `  
                                <img id="sprite" src="${urlData.sprites.front_default}"/>
                                <div class="NI">
                                  <div id="pokemon-name">${(foundId.name).toUpperCase()}</div>
                                  <div id="pokemon-id">#${foundId.id}</div>
                                </div>
                                <div id="weight">Weight: ${weight}</div>
                                <div id="height">Height: ${height}</div>
                                <div class="SI">
                                  <div>Type: </div>
                                  <div id="types">${a.join("").toUpperCase()}</div>
                                </div>
                                <div class="SI">
                                  <div>HP: </div>
                                  <div id="hp">${stats[0].base_stat}</div>
                                </div >
                                <div class="SI">
                                  <div>Attack: </div>
                                  <div id="attack">${stats[1].base_stat}</div>
                                </div>
                                <div class="SI">
                                  <div>Defence: </div>
                                  <div id="defense">${stats[2].base_stat}</div>
                                </div>
                                <div class="SI">
                                  <div>Special Attack: </div>
                                  <div id="special-attack">${stats[3].base_stat}</div>
                                </div>
                                <div class="SI">
                                  <div>Special Defence: </div>
                                  <div id="special-defense">${stats[4].base_stat}</div>
                                </div>
                                <div class="SI">
                                  <div>Speed: </div>
                                  <div id="speed">${stats[5].base_stat}</div>
                              </div>`

            }else if(foundName){
            const url = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${foundName.id}/`;
            const urlRes = await fetch(url);
            const urlData = await urlRes.json();
            const {height,weight,stats} = urlData;
            let a=[];
            const types = ()=>{
                for(let i=0;i<urlData.types.length;i++){
                  a.push(`<span>${urlData.types[i].type.name}</span>`);
               }
            }
            types()
            result.innerHTML = `  
                                <img id="sprite" src="${urlData.sprites.front_default}"/>
                                <div class="NI">
                                <div id="pokemon-name">${foundName.name.toUpperCase()}</div>
                                <div id="pokemon-id">#${foundName.id}</div>
                                </div>
                                <div id="weight">Weight: ${weight}</div>
                                <div id="height">Height: ${height}</div>
                                <div class="SI">
                                  <div>Type: </div>
                                  <div id="types">${a.join("").toUpperCase()}</div>
                                </div>
                                <div class="SI">
                                  <div>HP: </div>
                                  <div id="hp">${stats[0].base_stat}</div>
                                </div >
                                <div class="SI">
                                  <div>Attack: </div>
                                  <div id="attack">${stats[1].base_stat}</div>
                                </div>
                                <div class="SI">
                                  <div>Defence: </div>
                                  <div id="defense">${stats[2].base_stat}</div>
                                </div>
                                <div class="SI">
                                  <div>Special Attack: </div>
                                  <div id="special-attack">${stats[3].base_stat}</div>
                                </div>
                                <div class="SI">
                                  <div>Special Defence: </div>
                                  <div id="special-defense">${stats[4].base_stat}</div>
                                </div>
                                <div class="SI">
                                  <div>Speed: </div>
                                  <div id="speed">${stats[5].base_stat}</div>
                              </div>`
                                          
                        }else{
                            window.alert("Pokémon not found");
                      }
  });
};

Hmm, that test is passing for me with your updated code.

It’s odd. For me, it passes the first time and then it fails if I run the tests again. If I use an Incognito window I can reproduce it, using the same window the test will pass and then fail. If I close the window and open up a new Incognito window again it will do the same, pass then fail.

yeah, I tried different browsers too but its still the same

Seems a bit random actually.

If I look in the console and all I see is the 404 for the get for the red it passes the test. But if the 404 is followed by an error it fails.

Passes

GET https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/red 404 (Not Found)

Fails:

GET https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/red 404 (Not Found)

frame.ts:256 Error: TypeError: Cannot read properties of undefined (reading 'trim')
    at eval (eval at <anonymous> (frame-runner.ts:95:35), <anonymous>:18:11)
    at async HTMLDocument.runTests [as __runTest] (frame-runner.ts:103:18)
    at async b (frame.ts:153:5)

Edit: please post your updated code including the new HTML. I would assume the error is caused by the test trying to access values and failing. Which shouldn’t happen with correct and working code.

As an aside. You really only need one fetch. It is the same endpoint used for names and ids and there is no point in fetching before the search happens.