Skip to content

Instantly share code, notes, and snippets.

Created March 24, 2016 07:43
Show Gist options
  • Save anonymous/5607493ef83bf5c66f16 to your computer and use it in GitHub Desktop.
Save anonymous/5607493ef83bf5c66f16 to your computer and use it in GitHub Desktop.
Random Quote Machine
<div class="quote-box">
<div class="quote-text">
<i class="fa fa-quote-left"> </i><span id="text"></span>
</div>
<div class="quote-author">
- <span id="author"></span>
</div>
<div class="buttons">
<a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a class="button" id="tumblr-quote" title="Post this quote on tumblr!" target="_blank">
<i class="fa fa-tumblr"></i>
</a>
<button class="button" id="new-quote">New quote</button>
</div>
</div>
<div class="footer"> by <a href="http://codepen.io/ilovecoding197/">Steve</a></div>
/*
Code by Gabriel Nunes
*/
var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];
var currentQuote = '', currentAuthor = '';
function getQuote() {
$.ajax({
headers: {
"X-Mashape-Key": "OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V"
},
url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=',
success: function(response) {
var r = JSON.parse(response);
currentQuote = r.quote;
currentAuthor = r.author;
$('#text').text(r.quote);
$('#author').html(r.author);
$('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
$('#tumblr-quote').attr('href', 'https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption='+encodeURIComponent(currentAuthor)+'&content=' + encodeURIComponent(currentQuote));
var color = Math.floor(Math.random()* colors.length);
$("html body").animate({
backgroundColor: colors[color],
color: colors[color]
}, 1000);
$(".button").animate({
backgroundColor: colors[color]
}, 1000);
}
});
}
$(document).ready(function() {
getQuote();
$("#new-quote").on('click',getQuote);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
@import url(http://fonts.googleapis.com/css?family=Raleway:400,500);
* {
margin: 0;
padding: 0;
list-style: none;
vertical-align: baseline;
}
div {
position:relative;
z-index: 2;
}
body {
background-color: #333;
color: #333;
font-family: 'Raleway', sans-serif;
font-weight:400;
}
.footer {
width:450px;
text-align:center;
display:block;
margin:15px auto 30px auto;
font-size:0.8em;
color:#fff;
a {
font-weight:500;
text-decoration:none;
color:#fff;
}
}
.quote-box {
border-radius:3px;
position:relative;
margin:8% auto auto auto;
width:450px;
padding:40px 50px;
display:table;
background-color:#fff;
.quote-text {
i{
font-size:1.0em;
margin-right: 0.4em;
}
text-align:center;
width:450px;
height:auto;
clear:both;
font-weight:500;
font-size:1.75em;
}
.quote-author {
width:450px;
height:auto;
clear:both;
padding-top:20px;
font-size:1em;
text-align:right;
}
.buttons {
width:450px;
margin:auto;
display:block;
.button {
height:38px;
border:none;
border-radius:3px;
color:#fff;
background-color:#333;
outline:none;
font-size:0.85em;
padding: 8px 18px 6px 18px;
margin-top:30px;
opacity:1;
cursor:pointer;
&:hover {
opacity:0.9;
}
&#tweet-quote, &#tumblr-quote {
float:left;
padding:0px;
padding-top:8px;
text-align:center;
font-size:1.2em;
margin-right:5px;
height:30px;
width:40px;
}
&#new-quote {
float:right;
}
}
}
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment