jQuery Random Quotes Generator

1. Introduction

jquery-random-quotes-generator is a jQuery random quotes generator. The plugin generates famous quotes from Quota API (database of 1500+ quotes) randomly.

2. Plugin Overview

Demo

3. How to install and use jquery-random-quotes-generator jQuery plugin

Follow the below steps to install jquery-random-quotes-generator jQuery plugin on your website.

1. Include jQuery library and jquery-random-quotes-generator asset files (JS and CSS):

<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- CSS for Random Quote -->
<link rel="stylesheet" href="index.css">

<!-- Random Quote Generator Javascript -->
<script src="index.js"></script>

additionally add font awesome icons and choosed Google Fonts for better look:

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<!-- Google Fonts for Random Quote (Optional) -->
<link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet">

2. Create paragraph element with quote_text id:

<p id="quote_text"></p>

3. In case you want to let users generate new quote on button click event add the following HTML structure:

 <div id="quote_section">
    <p id="quote_text"></p> 
    <p id="quote_author">Loading...<i class="fas fa-pencil-alt"></i></p>
  </div>
  <div id="new_share_b">
    <button id="new_quote">New Quote</button> 
    <div>
      <a href="https://twitter.com/intent/tweet/?text=" target="_blank" id="twitter">
        <i class="fab fa-twitter fa-3x"></i>
      </a>
    </div>
  </div>

4. Conclusion

In this article, we presented jquery-random-quotes-generator jQuery plugin. Random quotes can be a nice addition to blogs and other websites. They always grab user attention. This plugin allows you to implement and integrate with your website random quotes generator easily.