Tell us what’s happening:
I don’t understand why test are failing when when I tried on my side they are supposed tow work.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokemon Search</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="search-container">
<input id="search-input" required placeholder="Pokemon name or id"/>
<button id="search-button">Search</button>
</div>
<div id="attribute"><img id="sprite"/>
<div>Pokemon Name: <span id="pokemon-name"></span></div>
<div>ID: <span id="pokemon-id"></span></div>
<div>Weight: <span id="weight"></span></div>
<div>Height: <span id="height"></span></div>
<div id="container">Types:
<div id="types"></div>
</div>
<div>HP: <span id="hp"></span></div>
<div>Attack damage: <span id="attack"></span></div>
<div>Defense: <span id="defense"></span></div>
<div>Special attack damage: <span id="special-attack"></span></div>
<div>Special defense: <span id="special-defense"></span></div>
<div>Speed: <span id="speed"></span></div>
</div>
</body>
<script src="script.js"></script>
</html>
/* file: script.js */
const $ = (x) => document.querySelector(x);
const elements = {
img: $("#sprite"),
name: $("#pokemon-name"),
id: $("#pokemon-id"),
height: $("#height"),
weight: $("#weight"),
types: $("#types"),
hp: $("#hp"),
attack: $("#attack"),
defense: $("#defense"),
specialAttack: $("#special-attack"),
specialDefense: $("#special-defense"),
speed: $("#speed"),
};
function displayAttribute({url, name, id, height, weight, types, hp, attack, defense, specialAttack, specialDefense, speed}){
elements.img.src = url;
elements.name.innerHTML = name;
elements.id.innerHTML = id;
elements.height.innerHTML = height;
elements.weight.innerHTML = weight;
elements.types.innerHTML = types.reduce((accum, current) => accum + "<span>" + current + "</span> ", "");
elements.hp.innerHTML = hp;
elements.attack.innerHTML = attack;
elements.defense.innerHTML = defense;
elements.specialAttack.innerHTML = specialAttack;
elements.specialDefense.innerHTML = specialDefense;
elements.speed.innerHTML = speed;
}
function getAttribute(json){
const attribute = {};
attribute.name = json.name.toUpperCase();
attribute.id = json.id;
attribute.url = json.sprites.front_default;
attribute.weight = json.weight;
attribute.height = json.height;
//console.log(json.stats);
for (const stat of json.stats){
console.log(stat);
if (stat.stat.name == "hp") attribute.hp = stat.base_stat;
if (stat.stat.name == "attack") attribute.attack = stat.base_stat;
if (stat.stat.name == "defense") attribute.defense = stat.base_stat;
if (stat.stat.name == "special-attack") attribute.specialAttack = stat.base_stat;
if (stat.stat.name == "special-defense") attribute.specialDefense = stat.base_stat;
if (stat.stat.name == "speed") attribute.speed = stat.base_stat;
}
attribute.types = json.types.map(e => e.type.name.toUpperCase());
console.log(attribute);
return attribute;
}
function resolve(){
const txt = $("input").value.toLowerCase();
console.log(txt);
getRessource(txt);
}
async function getRessource(text){
const response = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${text}`);
if (response.status == 404){
alert("Pokémon not found");
return;
}
const json = await response.json();
// console.log(json);
displayAttribute(getAttribute(json));
}
$("button").addEventListener("click", resolve);
/* file: styles.css */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#search-container{
width: 40%;
height: 3rem;
flex-wrap: wrap;
display: flex;
padding: 1rem;
margin: 0 2rem;
justify-content: space-between;
}
#attribute{
width: 80%;
max-height: 100dvh;
margin: 1rem auto;
border: 3px solid black;
padding: .5rem;
display: grid;
gap: .5rem;
grid-template-columns: repeat(2, auto);
grid-auto-rows: 1.5rem;
}
#sprite{
width: auto;
height: 100%;
display: block;
grid-area: span 1 / span 2;
margin: 0 auto;
}
#container{
grid-area: span 1 / span 2;
}
Your browser information:
User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/126.0.6478.153 Mobile/15E148 Safari/604.1
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
