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

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">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="styles.css" />
		<title>Pokemon Search</title>

		<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>
		<img src="" alt="pokemon-image" id="sprite" />
		<div id="pokemon-container">
			<div class="pokemon-stats">
				<p id="pokemon-name" class="unique-data"></p>
			<div class="pokemon-stats">
				<p id="pokemon-id" class="unique-data"></p>
			<div class="pokemon-stats">
				<p id="weight" class="unique-data"></p>
			<div class="pokemon-stats">
				<p id="height" class="unique-data"></p>
			<div class="pokemon-stats">
				<div id="types" class="unique-data"></div>
			<div class="pokemon-stats">
				<p id="hp" class="unique-data"></p>
			<div class="pokemon-stats">
				<p id="attack" class="unique-data"></p>
			<div class="pokemon-stats">
				<p id="defense" class="unique-data"></p>
			<div class="pokemon-stats">
				<p id="special-attack" class="unique-data"></p>
			<div class="pokemon-stats">
				<p id="special-defense" class="unique-data"></p>
			<div class="pokemon-stats">
				<p id="speed" class="unique-data"></p>
		<script src="script.js"></script>

/* file: script.js */
async function fetchPokemon(pokemon) {
	try {
		const response = await fetch(
		const data = await response.json();
		const typesDiv = document.getElementById("types");
		const sprite = data.sprites.front_default;
		document.getElementById("sprite").src = sprite;
		document.getElementById("sprite").style.display = "block";
		document.getElementById("pokemon-name").textContent =;
		document.getElementById("pokemon-id").textContent =;
		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];
			type2.textContent = data.types[1];
		} else {
			const type1 = document.createElement("p");
			type1.textContent = data.types[0];
		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 =
		document.getElementById("special-defense").textContent =
		document.getElementById("speed").textContent = data.stats[5].base_stat;
	} catch (error) {
		console.log("Error fetching resource");
		alert("Pokémon not found");

const searchBtn = document.getElementById("search-button");
const userInput = document.getElementById("search-input");
searchBtn.onclick = () => {
	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

Hello, you need the word required after no "marks

1 Like