Tell us what’s happening:
I have been stuck on getting the base stat data of the creatures to display the correct data. i’ve destructured the stats array and tried getting the value of each key of the base_stat it displays only the last value of the keys in the base_stat , i don’t quiet understand how to tackle this. Is it indexing issue or is there something i’m doing wrong cause i’m confuse rn
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RPG Creature Search App</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header>
<h1 class="title">RPG Creature Search App</h1>
</header>
<main>
<div class="container">
<label for="search-input">Enter Creature Name or ID:</label>
<input id="search-input" class="search-input" required />
<button id="search-button" class="search-btn" type="button">Search</button>
<div class="result-container">
<div id="creature-name"></div>
<div id="creature-id"></div>
</div>
<div class="more-info">
<div id="weight"></div>
<div id="height"></div>
</div>
<div id="types"></div>
<div class="table-wrapper">
<table id="base-stats">
<tr>
<th>Base</th>
<th>Stats</th>
</tr>
<tr>
<td>Hp:</td>
<td id="hp">-</td>
</tr>
<tr>
<td>Attack:</td>
<td id="attack">-</td>
</tr>
<tr>
<td>Defense:</td>
<td id="defense">-</td>
</tr>
<tr>
<td>Sp. Attack:</td>
<td id="special-attack">-</td>
</tr>
<tr>
<td>Sp. Defense</td>
<td id="special-defense">-</td>
</tr>
<tr>
<td>Speed:</td>
<td id="speed">-</td>
</tr>
</table>
</div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
/* file: script.js */
const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const creatureName = document.getElementById("creature-name");
const creatureId = document.getElementById("creature-id");
const creatureWeight = document.getElementById("weight");
const creatureHeight = document.getElementById("height");
const types = document.getElementById("types");
const creatureHp = document.getElementById("hp");
const creatureAttack = document.getElementById("attack");
const creatureDefense = document.getElementById("defense");
const spAttack = document.getElementById("special-attack");
const spDefense = document.getElementById("special-defense");
const creatureSpeed = document.getElementById("speed");
const tableContent = document.getElementById("base-stats");
let creatureDataArr = [];
fetch("https://rpg-creature-api.freecodecamp.rocks/api/creatures")
.then((res) => res.json())
.then((data) => {
creatureDataArr = data;
})
.catch((err) => console.error("There was an error while fetching data!", err));
searchBtn.addEventListener("click", () => {
const input = searchInput.value.toLowerCase();
const match = creatureDataArr.find((creature) => creature.name.toLowerCase() === input);
if (!input) {
alert("Please enter a creature name or id");
return;
}
if (!match) {
alert("Creature not found");
searchInput.value = "";
} else {
fetchCreatureData(match.name);
searchInput.value = "";
}
});
let anotherDataArr = [];
const fetchCreatureData = (nameOrId) => {
const creatureData = `https://rpg-creature-api.freecodecamp.rocks/api/creature/${nameOrId}`
fetch(creatureData)
.then((res) => res.json())
.then((data) => {
anotherDataArr = data;
displayResult(anotherDataArr);
})
.catch((error) => console.error("There was an error while fetching data!", error));
}
const displayResult = (arr) => {
const {
id,
name,
weight,
height,
special,
stats,
types
} = arr;
creatureName.innerHTML = `${name}`;
creatureId.innerHTML = `#${id}`;
creatureWeight.innerHTML = `Weight: ${weight}`;
creatureHeight.innerHTML = `Height: ${height}`;
stats.map(({ base_stat }) => {
creatureHp.innerHTML = `${base_stat}`;
creatureAttack.innerHTML = `${base_stat}`;
creatureDefense.innerHTML = `${base_stat}`;
spAttack.innerHTML = `${base_stat}`;
spDefense.innerHTML = `${base_stat}`;
creatureSpeed.innerHTML = `${base_stat}`;
})
}
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App