Random Quote Machine

index.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<!--make button-->
<div class =  "container-fluid">
  <div class = "row text-center">
    <h2>Random Quote Generator</h2>
  </div>
 
  <div class = "col-md-12 well quote text-center">
      Click "New Quote"  for inspiring quotes
  </div>
 
  <div class =  "col-md-12 text-center">
     
<button id = "newQuote" class = "btn btn-primary"> 
        New Quote         
    </button> 
  </div>
  <br><br><br><br><br><br><br>
 
 <div class = "text-center"> 
   
     <span class = "fa-stack fa-2x">
      <a target = '_blank' id= "tweetedQuote" href = "https://twitter.com/intent/tweet?hashtags=quotes&text=">
      <i class = "fa fa-square fa-stack-2x"></i>
      <i class = "fa fa-twitter fa-stack-1x fa-inverse"></i></a>
    </span>
</div>
 

random-quote-machine.markdown

Random Quote Machine

A Pen by Tanya Couture on CodePen.

License.

script.js

$(document).ready(function(){
    
  $("#newQuote").on("click", function(){

      $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?", function(json){
    
      $(".quote").html(json.quoteText + "<br><em>" + "~" + json.quoteAuthor + "</em>"); 
      
      var twitterQuote = "https://twitter.com/intent/tweet?hashtags=quotes&text=" + encodeURIComponent(json.quoteText + "~" + json.quoteAuthor);

      $("#tweetedQuote").attr("href", twitterQuote);
         
    });
  });
}); 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&json=parseQuote&lang=en"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />