My Chuck Norris Quote Machine (project 2)

While the first Free Code Camp project was a bit open-ended, the second seemed much more straight forward – implement a random quote generator.  There were two user stories:

  1. Show a new random quote when you click a button.
  2. Using another button, tweet out the quote.

Button clicking was nothing new, so not much to learn there.  There had been some discussion of random number generation in the earlier exercises, so that wasn’t really a mystery.  But clicking a button to send a Tweet?  That was definitely new.

Of course, there was at least one other new thing – coming up with a list of quotes.  While thinking about where to find my quotes, I wondered if there were any quote repositories with APIs I could call to request a random quote.  That would be even more “new” than creating a data structure of strings and randomly selecting between them (which is what I assumed the assignment was hoping for.)

Turning to Google, I ran across an interesting site: icndb.com – the Internet Chuck Norris Database.  It provides access to a database of Chuck Norris jokes via a simple API, and  seemed as good as anything.  I figured if I made it seem like these were things someone said, they were every bit as quote-worthy as other quotes.  I had the idea of making Chuck himself the one being quoted, given the propensity for famous people to speak about themselves in the third person.  And thus was born the Chuck Norris 3rd Person Quote Machine.

I found a small picture of Mr. Norris, modified it with my favorite free, easy-to-use image editor, paint.net,  placed it in a <span> tag, and placed another couple of <span> tags next to it to contain the quote and some formatting.

One of the biggest, and certainly the most surprisingly difficult, challenges was getting the quote to be vertically centered in the span.  When the vertical-align CSS property didn’t do what I expected, I started looking for help.  I found this post on 6 Methods for Vertical Centering with CSS, which immediately described vertical-align not working.  The article was very helpful, and led to the eventual solution, which was to treat the <span> like a table cell, using the table-cell display mode:

#quote-text {
   ...
   display: table-cell;
   vertical-align: middle;
 }

Once the display was changed to table-cell, the vertical-align property worked as expected.

Requesting a quote required some JavaScript, and I used JQuery to connect to the On Click event of the <div> I used for the button:

$("#request-quote-button").on('click', function () {
    $.get("http://api.icndb.com/jokes/random?exclude=[explicit]", function(data) {
    $("#quote-text").html(data.value.joke);
  });
});

The “get” function performs an HTTP GET request, and the call returns a JSON object.  I simply navigated the object to pull out the joke text, and assigned it to the html property of the quote-text element.

I used .html() instead of .text() as the strings are URI encoded, and calling .html() seems to process the URI encoded strings correctly, whereas calling .text() leaves you with text like this:

If you ask Chuck Norris what time it is, he always answers &quot;Two seconds till&quot;. After you ask &quot;Two seconds to what?&quot;, he roundhouse kicks you in the face.

Once all that was in place, I needed to figure out how to tweet the quote.  There seemed to be way too many ways to accomplish this, but I found this example the easiest to get working.

Overall, I spent about 2 hours working on this project, which is significantly less than I spent on the portfolio project.  It was nice seeing things come together – the JQuery quote API call; the centering CSS solution; and the workable Twitter integration.  It certainly isn’t a complex site, but being able to whip up the functionality in a quarter of a day, and having implementation ideas become functional in a matter of minutes was a real confidence booster.

Next up, the four function calculator page!

Advertisements

One thought on “My Chuck Norris Quote Machine (project 2)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s