Pulls quotes from quotesbydesign API and posts to Twitter.
A Pen by Ashlynn Pai on CodePen.
<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> |
Pulls quotes from quotesbydesign API and posts to Twitter.
A Pen by Ashlynn Pai on CodePen.
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'); | |
}); | |
}); | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
@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; | |
} |