Tell us what’s happening:
Is there a way you can explain to me how to complete th
Your code so far
<!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>
<style>
/* Add your CSS code here */
body {
font-family: Arial, sans-serif;
text-align: center;
}
#search-input {
width: 300px;
height: 30px;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}
#search-button {
width: 100px;
height: 40px;
border: none;
border-radius: 5px;
background-color: green;
color: white;
font-size: 18px;
}
#sprite {
width: 200px;
height: 200px;
}
#pokemon-name {
font-size: 32px;
font-weight: bold;
}
#pokemon-id {
font-size: 24px;
color: gray;
}
#weight, #height {
font-size: 18px;
}
#types {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.type {
width: 100px;
height: 30px;
border: 1px solid black;
border-radius: 5px;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
}
#stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
margin: 10px;
}
.stat {
width: 100px;
height: 30px;
border: 1px solid black;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>Pokémon Search App</h1>
<p>Enter a Pokémon name or ID and click the search button</p>
<input type="text" id="search-input" placeholder="Enter a Pokémon name or ID">
<button id="search-button">Search</button>
<div id="pokemon-container">
<!-- Add your HTML elements here -->
<img id="sprite" src="" alt="">
<h2 id="pokemon-name"></h2>
<p id="pokemon-id"></p>
<p id="weight"></p>
<p id="height"></p>
<div id="types"></div>
<div id="stats">
<div class="stat" id="hp"></div>
<div class="stat" id="attack"></div>
<div class="stat" id="defense"></div>
<div class="stat" id="special-attack"></div>
<div class="stat" id="special-defense"></div>
<div class="stat" id="speed"></div>
</div>
</div>
<script>
// Add your JavaScript code here
// Get the elements from the document
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonContainer = document.getElementById("pokemon-container");
const sprite = document.getElementById("sprite");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const types = document.getElementById("types");
const hp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
// Define the base URL for the API
const baseURL = "https://pokeapi.freecodecamp.rocks/api/v2/pokemon/";
// Add an event listener to the search button
searchButton.addEventListener("click", function() {
// Get the value from the search input
const query = searchInput.value.trim().toLowerCase();
// Check if the query is empty
if (query === "") {
// Alert the user to enter a valid input
alert("Please enter a Pokémon name or ID");
} else {
// Fetch the data from the API using the query
fetch(baseURL + query)
.then(function(response) {
// Check if the response is ok
if (response.ok) {
// Return the response as JSON
return response.json();
} else {
// Throw an error
throw new Error("Pokémon not found");
}
})
.then(function(data) {
// Display the data to the user
displayPokemon(data);
})
.catch(function(error) {
// Alert the user about the error
alert(error.message);
});
}
});
// Define a function to display the Pokémon data
function displayPokemon(data) {
// Set the sprite src to the front_default image
sprite.src = data.sprites.front_default;
// Set the pokemon name to the name in uppercase
pokemonName.textContent = data.name.toUpperCase();
// Set the pokemon id to the id with a # prefix
pokemonId.textContent = "#" + data.id;
// Set the weight to the weight with a Weight: prefix
weight.textContent = "Weight: " + data.weight;
// Set the height to the height with a Height: prefix
height.textContent = "Height: " + data.height;
// Clear the types element
types.innerHTML = "";
// Loop through the types array
for (let type of data.types) {
// Create a new div element for each type
let typeDiv = document.createElement("div");
// Add the type class to the div
typeDiv.classList.add("type");
// Set the text content to the type name in uppercase
typeDiv.textContent = type.type.name.toUpperCase();
// Append the div to the types element
types.appendChild(typeDiv);
}
// Set the hp to the hp stat with a HP: prefix
hp.textContent = "HP: " + data.stats[0].base_stat;
// Set the attack to the attack stat with a Attack: prefix
attack.textContent = "Attack: " + data.stats[1].base_stat;
// Set the defense to the defense stat with a Defense: prefix
defense.textContent = "Defense: " + data.stats[2].base_stat;
// Set the special attack to the special-attack stat with a Sp. Atk: prefix
specialAttack.textContent = "Sp. Atk: " + data.stats[3].base_stat;
// Set the special defense to the special-defense stat with a Sp. Def: prefix
specialDefense.textContent = "Sp. Def: " + data.stats[4].base_stat;
// Set the speed to the speed stat with a Speed: prefix
speed.textContent = "Speed: " + data.stats[5].base_stat;
}
</script>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App