Tell us what’s happening:
Hello:) could someone please give me a hint as to what I’m doing wrong?I’m failing tests 14-21 and getting several errors, but when I try manually everything works as it is supposed to…
The errors I’m getting are:
SyntaxError: Unexpected identifier ‘fetch’. Expected ‘;’ after variable declaration.
SyntaxError: Unexpected keyword ‘new’
[Report Only] Refused to execute a script because its hash, its nonce, or ‘unsafe-inline’ does not appear in the script-src directive of the Content Security
[Report Only] Refused to load https://www.freecodecamp.org/html.worker-c89a6fc8bfef83c467ee5478f74c1074.js because it does not appear in the worker-src directive of the Content Security Policy.
If someone could give me a hint or explain what those errors mean and how to fix them or give me test code I can run manually to figure it out, that would be greatly appreciated:)
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">
<link rel="stylesheet" href="styles.css">
<title>RPG Creature Search</title>
</head>
<body>
<h1 class="header">Search Creature Here</h2>
<container class="search-container">
<input id="search-input" class="search" required></input>
<button id="search-button" class="button">Search</button>
</container>
<br>
<p id="test"></p>
<br>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Info</th>
</tr>
<tr>
<td>Name:</td>
<td id="creature-name"></td>
</tr>
<tr>
<td>ID:</td>
<td id="creature-id"></td>
</tr>
<tr>
<td>Weight:</td>
<td id="weight"></td>
</tr>
<tr>
<td>Height:</td>
<td id="height"></td>
</tr>
<tr>
<td>Types:</td>
<td id="types"></td>
</tr>
</tbody>
</table>
<table id="base-stat-table">
<tbody>
<tr>
<th>Base</th>
<th>Stats</th>
<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>Special Attack:</td>
<td id="special-attack"></td>
</tr>
<tr>
<td>Special Defense:</td>
<td id="special-defense"></td>
</tr>
<tr>
<td>Speed:</td>
<td id="speed"></td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const input = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const creatureNameEl = document.getElementById("creature-name");
const creatureIdEl = document.getElementById("creature-id");
const weightEl = document.getElementById("weight");
const heightEl = document.getElementById("height");
const typesEl = document.getElementById("types");
const baseStatTable = document.getElementById("base-stat-table");
const test = document.getElementById("test");
const creatureUrl = "https://rpg-creature-api.freecodecamp.rocks/api/creature/";
const allCreaturesUrl = "https://rpg-creature-api.freecodecamp.rocks/api/creatures"
let creatureDataArr = [];
let allCreaturesArr = [];
const fetchCreatureData = (creature) => {
fetch(creatureUrl+creature)
.then((res) => res.json())
.then((data) => {
creatureDataArr = data;
displayStats(creatureDataArr)
})
.catch((err) => console.error(`There was an error: ${err}`));
};
const displayStats = (creatureData) => {
console.log("creatureData: ",creatureData);
const {name, id, weight, height, types, stats} = creatureData;
console.log(stats);
console.log(types);
stats.map((item) => {
const{base_stat, name} = item;
document.getElementById(name).innerText = base_stat
})
creatureNameEl.textContent = name.toUpperCase();
creatureIdEl.textContent = id;
weightEl.textContent = weight;
heightEl.textContent = height;
types.forEach(({name}) => {
typesEl.innerHTML += `<div id="type">${name.toUpperCase()}</div>`
console.log(name);
})
};
const clearStats = () => {
creatureNameEl.textContent = "";
creatureIdEl.textContent = "";
weightEl.textContent = "";
heightEl.textContent = "";
typesEl.textContent = "";
document.getElementById("hp").textContent = "";
document.getElementById("attack").textContent = "";
document.getElementById("defense").textContent = "";
document.getElementById("special-attack").textContent = "";
document.getElementById("special-defense").textContent = "";
document.getElementById("speed").textContent = "";
};
const fetchAllCreatureData = (input) => {
fetch(allCreaturesUrl)
.then((res) => res.json())
.then((data) => {
allCreaturesArr = data;
checkCreatures(allCreaturesArr, input)
})
.catch((err)=> {
console.error(`There was an error: ${err}`);
//alert("Creature not found");
});
return allCreaturesArr;
};
const checkCreatures = (allCreaturesData, input) => {
const idExists = allCreaturesData.some((obj) => JSON.stringify(obj.id) === input);
const nameExists = allCreaturesData.some((obj) => obj.name === input);
const creatureId = allCreaturesData.find((obj) => JSON.stringify(obj.id) === input);
const creatureName = allCreaturesData.find((obj) => obj.name === input);
if(idExists || nameExists){
if(creatureId){
fetchCreatureData(creatureId.id)
}
else if(creatureName){
fetchCreatureData(creatureName.name)
}
else{
console.log(input, allCreaturesArr)
}
}
else{
alert("Creature not found");
}
};
searchBtn.addEventListener("click", (event) => {
event.preventDefault()
clearStats();
fetchAllCreatureData(input.value);
});
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Safari/605.1.15
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App