Tell us what’s happening:
Hello! It seems like my code doesn’t pass the 14-21 tests. I’ve checked each one of them and I can not really understand why the code doesn’t pass them although the outputs are correct.
I would appreciate if someone could point out where exactly I’m making a mistake. Thank you!
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>My RPG Creature Search</title>
</head>
<body>
<h2>RPG Creature Search App</h2>
<main>
<label for="search-input" class="search-label">Search for Creature name or ID: </label>
<input type="text" id="search-input" required>
<button id="search-button">Search</button>
<div class="results">
<div class="section1">
<div class="section1.1">
<p id="creature-name"></p>
<p id="creature-id"></p>
</div>
<div class="section1.2">
<p>Weight: <span id="weight"></span></p>
<p>Height: <span id="height"></span></p>
</div>
<div id="types"></div>
</div>
<div class="section2" >
<h3 id="special-name"></h3>
<p id="special-description"></p>
</div>
</div>
<table>
<thead>
<tr>
<th>Base</th>
<th>Stats</th>
</tr>
</thead>
<tbody>
<tr>
<th>HP</th>
<td id="hp"></td>
</tr>
<tr>
<th>Attack</th>
<td id="attack"></td>
</tr>
<tr>
<th>Defense</th>
<td id="defense"></td>
</tr>
<tr>
<th>Sp. Attack</th>
<td id="special-attack"></td>
</tr>
<tr>
<th>Sp. Defense</th>
<td id="special-defense"></td>
</tr>
<tr>
<th>Speed</th>
<td id="speed"></td>
</tr>
</tbody>
</table>
</main>
<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
/* file: script.js */
const searchInput = document.getElementById('search-input')
const searchButton = document.getElementById('search-button')
const creatureName = document.getElementById('creature-name')
const creatureId = document.getElementById('creature-id')
const weightElement = document.getElementById('weight')
const heightElement = document.getElementById('height')
const typesElement = document.getElementById('types')
const specialNameElement = document.getElementById('special-name')
const specialDescription = document.getElementById('special-description')
const hpElement = document.getElementById('hp')
const attackElement = document.getElementById('attack')
const defenseElement = document.getElementById('defense')
const specialAttackElement = document.getElementById('special-attack')
const specialDefenseElement = document.getElementById('special-defense')
const speedElement = document.getElementById('speed')
const forumCreaturesUrl = "https://rpg-creature-api.freecodecamp.rocks/api/creatures"
const forumDetailsUrl = "https://rpg-creature-api.freecodecamp.rocks/api/creature"
// let creaturesArray = []
const fetchData = async () => {
try{
const result = await fetch(forumCreaturesUrl)
const data = await result.json()
console.log(data)
// creaturesArray = data
return data
} catch(error){
console.error("Problem with fetching data: ", error)
}
}
// fetchData()
const fetchDetails = async (id) => {
try{
console.log('entered in fetchDetails')
const result = await fetch(`${forumDetailsUrl}/${id}`)
const details = await result.json()
console.log(details)
displayDetails(details)
} catch(error){
console.error("Problem with fetching details: ", error)
}
}
// fetchDetails(2)
const checkInput = async (input = searchInput.value) => {
const creaturesArray = await fetchData()
const isCreature = creaturesArray.find(({id, name}) => input == id || input.toLowerCase() === name.toLowerCase())
if(isCreature){
await fetchDetails(input)
} else {
alert("Creature not found")
return;
}
}
const displayDetails = (details) => {
console.log("entered in displayDetails")
const {id, name, height, weight, special, types, stats} = details
const {[name]: specialName, description} = special
const realStats = {}
stats.forEach((stat) => {
realStats[stat.name] = stat['base_stat']
})
const {hp, attack, defense,
["special-attack"]: specialAttack,
["special-defense"]:specialDefense,
speed} = realStats
clearTextContents()
creatureName.textContent = name
creatureId.textContent = `#${id}`
weightElement.textContent = weight
heightElement.textContent = height
types.forEach((type) =>{
typesElement.innerHTML += `
<p class="${type.name}">${type.name.toUpperCase()}</p>
`
})
specialNameElement.textContent = specialName
specialDescription.textContent = description
hpElement.textContent = hp
attackElement.textContent = attack
defenseElement.textContent = defense
specialAttackElement.textContent = specialAttack
specialDefenseElement.textContent = specialDefense
speedElement.textContent = speed
}
const clearTextContents = () => {
creatureName.textContent = ''
creatureId.textContent = ''
weight.textContent = ''
height.textContent = ''
types.textContent = ''
specialNameElement.textContent = ''
specialDescription.textContent = ''
hpElement.textContent = ''
attackElement.textContent = ''
defenseElement.textContent = ''
specialAttackElement.textContent = ''
specialDefenseElement.textContent = ''
speedElement.textContent = ''
}
searchButton.addEventListener('click', checkInput)
searchInput.addEventListener('keydown', (e) => {
if(e.key === 'Enter') checkInput()
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App