ckportfolio.com - Mashup: Wordnik Dictionary

Mashup: Wordnik Dictionary

Important note

Wordnik Dictionary

This exercise is quite similar to the previous Google Maps exercise, as it require the same core HTML elements and variable initiation / verification. To bring yourself up to speed, populate the HTML and JavaScript panes with the following code:

HTML:
<input type="text" id="search" placeholder="Search by keyword" />
<button id="parse">Process</button>
<div id="results">-Definitions go here-</div>
JavaScript:
$("#parse").click(process);

function process(){
    var keyword = $("#search").val();

    if (keyword == "") {
        alert("Your input is empty.");
    } else {
        // In case of keyword not being empty
    }
}

Wordnik offers a slightly more complicated API URL, which you can see below:

http://api.wordnik.com:80/v4/word.json/test/definitions?limit=200&includeRelated=true&useCanonical=false&includeTags=false&api_key=112702022cfd4946838050e9ff3066f253faeb8bc7be6d90e

  • "test": dictionary keyword
  • limit: number of definitions parsed
  • includeRelated: whether to return related words with definitions
  • useCanonical: whether to try to return the correct word root ('cats' -> 'cat')
  • includeTags: whether to return a series of related tag words
  • api_key: long string that allows Wordnik to monitor our resource usage -- use as provided

We can now proceed with building the new URL based on the given username. Replace the comment "// In case of keyword not being empty" with the following lines of code:

var baseurl = "http://api.wordnik.com:80/v4/word.json/"+keyword+"/definitions";
var limit = "limit=200";
var includeRelated = "includeRelated=true";
var useCanonical = "useCanonical=false";
var includeTags = "includeTags=false";
var api_key = "api_key=112702022cfd4946838050e9ff3066f253faeb8bc7be6d90e";
var url = baseurl+"?"+limit+"&"+includeRelated+"&"+useCanonical+"&"+includeTags+"&"+api_key;

Note that only the "keyword" component of the API URL is being swapped out every time the user interacts with the button.

As this is a more elaborate type of API, we need more than an image element to display information generated via this URL. First, we need to "download" the result of each URL generated, using a function called getJSON:

$.getJSON(url, function(data) {
    alert("Download success!");
    console.log(data);
});

If you see a message pop up that reads "Download success," it means that jQuery was able to take your newly generated URL and retrieve the data from Wordnik with no issues. This data needs to be analyzed and parsed in order to be displayed on the screen, and that is where Developer Tools comes in handy:

"Developer Tools" refers to a set of functionality offered by today's web browsers to facilitate development process. This can be accessed by right click (or control + click) anywhere within the screen and clicking on "Inspect Element." For those who are using other browsers, refer to http://cms.about.com/od/cms-basics/a/Get-The-Inspect-Element-Tool-For-Your-Browser.htm to see how you can access the same tools.

Upon opening this window on Chrome and travelling to "Console" tab, you will notice that the console displays an array of "Objects" that you can expand and collapse. This is the product of "console.log" command that we placed below the pop-up window. We can see that each object contains a series of information that we can extract and place into the page, and this is where "loops" come in handy. Below "console.log," place the following code:

$("#results").html("");
$.each(data, function(i,o){
    var definition = o.text;
    $("#results").append("<li>"+definition+"</li>");
});

Upon confirming that data has been retrieved successfully, the code will effectively empty the "results" div and proceed with parsing through this array of five objects. As the code parses, it will "push" into the "results" a new div element containing a text content and the created date of each tweet.

At this point, the code should be able to contact Wordnik each time the button has clicked -- and display a series of associated definitions in the page.

Screencast Recording

https://drive.google.com/open?id=1fSq2UqrIRAmCMxGWyn5MNjUzzbWgWr0v

Fin