Tell us what’s happening:
In the JS file, I have all of the creature’s data shown on the static page. the only exception would be the creature type, causing the alert pop up.
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">
<link` rel="stylesheet" href="Jc_Pokedex_styles.css">
<title>Pokedex Project</title>
</head>
<body>
<header>
<h1>CreatureDex</h1>
</header>
<input type="text" id="search-input" placeholder="Enter Pokémon name or Pokedex number.">
<button id="search-button">Search</button>
<div id="creature-stats">
<div id="creature-name"></div>
<div id="creature-id"></div>
<div id="weight"></div>
<div id="height"></div>
<div id="types"></div>
<div id="hp"></div>
<div id="attack"></div>
<div id="defense"></div>
<div id="special-attack"></div>
<div id="special-name"></div>
<div id="special-description"></div>
<div id="special-defense"></div>
<div id="speed"></div>
</div>
<script src="Jc_Pokedex_script.js"></script>
</body>
</html>
/* file: styles.css */
body {
background: hsl(0, 0%, 80%);
}
/* file: script.js */
let searchInput = document.getElementById("search-input");
let searchBtn = document.getElementById("search-button");
let creatureName = document.getElementById("creature-name");
let creatureId = document.getElementById("creature-id");
let creatureWeight = document.getElementById("weight");
let creatureHeight = document.getElementById("height");
let creatureType = document.getElementById("types");
let creatureHealth = document.getElementById("hp");
let attackStat = document.getElementById("attack");
let defenseStat = document.getElementById("defense");
let specialAttackName = document.getElementById("special-name");
let specialAttackStat = document.getElementById("special-attack");
let specialDescription = document.getElementById("special-description");
let specialDefenseStat = document.getElementById("special-defense");
let speedStat = document.getElementById("speed");
const fetchData = async () => {
try {
const creatureNameOrId = searchInput.value.toLowerCase();
const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${creatureNameOrId}`);
const data = await res.json();
setCreatureInfo(data);
} catch (error) {
alert("Creature not found.");
conslole.log(error);
}
};
const setCreatureInfo = data => {
const { name, id, weight, height, special, stats, types } = data;
creatureName.textContent = `${name[0].toUpperCase() + name.slice(1)}`;
creatureId.textContent = `#${id}`;
creatureWeight.textContent = `Weight: ${weight} lbs.`;
creatureHeight.textContent = `Height: ${height} ft.`;
creatureHealth.textContent = `HP: ${stats[0].base_stat}`;
attackStat.textContent = `Attack: ${stats[1].base_stat}`;
defenseStat.textContent = `Defense ${stats[2].base_stat}`;
specialAttackName.textContent = `${special.name}`;
specialAttackStat.textContent = `Special Attack: ${stats[3].base_stat}`;
specialDescription.textContent = `${special.description}`;
specialDefenseStat.textContent = `Special Defense: ${stats[4].base_stat}`;
speedStat.textContent = `Speed: ${stats[5].base_stat}`;
creatureType.innerHTML = types.map(obj =>
`<span>${obj.type.name[0].toUpperCase() + obj.type.name.slice(1)}</span>`
).join(" ");
};
searchBtn.addEventListener("click", e => {
e.preventDefault();
fetchData();
});
searchInput.addEventListener("keypress", e => {
if (e.key === "Enter") {
e.preventDefault();
fetchData();
};
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:148.0) Gecko/20100101 Firefox/148.0
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App