- Let's use that snippet to try and implement a couple of APIs from Mashable.
- Get yourself an API key by following these instructions: url
Yoda Speak API
- We'll start off by using the Yoda Speak API. I'm basing this tutorial off of a fiddle I found online
- Here, we create the HTML for the code.
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h1>Go ahead, try it out!</h1>
<input id="yoda_input" type="text"><button type="button" class="text_process btn btn-default btn-sm">Yoda Translate</button><br>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2>Output: <span id="output"></span></h2>
</div>
</div>
- Next, we're going to add the functionality. We'll use a click function.
$(".text_process").click(function(){
});
- Now, we're going to use ajax in order to query the url from the API. We'll also be sending the sentence that we want translated as part of the url parameters and then insert the returned Yoda Speak version of the sentence into an HTML element.
The AJAX request for our API is going to take several properties and values:
- url: this will be where we put the url of the API we're requesting.
- data: these are additional parameters we can send with the request. Note that each API will take different parameters, so read the documentation carefully. In this case, the sentence will be the string that will be appended to the url and then evaluated by the API.
- success: what to do if the AJAX request is successful. In our case, we're going to print out the data from the API response (hopefully, the Yoda translated string).
- error: what to do if the AJAX request runs into an error.
- beforeSend: Runs before the rest of the request runs. If beforeSend returns false, the rest of the request doesn't go through. In our case, we're going to be sending the API key to make sure we are authenticated.
$(".text_process").click(function(){
$.ajax({
url: 'https://yoda.p.mashape.com/yoda?sentence=', // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile
type: 'GET', // The HTTP Method
data: {sentence: $("#yoda_input").val()}, // Additional parameters here
datatype: 'json',
success: function (data) {
$("#output").html(data);
},
error: function (err) {
alert(err);
},
beforeSend: function (xhr) {
xhr.setRequestHeader("X-Mashape-Authorization", "API KEY"); // Enter here your Mashape key
}
});
});