Random Quote Machine

Random Quote Machine has been developed as part of one of the freeCodeCamp’s intermediate front end development projects.

HTML5, CSS3 and jQuery (a JavaScript Library) have been used. Bootstrap front-end framework was incorporated to make the design responsive.

Following are some of the user stories that were fulfilled,

  • User should be able to view a random quote with a button click.
  • If the user likes the displayed quote, he/she should be able to tweet it out.
  • Any libraries or APIs can be used to achieve the result.
  • The page should be responsive.

I wanted this project to look simple but sophisticated. Since coding is magic and I am the Harry Potter here, I gave it my personal style! My initials can be seen on the top left corner serving as a brand name. Also, for certain elements on the page, the background color changes randomly with the quote.

Apart from the look and feel part of it, I came to appreciate the advantage of consuming APIs in our projects that are readily available over the web. For this particular project, I used Andrux, a free API from Mashape marketplace. Currently only two categories of quotes (“movies” and “famous”) are available and it gives the result as a random quote in JSON format. I thus familiarized myself in handling JSON data and converting it into JavaScript objects for further use in the code.

The complete code is available on CodePen as well if you like to take a peek.

I am a proud camper @FCC and you are most welcome to check out my FCC code portfolio.

Advertisements

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