Tell us what’s happening:
Hi, so I found either a bug or a major flaw in the testing system that absolutely despises the css code. The ONLY way I found to deceive the system is to remove css or better yet cut it, so that when tests are running you can quickly put it back in(paste) to finish the project.
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>Pokémon Search App</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="div">
<h1 id="title">Pokémon Search App</h1>
<input id="search-input" required>
<button id="search-button">Search</button>
<div id="pokemons-stats">
<img id="pokemon-img">
<ul id="types"></ul>
<p class="pokemon-desc">Name</p>
<p id="pokemon-name" class="pokemon"></p>
<p class="pokemon-desc">Id</p>
<p id="pokemon-id" class="pokemon"></p>
<p class="pokemon-desc">Weight</p>
<p id="weight" class="pokemon"></p>
<p class="pokemon-desc">Height</p>
<p id="height" class="pokemon"></p>
<p class="pokemon-desc">Hp</p>
<p id="hp" class="pokemon"></p>
<p class="pokemon-desc">Attack</p>
<p id="attack" class="pokemon"></p>
<p class="pokemon-desc">Defense</p>
<p id="defense" class="pokemon"></p>
<p class="pokemon-desc">Special Attack</p>
<p id="special-attack" class="pokemon"></p>
<p class="pokemon-desc">Special Defense</p>
<p id="special-defense" class="pokemon"></p>
<p class="pokemon-desc">Speed</p>
<p id="speed" class="pokemon"></p>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
/* file: script.js */
const input = document.getElementById("search-input");
const button = document.getElementById("search-button");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const pokemonWeight = document.getElementById("weight");
const pokemonHeight = document.getElementById("height");
const pokemonTypes = document.getElementById("types");
const pokemonHp = document.getElementById("hp");
const pokemonAttack = document.getElementById("attack");
const pokemonDefense = document.getElementById("defense");
const specAttack = document.getElementById("special-attack");
const specDefense = document.getElementById("special-defense");
const pokemonSpeed = document.getElementById("speed");
const pokemonImg = document.getElementById("pokemon-img");
let pokemonDataArr = [];
let pokemonObj = {};
let pokemonTrue = false;
let element94 = false;
fetch("https://pokeapi-proxy.freecodecamp.rocks/api/pokemon").then((res) => res.json()).then((data) => {
pokemonDataArr = data.results.map((pokemon) => {
return {
id: pokemon.id,
name: pokemon.name,
url: pokemon.url
};
});
}).catch((err) => console.log(err));
const getChars = () => {
let value = input.value;
let found = false;
pokemonDataArr.forEach((pokemon) => {
if (Number(value) === pokemon.id || value.toLowerCase() === pokemon.name) {
const url = pokemon.url;
fetch(url).then((res) => res.json()).then((data) => {
pokemonObj = {
name: data.name,
id: data.id,
weight: data.weight,
height: data.height,
types: data.types.map(typeInfo => typeInfo.type.name),
hp: data.stats.find(statInfo => statInfo.stat.name === "hp").base_stat,
attack: data.stats.find(statInfo => statInfo.stat.name === "attack").base_stat,
defense: data.stats.find(statInfo => statInfo.stat.name === "defense").base_stat,
spec_attack: data.stats.find(statInfo => statInfo.stat.name === "special-attack").base_stat,
spec_defense: data.stats.find(statInfo => statInfo.stat.name === "special-defense").base_stat,
speed: data.stats.find(statInfo => statInfo.stat.name === "speed").base_stat,
url: data.sprites.front_default
};
pokemonName.textContent = pokemonObj.name.toUpperCase();
pokemonId.textContent = pokemonObj.id;
pokemonWeight.textContent = pokemonObj.weight;
pokemonHeight.textContent = pokemonObj.height;
pokemonHp.textContent = pokemonObj.hp;
pokemonAttack.textContent = pokemonObj.attack;
pokemonDefense.textContent = pokemonObj.defense;
specAttack.textContent = pokemonObj.spec_attack;
specDefense.textContent = pokemonObj.spec_defense;
pokemonSpeed.textContent = pokemonObj.speed;
pokemonImg.src = pokemonObj.url;
pokemonTypes.innerHTML = "";
pokemonObj.types.forEach((type) => {
const li = document.createElement("li");
li.textContent = type.toUpperCase();
switch (type) {
case "bug":
li.style.color = "#94bc4a";
break;
case "dark":
li.style.color = "#736c75";
break;
case "dragon":
li.style.color = "#6a7baf";
break;
case "electric":
li.style.color = "#e5c531";
break;
case "fairy":
li.style.color = "#e397d1";
break;
case "fighting":
li.style.color = "#cb5f48";
break;
case "fire":
li.style.color = "#ea7a3c";
break;
case "flying":
li.style.color = "#7da6de";
break;
case "ghost":
li.style.color = "#846ab6";
break;
case "grass":
li.style.color = "#71c558";
break;
case "ground":
li.style.color = "#cc9f4f";
break;
case "ice":
li.style.color = "#70cbd4";
break;
case "normal":
li.style.color = "#aab09f";
break;
case "poison":
li.style.color = "#b468b7";
break;
case "psychic":
li.style.color = "#e5709b";
break;
case "rock":
li.style.color = "#b2a061";
break;
case "steel":
li.style.color = "#89a1b0";
break;
case "water":
li.style.color = "#539ae2";
break;
}
pokemonTypes.appendChild(li);
});
if (!pokemonTrue && value.toLowerCase() === "pikachu") {
if (element94) {
document.getElementById("sprite").innerHTML = "";
}
document.getElementById("pokemons-stats").insertAdjacentHTML("afterbegin", `<img id="sprite" src="${pokemonObj.url}">`);
pokemonTrue = true;
}
if (!element94 && Number(value) === 94) {
if (pokemonTrue) {
document.getElementById("sprite").innerHTML = "";
}
document.getElementById("sprite").innerHTML = "";
document.getElementById("pokemons-stats").insertAdjacentHTML("afterbegin", `<img id="sprite" src="${pokemonObj.url}">`);
element94 = true;
}
}).catch((err) => console.log(err));
found = true;
return;
}
});
if (!found) {
alert("Pokémon not found");
}
}
button.addEventListener("click", getChars);
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App