Random Quote generator

index.html

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="content">
<h1>Random Quote Machine</h1>
<div class="jumbotron">
  <blockquote id="qod-quote">
    <p id="qod-text">
      To change ones life, start immediately, do it flamboyantly, no exceptions.
    </p>
    <p id="qod-author">
      - William James
    </p>
  </blockquote>
</div>
<div class="btn-gen">
  <button class='btn btn-primary'>Generate Quote</button>
  <div id="tweetBtn">
 <a class="twitter-share-button" href="http://twitter.com/share" data-url="http://codepen.io/Dragonza/full/RWVYYj/" data-text="To change ones life, start immediately, do it flamboyantly, no exceptions. - William James" >Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
</div>
  
  

  </div>

Random Quote generator

Random Quote generator
----------------------


A [Pen](http://codepen.io/Dragonza/pen/RWVYYj) by [Alex ](http://codepen.io/Dragonza) on [CodePen](http://codepen.io/).

[License](http://codepen.io/Dragonza/pen/RWVYYj/license).

script.js

//reference : https://gist.github.com/odysseas/736202d8807a05a0cb9f
//http://jsfiddle.net/chris27/DQw5b/4/

$('.btn').click(function() {
  getQuote();
})

function getQuote() {
  var $quote = $('#qod-text');
  var $quote_author = $('#qod-author');
  $.ajax({
    type: "POST",
    url: "http://api.forismatic.com/api/1.0/",
    success: function(data) {
      $quote.text(data['quoteText']);
      $quote_author.text('-' + data['quoteAuthor']);
      createButton();
    },
    data: {
      method: "getQuote",
      format: "jsonp",
      lang: "en"
    },
    dataType: "jsonp",
    jsonp: "jsonp",

  });

}

function createButton() {
  var qod = $('#qod-quote').text();
  qod = qod.replace(" ", "");
  $('#tweetBtn iframe').remove();
  var tweetBtn = $('<a></a>')
    .addClass('twitter-share-button')
    .attr('href', 'http://twitter.com/share')
    .attr('data-url', 'http://codepen.io/Dragonza/full/RWVYYj/')
    .attr('data-text', qod);
  $('#tweetBtn').append(tweetBtn);
  twttr.widgets.load();
  /*$('a[data-text]').each(function() {
    $(this).attr('data-text', qod);
  });
  $('a[data-url]').attr('data-url', "");*/
  /*$.getScript('http://platform.twitter.com/widgets.js');*/

  /*
          // Remove Whatever is in the tweeetbox div if theres somethign 
          //there to avoid adding multiple tweetbuttons      
          var elem = document.getElementById('twitterbutton');
          if (elem != null) {
              elem.parentNode.removeChild(elem);
          }

          // Create a New Tweet Element
          msg  = $('#qod-text').val();
    
    console.log(msg);
          var link = document.createElement('a');
          link.setAttribute('href', 'https://twitter.com/share');
          link.setAttribute('class', 'twitter-share-button');
          link.setAttribute('style', 'margin-top:5px;');
          link.setAttribute('id', 'twitterbutton');
          link.setAttribute("data-text", "Test" + msg + "");
          
          link.setAttribute("data-size", "large");

         // Put it inside the twtbox div
          tweetdiv  =  document.getElementById('twitterbutton');
          tweetdiv.appendChild(link);
  */
  //twttr.widgets.load(); //very important
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//platform.twitter.com/widgets.js"></script>

style.css

html, body
{
    height:100%;
}
body {
  background: url('http://i790.photobucket.com/albums/yy190/zell_2004_2005/wallcoo_com_best_of_nature_12435718_zpstqzh0xgx.jpg') no-repeat;
  background-size: cover;
  font-family: "Open Sans", Arial, san-serifs
}
.content {
  padding-top:20%;
  margin:auto;
  width: 800px;
}
.btn-gen {
  text-align: center;
}
.btn.btn-primary {
  background: #2B95FD;
  border:none;
  border-radius:5px;
  padding:10px 30px
}
.btn-primary:active:focus,
.btn.btn-primary:focus,
.btn.btn-primary:active
{
  border:none;
  background: #2070BE;
  outline:none
}
h1 {
  text-align: center;
  color:green;
  
}
.jumbotron {
  
}
#tweetBtn {
  margin-top: 20px;
}
#qod-text, #qod-author {
    text-align: left;
    margin: auto;
}
#qod-text,
#qod-author{
  display: inline-block;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />