As a beginner in programming, I am seeking some assistance. I have been able to retrieve a random Pokémon from an API and gather its data, including the ID, name, and picture. My main focus now is to display the image of the Pokémon in the custom modal I have created. The issue I am facing is that I have the image URL but I am unsure how to showcase it.
Moreover, I am also looking for guidance on how to implement a feature where upon entering the Pokémon name in an input field, it can be verified and if correct, provide an alert or message indicating a correct guess. Thank you in advance for any help provided.
Here is the function in store.js that retrieves a single Pokémon from the API:
async getOnePokemon() {
try {
let id = Math.floor(Math.random() * 151) + 1;
let response = await axios.get(`${apiLink}/pokemon/${id}`)
if(response.data){
let pokemon = {
id: response.data.id,
name: response.data.name,
image: response.data.sprites.front_default
}
return pokemon
}
} catch (error) {
console.log(error)
}
}, This is the function that calls to retrieve the Pokémon from store.js:
async function GetPokemons() {
try {
let response = await PokemonStore.getOnePokemon();
pokemonId.value = response;
console.log(pokemonId.value)
} catch (error) {
throw error;
}
}Within the header component, I have a modal where I intend to display the Pokémon image using {{ pokemonId.image }}:
<el-dialog v-model="game" title="Who's that Pokémon?" width="35%" height="50%" center>
<div class="modalHeader">
{{ pokemonId.image }}
</div>
<div class="footer">
<div class="inputDiv">
<input class="pokeNameInput" type="text" placeholder="Search Pokémon" />
</div>
<span>
<el-button id="submitBtn" @click="LogInModalVisible = false">Submit</el-button>
<el-button id="skipBtn" @click="LogInModalVisible = false;">Skip
<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
<el-button id="pokedexGameBtn" @click="LogInModalVisible = false">Pokédex</el-button>
</span>
</div>
</el-dialog>