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