Making the most of your sphere with JavaScript: Building a mini encyclopedia with jQuery and API calls.

Tech is aimed at solving problems… as well as taking existing solutions and perfecting them (or at least trying to perfect them, nothing’s perfect folks). It’s for this reason that we examine every niche of life with the objective of identifying a problem and solving it. It’s for this reason that today; we’re going to build a mini encyclopedia (Yeah a “mini” one, the main stuff bores people to death. We want information… but not too much).

So like it is with every “building”, let’s make a list of what we actually want from our encyclopedia:

1. We want our encyclopedia to be a lightweight search engine, where virtually anything can be looked up and information pertaining to the related subject gotten in a matter of seconds.
2. We don’t want to be choked to death with information so whatever it is we’re looking up, we just want short summaries as descriptions and not fine print.
3. We may want to be educated but not have any particular stuff in mind. For this reason, we want a button that when clicked, takes us to something new. For every time it’s clicked, a random topic has to show up.
4. Interestingly, some of us want to be choked with information (yes I know, they exist). We want people like them to have access to this extra information. For this, we’re going to have external links for each of the ten entries that pop up as search results.

Now we know what we want, let’s get to building!

Creating a search bar

For our search bar, we want something dynamic, something we can pour out our heart to and it gives us what we want. The following demo will show us how to create just that:

Adding a URL that fetches random content.

For our random content link, we’re going to make use of Wikipedia’s random URL . It’s a special feature that when enabled, gets random articles each time a request is made. To get this going:

Getting our “data” and filtering out the “garbage”

At this point it’s apparent our search engine has to return data. To accomplish this, we’ll have to use Wikipedia’s search API. To filter out stuff, we’ll have to add our own parameter to it’s URL to tell it how much to fetch and how much to leave out:

To get the full functionality, we’ll enclose myURL in a getJSON function:

Now we may type all the functions we want and fetch all the data we want but if we don’t find a way to make it interact with our DOM, it’s just going to be another truckload of garbage. For this reason, we’re going to find a way to append that data to our DOM:

Now that everything is complete, we can now…. OH MY DAYS!! We forgot to add all this juicy functionality to our search bar. Well at this stage you’ve got to admit that’s pretty easy, all we have to do is create one last function, assign it to a variable and embed in it all we’ve done so far:

And then solving the final piece of the puzzle with jQuery’s (you see why jQuery came first in the topic and not that API thingy?) submit() method:

There! For your projects, articles, look up challenges, journals, whenever you’re bored in traffic, spelling bees… look no further, get this amazing encyclopedia only for $3.99! (God I’d make a perfect salesman). You could check out the full project on my CodePen, tweaking and maiming are sooo allowed. Cheers!

If you enjoyed this itsy-bitsy beginner article, be sure to hit that green 💚 below so others can see it too. Thanks!