Hello. I’m about to complete the JS algorithms and data structures certifications, except I’m stuck on stories 17 and 20.
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="./styles.css"/>
<body>
<h1>Pokémon Search App</h1>
<input id="search-input" placeholder="search by Pokémon name or id" required></input>
<button id="search-button">Search!</button>
<p id="img-container"></p>
<div>Name:</div><div class="stat-container" id="pokemon-name"></div>
<div>Pokémon ID:</div><div class="stat-container" id="pokemon-id"></div>
<div>Weight:</div><div class="stat-container" id="weight"></div>
<div>Height:</div><div class="stat-container" id="height"></div>
<div>Types:</div><div class="stat-container" id="types"></div>
<div>Health:</div><div class="stat-container" id="hp"></div>
<div>Attack dmg:</div><div class="stat-container" id="attack"></div>
<div>Defense:</div><div class="stat-container" id="defense"></div>
<div>Special attck:</div><div class="stat-container" id="special-attack"></div>
<div>Special def:</div><div class="stat-container" id="special-defense"></div>
<div>Speed:</div><div class="stat-container" id="speed"></div>
</body>
<script src="./script.js"></script>
</html>
const searchBar = document.getElementById('search-input')
const searchBtn = document.getElementById('search-button')
const imgContainer = document.getElementById('img-container')
const pokeName = document.getElementById('pokemon-name')
const id = document.getElementById('pokemon-id')
const weight = document.getElementById('weight')
const height = document.getElementById('height')
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 types = document.getElementById('types')
let pokeData
searchBtn.addEventListener('click', () => {
if (searchBar.value) {
fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchBar.value.toLowerCase()}`)
.then(res => res.json())
.then(data => {
pokeData = data
//console.log(pokeData)
imgContainer.innerHTML = ''
imgContainer.innerHTML += `<img id="sprite" src="${pokeData.sprites.front_default}">`
pokeName.innerText = pokeData.name
id.innerText = `#${pokeData.id}`
weight.innerText = pokeData.weight
height.innerText = pokeData.height
types.innerHTML = JSON.stringify(pokeData.types)
console.log(types.innerText)
hp.innerText = pokeData.stats[0].base_stat
attack.innerText = pokeData.stats[1].base_stat
defense.innerText = pokeData.stats[2].base_stat
specialAttack.innerText = pokeData.stats[3].base_stat
specialDefense.innerText = pokeData.stats[4].base_stat
speed.innerText = pokeData.stats[5].base_stat
})
.catch(err => {
console.error(`Whoops! There was a ${err}`)
alert('Pokémon not found')
})
searchBar.value = ''
} else {
alert('Please input a value')
}
})
The type data is decompiled, but treated as a string thanks to JSON.stringify()
I have no idea how to properly recover it as an array, please, help