i'm learning Api my nearly first thing. There is a search button that stop working at mobile. Can't find a reason/ could u have a look?
https://codepen.io/DeanWinchester88/pen/ExvxdxX
function showPokemonSearchResult(){
let enteredPokemonName = document.getElementById("pokemonNameByUser").value;
targetPokemon = `https://pokeapi.co/api/v2/pokemon/${enteredPokemonName}`
console.log("target pokemon",targetPokemon)
fetch(targetPokemon)
.then(res => {
if(res){
console.log("Success");
// console.log("res.json",res.json());
return res.json()
}else {
console.log("Failure");
}
})
.then(data =>{
let gotDivForPokemonSearchResult = document.getElementById("divForPokemonSearchResult");
gotDivForPokemonSearchResult.innerHTML = `
<h2> ${data.name}</h2><br>
<img src=${data.sprites["front_default"]}></img>
<img src=${data.sprites["back_default"]}></img>
<p class="text2">Weight: ${data.weight}</p>
<p class="text2">Heigth: ${data.height}</p>
<p class="text2">Base experience: ${data["base_experience"]}</p>
`
console.log(data.id)
})
}
As I can see, pokeapi.co/api/v2/pokemon/ is case sensitive and from mobile the keyboard usually puts the first letter uppercase.
For example, if your mobile keyboard corrects venusaur with Venusaur the search will fail.
You might consider adding a .toLowerCase() when you read the input to avoid this issue at all.
let enteredPokemonName = document.getElementById("pokemonNameByUser").value.toLowerCase();