/index.html

## index.html
<body>
  <button id="getQuote">Get a Quote
  </button>
  <h1 id="quote-content">
  </h1>
  <h2 id="quote-title">
  </h2>
  <button id="btnTweet">Tweet This</button>
</body>

## quotes.markdown

      
    Raw
  

              quotes.markdown
            
          
    Quotes

Pulls quotes from quotesbydesign API and posts to Twitter.
A Pen by Ashlynn Pai on CodePen.
License.

  
## script.js
var posts = [];

$(document).ready(function(){
  $('#btnTweet').hide();
  var url = 'https://cors-anywhere.herokuapp.com/https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=10';
  $.getJSON( url, function(data) {
    posts = data;
  });
  $('#getQuote').on('click', function() {
      post = posts.shift()
      $('#quote-title').html("--" + post.title);
      $('#quote-content').html(post.content);
      $('#btnTweet').show();
      posts.push(post);
    });
  $('#btnTweet').click(function (e) {
      tweet = post.content + " -- " + post.title;
      var twtLink = 'http://twitter.com/home?status=' +encodeURIComponent(tweet);
      window.open(twtLink,'_blank');
   });
});


## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

## style.css
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);

body {
   font-family: 'Dancing Script', Helvetica, Serif;
   text-align: center;
}
button {
    display:block; /* change this from inline-block */
    width:20%; /* setting the width */
    margin:0 auto; /* this will center  it */
    position:relative;
    text-align:center;
    font-size: 24px;
    color: #275cb2;
    border-radius: 5px;
    background: #FFF8DC;
    padding: 5px;
}
#getQuote {
    margin-top: 50px;
}
	<body>
	<button id="getQuote">Get a Quote
	</button>
	<h1 id="quote-content">
	</h1>
	<h2 id="quote-title">
	</h2>
	<button id="btnTweet">Tweet This</button>
	</body>
	var posts = [];

	$(document).ready(function(){
	$('#btnTweet').hide();
	var url = 'https://cors-anywhere.herokuapp.com/https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=10';
	$.getJSON( url, function(data) {
	posts = data;
	});
	$('#getQuote').on('click', function() {
	post = posts.shift()
	$('#quote-title').html("--" + post.title);
	$('#quote-content').html(post.content);
	$('#btnTweet').show();
	posts.push(post);
	});
	$('#btnTweet').click(function (e) {
	tweet = post.content + " -- " + post.title;
	var twtLink = 'http://twitter.com/home?status=' +encodeURIComponent(tweet);
	window.open(twtLink,'_blank');
	});
	});
	@import url(https://fonts.googleapis.com/css?family=Dancing+Script);

	body {
	font-family: 'Dancing Script', Helvetica, Serif;
	text-align: center;
	}
	button {
	display:block; /* change this from inline-block */
	width:20%; /* setting the width */
	margin:0 auto; /* this will center it */
	position:relative;
	text-align:center;
	font-size: 24px;
	color: #275cb2;
	border-radius: 5px;
	background: #FFF8DC;
	padding: 5px;
	}
	#getQuote {
	margin-top: 50px;
	}