Random Quote Part II

11/30/2015 / 7 minutes to read / Tags: flexbox, javascript, jquery

In part II of this tutorial, we will get this random quote generator working with some jQuery. If you haven’t read part I, I would suggest doing so now as I won’t be covering any styling in this part of the tutorial.

So the html looks like this:

<div class="container">
  <h2>Random Quote Generator</h2>
  <a
    href="#"
    id="btn-quote"
    >Generate New Quote</a
  >
  <blockquote>
    <p id="quoteText"></p>
    <cite
      >&mdash; <span id="quoteAuthor"></span>
      <span id="btn-tweet">
        <i class="fa fa-twitter"></i>
      </span>
    </cite>
  </blockquote>
  <div class="load">
    <i class="fa fa-spinner fa-spin"></i>
  </div>
</div>
<footer>
  Powered by&nbsp; <a href="http://forismatic.com/en/">Forismatic</a>
</footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="main.js"></script>

Notice how we have added the script tags at the end of the body. Also notice that in order to use jQuery, we have to reference it in our HTML. So, we add the following to our HTML:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jq<uery/2.1.3/jquery.min.js"></script>

jQuery

It’s time to add some jQuery. I’ve created a file called main.js in the root directory, to make things easier, and added:

<script src="main.js"></script>

This tells the browser that we have an exterior JavaScript file it will need to look for.

Currently, if you followed along with the first tutorial, we have the following in our main.js file.

$(document).ready(function () {
  // Hide the loading icon
  $('.load').hide()
})

This hides the loading icon once the page is loaded. The $(‘.load’) finds the elements with the class of load and hides them with jQuery’s .hide() method. For the time being, lets remove the $(‘.load’).hide(); so that our file now looks like:

$(document).ready(function () {})

Now we want to hide the blockquote element and show the loading icon as the quote is loading. So we will add the following code.

$(document).ready(function () {
  $('blockquote').hide()
  $('.load').show()
})

Once again, when the page loads, the browser locates the blockquote element and hides it with the .hide() jQuery method. Then it finds the elements with the load class and makes it visible with the .show() method. Now the blockquote should be hidden and the loading icon should be displayed.

Get the quote

Let’s write the function that gets the quote from forismatic.

$(document).ready(function () {
  // Hide the empty blockquote and show the loading icon.
  $('blockquote').hide()
  $('.load').show()
})

// Get the quote
var getQuote = function () {}

Inside the getQuote() function we want to do the following:

• Hide the loading icon
• Show the blockquote element