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

JavaScript
3

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");
                      }
  });
};