Tell us what’s happening:
I believe I have completed all the stories required but still for some reason I am unable to pass the test. What should I do?
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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pokemon Search Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="headingAndInput">
<h1 id="page-heading">Pokemon Search App</h1>
<label for="search-input">Search for Pokémon Name or ID:</label>
<input id="search-input" required>
<button id="search-button">Search</button>
</div>
<div id="pokemonData">
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const input = document.getElementById("search-input");
const btn = document.getElementById("search-button");
const heading = document.getElementById("page-heading");
const dataDiv = document.getElementById("pokemonData");
btn.addEventListener("click", ()=>{
async function fetchData(){
try{
const inputValue = input.value.toLowerCase();
const response = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${inputValue}`)
if (!response.ok){
alert("Pokémon not found")
}
const data = await response.json();
console.log(data)
dataDiv.innerHTML = `
<h2 id="pokemon-name">${data.name.toUpperCase()}</h2>
<img id="sprite"src="${data.sprites.front_default}" alt="${data.name}">
<p id="pokemon-id">Id: ${data.id}</p>
<p id="height">Height: ${data.height}</p>
<p id="weight">Weight: ${data.weight}</p>
<p id="hp">Hp: ${data.stats[0].base_stat}</p>
<p id="attack">Attack: ${data.stats[1].base_stat}</p>
<p id="defense">Defense: ${data.stats[2].base_stat}</p>
<p id="special-attack">Sp. Attack: ${data.stats[3].base_stat}</p>
<p id="special-defense">Sp. Defence: ${data.stats[4].base_stat}</p>
<p id="speed">Speed: ${data.stats[5].base_stat}</p>
<p id="types">Type: ${data.types.map(obj => obj.type.name).join(", ").toUpperCase()}</p>
`;
}
catch(error){
console.log(error)
}
}
fetchData()
})
/* file: styles.css */
body{
background-color: black;
color: white;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/127.0.0.0
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
