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

JavaScript
1

Tell us what’s happening:

the tests passes with every ticked except the first one. It said I should have an input with an Id of “search-input” but I have one with search-input as its Id ? so I don’t really understand where lies the problem.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en" lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="styles.css" />
		<title>Pokemon Search</title>
	</head>

	<body>
		<h1>Pokemon Search</h1>
		<div id="search-bar">
			<input type="text" id="search-input" placeholder="Search for a Pokemon" />
			<button id="search-button">Search</button>
		</div>
		<img src="" alt="pokemon-image" id="sprite" />
		<div id="pokemon-container">
			<div class="pokemon-stats">
				<p>NAME</p>
				<p id="pokemon-name" class="unique-data"></p>
			</div>
			<div class="pokemon-stats">
				<p>ID</p>
				<p id="pokemon-id" class="unique-data"></p>
			</div>
			<div class="pokemon-stats">
				<p>WEIGHT</p>
				<p id="weight" class="unique-data"></p>
			</div>
			<div class="pokemon-stats">
				<p>HEIGHT</p>
				<p id="height" class="unique-data"></p>
			</div>
			<div class="pokemon-stats">
				<p>TYPES</p>
				<div id="types" class="unique-data"></div>
			</div>
			<div class="pokemon-stats">
				<p>HP</p>
				<p id="hp" class="unique-data"></p>
			</div>
			<div class="pokemon-stats">
				<p>ATK</p>
				<p id="attack" class="unique-data"></p>
			</div>
			<div class="pokemon-stats">
				<p>DEF</p>
				<p id="defense" class="unique-data"></p>
			</div>
			<div class="pokemon-stats">
				<p>SP-ATK</p>
				<p id="special-attack" class="unique-data"></p>
			</div>
			<div class="pokemon-stats">
				<p>SP-DEF</p>
				<p id="special-defense" class="unique-data"></p>
			</div>
			<div class="pokemon-stats">
				<p>SPEED</p>
				<p id="speed" class="unique-data"></p>
			</div>
		</div>
		<script src="script.js"></script>
	</body>
</html>


/* file: script.js */
async function fetchPokemon(pokemon) {
	try {
		const response = await fetch(
			`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemon}`
		);
		const data = await response.json();
		const typesDiv = document.getElementById("types");
		console.log(data);
		const sprite = data.sprites.front_default;
		document.getElementById("sprite").src = sprite;
		document.getElementById("sprite").style.display = "block";
		document.getElementById("pokemon-name").textContent =
			data.name.toUpperCase();
		document.getElementById("pokemon-id").textContent = data.id;
		document.getElementById("weight").textContent = data.weight;
		document.getElementById("height").textContent = data.height;
		if (data.types.length == 2) {
			const type1 = document.createElement("p");
			const type2 = document.createElement("p");
			type1.textContent = data.types[0].type.name;
			type2.textContent = data.types[1].type.name;
			typesDiv.appendChild(type1);
			typesDiv.appendChild(type2);
		} else {
			const type1 = document.createElement("p");
			type1.textContent = data.types[0].type.name;
			typesDiv.appendChild(type1);
		}
		document.getElementById("hp").textContent = data.stats[0].base_stat;
		document.getElementById("attack").textContent = data.stats[1].base_stat;
		document.getElementById("defense").textContent = data.stats[2].base_stat;
		document.getElementById("special-attack").textContent =
			data.stats[3].base_stat;
		document.getElementById("special-defense").textContent =
			data.stats[4].base_stat;
		document.getElementById("speed").textContent = data.stats[5].base_stat;
	} catch (error) {
		console.log("Error fetching resource");
		console.log(error);
		alert("Pokémon not found");
	}
}

const searchBtn = document.getElementById("search-button");
const userInput = document.getElementById("search-input");
searchBtn.onclick = () => {
	fetchPokemon(userInput.value.toLowerCase());
	userInput.value = "";
	document.getElementById("types").innerHTML = "";
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0

Challenge Information:

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

2

Hello, you need the word required after no "marks

1 Like