Tell us what’s happening:
My app works just fine but doesn’t pass on site and stucks on last test
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" />
<title>RPG Creature Search App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>
RPG Creature Search App
</h1>
<div class="container">
<div class="search">
<label for="search-input">Search for Creature Name or ID:</label>
<input id="search-input" type="text" required/>
<button id="search-button">Search</button>
</div>
<div class="data-container">
<div class="details">
<div class="creature-detail">
<h2 id="creature-name"></h2>
<span id="creature-id"></span>
</div>
<div class="bmi">
<p id="weight"></p>
<p id="height"></p>
</div>
<div id="types">
</div>
</div>
<div id="special">
<h3 id="name"></h3>
<p id="description"></p>
</div>
</div>
<div class="creature-stats">
<div class="base">
<div>Base</div>
<div>HP:</div>
<div>Attack:</div>
<div>Defense</div>
<div>Sp. Attack:</div>
<div>Sp. Defense</div>
<div>Speed</div>
</div>
<div class="stats">
<div>Stats</div>
<div id="hp"></div>
<div id="attack"></div>
<div id="defense"></div>
<div id="special-attack"></div>
<div id="special-defense"></div>
<div id="speed"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
/* file: script.js */
const input = document.getElementById("search-input");
const btn = document.getElementById("search-button");
const creatureName = document.getElementById("creature-name");
const creatureId = document.getElementById("creature-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const types = document.getElementById("types");
const nameOfPower = document.getElementById("name");
const descriptionOfPower = document.getElementById("description");
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");
const creaturesAPI =
"https://rpg-creature-api.freecodecamp.rocks/api/creatures";
const creatureStat =
"https://rpg-creature-api.freecodecamp.rocks/api/creature/";
const fetchData = async () => {
try {
let data = await fetch(creaturesAPI);
let crtrs = await data.json();
match(crtrs);
} catch {
console.log(Error);
}
};
const fetchSecondData = async () => {
try {
let data2 = await fetch(`${creatureStat}${creatureName.textContent}`);
let crtsStats = await data2.json();
tbcMatch(crtsStats);
} catch {
console.log(Error);
}
};
const match = (data) => {
const value = input.value;
let arr1 = [];
let arr2 = [];
for (let i = 0; i < data.length; i++) {
const { id, name } = data[i];
arr1.push(name);
arr2.push(id);
}
const arr3 = arr1.map((el) => el.toUpperCase());
const arr4 = arr1.map((el) => el.toLowerCase());
if (
arr1.includes(value) ||
arr3.includes(value) ||
arr4.includes(value) ||
arr2.includes(Number(value))
) {
for (let i = 0; i < data.length; i++) {
if (
data[i].id === Number(value) ||
data[i].name === value ||
data[i].name.toUpperCase() === value ||
data[i].name.toLowerCase() === value
) {
creatureId.innerText = `${data[i].id}`;
creatureName.textContent = data[i].name.toUpperCase();
fetchSecondData();
}
}
} else {
alert("Creature not found");
}
};
const tbcMatch = (data) => {
types.innerHTML = "";
weight.innerText = `Weight: ${data.weight}`;
height.innerText = `Height: ${data.height}`;
const { name, description } = data.special;
nameOfPower.innerText = name;
descriptionOfPower.innerText = description;
const arr6 = data.types;
for (let i = 0; i < arr6.length; i++) {
const { name } = arr6[i];
types.innerHTML += `<div>${name.toUpperCase()}</div>`;
}
let arr7 = data.stats;
let arr8 = [];
for (let i = 0; i < arr7.length; i++) {
const { base_stat } = arr7[i];
arr8.push(base_stat);
}
hp.innerText = arr8[0];
attack.innerText = arr8[1];
defense.innerText = arr8[2];
specialAttack.innerText = arr8[3];
specialDefense.innerText = arr8[4];
speed.innerText = arr8[5];
};
btn.addEventListener("click", () => {
if (input.value === "") {
alert("Please Enter The Creature Name or ID");
} else {
fetchData();
}
});
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
if (input.value === "") {
alert("Please Enter The Creature Name or ID");
} else {
fetchData();
}
}
});
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #0a0a23
}
h1 {
text-align: center;
color: white;
padding: 20px;
margin-top: 20px
}
.container {
margin: 0 auto;
max-width: 400px;
background-color: #f5f6f7;
padding: 10px;
border-radius: 15px;
box-shadow: 5px 5px #dfdcdcbf
}
.search {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 5px
}
label {
padding: 10px;
}
input {
margin-right: 10px;
height: 30px;
}
button {
background-color: #7f21ab;
color: #f5f6f7;
padding: 10px;
border-radius: 15px;
border: none;
}
.data-container {
width: 370px;
height: 180px;
background-color: #f0f1f7;
margin: 10px auto;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.creature-detail {
display: flex;
flex-direction: row;
}
#creature-name {
font-size: 22px;
}
#creature-id {
margin-left: 15px;
font-size: 24px;
}
.bmi {
display: flex;
}
.bmi p {
padding: 3px
}
#types {
display: flex;
flex-direction: row;
}
#types div {
width: 90px;
height: 35px;
text-align: center;
border-radius: 5px;
padding: 10px;
margin-right: 25px;
background-color: #bfb6a9;
}
.creature-stats {
display: flex;
flex-wrap: nowrap;
gap: 5px
}
.base {
flex-basis: 75%;
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center
}
.base div {
background-color: #7f21ab;
height: 25px;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #f5f6f7;
font-size: 17px;
}
.base div:first-child {
font-size: 21px;
}
.stats {
flex-basis: 25%;
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center
}
.stats div {
background-color: #7f21ab;
height: 25px;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #f5f6f7;
font-size: 17px;
font-weight: normal
}
.stats div:first-child {
font-size: 21px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App
