Menu
API Noob here, I'm having a really hard time figuring out API's and google tutorials are leaving me think they are way more advanced then I figure they should be. Here is what I'm trying to do:
Create a simple webpage that allows me to search the information located at this pokemon API: https://pokeapi.co/
Can anyone help me figure out how to write a function to make it work?
<!DOCTYPE html>
<html>
<body>
<h1>PokeMon Search API</h1>
<script>//javascript function here?</script>
<input id="text" type="text" value="" style="Width:20%"/>
<button>Find PokeMon By Name</button>
<p>Results</p>
<div v-html="link.FUNCTIONVARIABLE"></div>
</body>
</html>Thanks for any help!
277
you'll need some Javascript here. Something like this should work:
<script type="text/javascript">
var apiUrl = 'https://pokeapi.co/api/v2/pokemon/ditto/';
fetch(apiUrl).then(response => {
return response.json();
}).then(data => {
// Work with JSON data here
console.log(data);
}).catch(err => {
// Do something for an error here
});
</script>
this code is using the fetch function ( more info here ) to make a GET request to the url contained in the apiUrl variable . You may want to use an HTML input tag to make the Pokemon name dynamic.
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
