Skip to content

Instantly share code, notes, and snippets.

@erik-sn

erik-sn/Random Quote Generator.markdown

Created July 3, 2016 05:50
Show Gist options
  • Save erik-sn/1ffa90e01ad49885be848d13ba781ca8 to your computer and use it in GitHub Desktop.
Save erik-sn/1ffa90e01ad49885be848d13ba781ca8 to your computer and use it in GitHub Desktop.
Download ZIP
Random Quote Generator
Raw
index.html
<div class="page-container">
<div class="app-container">
<div class="picture-container">
<img src="" height="188" width="188" />
</div>
<div class="quote-container">
</div>
<div class="author-container">
</div>
</div>
<div class="button-container">
<div id="button1" class="btn btn-primary" >Get Quote</div>
</div>
</div>
<a id="twitter-button"><img src="http://res.cloudinary.com/dvr87tqip/image/upload/v1461722668/tweet_apcnev.png" width="150" /></a>
Raw
script.js
var quote = 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1';
var base = 'https://www.googleapis.com/customsearch/v1?q=';
var api = '';
var tail = '&cx=016390303268819512427%3Anot3_rqjrsk&imgSize=large&searchType=image&key=AIzaSyAEXD_QK2gv4uexkpYzj5-gOGwSBAND4Js';
var twitterHref = 'https://twitter.com/share?url=google.com&text=';
var colorIndex = 0;
var colors = ['#ccac00', '#00BFFF', '#808000', '#ff1919', '#b27300', '#993299'];
var isInitialLoad = true;
$('document').ready(function() {
getQuote();
$('#button1').on('click', function() {
getQuote();
});
$('#button1').on('mouseenter', function() {
$('#button1').css('background-color', '#00BFFF');
$('#button1').css('color', 'white');
}).on('mouseleave', function() {
$('#button1').css('background-color', 'white');
$('#button1').css('color', '#00BFFF');
});
});
function getQuote() {
$.get(quote + '?date=' + new Date(), function(data) {
$.get(base + data[0].title + tail, function(imgData) {
var quote = '"' + data[0].content.replace('<p>', '').replace('<\/p>\n', '').replace('\n','').trim() + '"';
var author = '<em> - ' + data[0].title + '</em>';
var imgURL = imgData.items[0].link;
if(quote.length < 250) {
stopAnimation();
// if this is the first time the page is loaded do not update color scheme
if (!isInitialLoad) {
updateColorScheme(colors[colorIndex]);
}
isInitialLoad = false;
updateInterface(quote, author, imgURL, function() {
$('.picture-container').children('img').attr('src',imgData.items[0].link);
});
} else {
getQuote();
}
});
});
}
function stopAnimation() {
$('img').stop();
$('.author-container').stop();
$('.quote-container').stop();
}
function updateInterface(quote, author, img) {
var twitterUrl = quote.replace("'", '').replace('&#8217;', '').replace('...', ',')
.replace('<em>','').replace('</em >','').replace('<p>', '').replace('</p >','').replace('<br>', '').replace('</br >','');
$('#twitter-button').attr('href', twitterHref + twitterUrl);
$('.picture-container').children('img').fadeTo(1000, 0.0);
$('.author-container').fadeTo(1000, 0);
$('.quote-container').fadeTo(1000, 0.0, function() {
$('.quote-container').html('&nbsp' + quote);
$('.author-container').html(author);
$('.quote-container').fadeTo(2000, 1, function() {
$('.picture-container').children('img').attr('src',img);
$('.author-container').fadeTo(3000, 1);
$('.picture-container').children('img').fadeTo(2000, 1);
});
})
}
function updateColorScheme(color) {
console.log(color)
updateColorIndex();
$('.picture-container img').css('border', '5px solid ' + color);
$('.page-container').css('background', colorLuminance(color, -.2));
$('#button1').css('color', color);
$('#button1').css('border', '4px solid ' + color);
$('body').css('background-color', color);
$('#button1').on('mouseenter', function() {
$('#button1').css('background-color', color);
$('#button1').css('color', 'white');
}).on('mouseleave', function() {
$('#button1').css('background-color', 'white');
$('#button1').css('color', color);
});
}
function updateColorIndex() {
if(colorIndex === 5) {
colorIndex = 0;
} else {
colorIndex++;
}
}
function colorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.css
body {
background-color: #00BFFF;
transition: background-color 2s;
}
.picture-container {
float: left;
position: relative;
background-color: white;
-webkit-box-shadow: 1px 1px 7px 0px rgba(67, 67, 69, 0.75);
-moz-box-shadow: 1px 1px 7px 0px rgba(67, 67, 69, 0.75);
box-shadow: 1px 1px 7px 0px rgba(67, 67, 69, 0.75);
-webkit-shape-outside:circle();
shape-outside:circle();
height: 155px;
width: 155px;
margin-left: calc(50% - 390px);
margin-top: -80px;
border-radius: 110px;
border: 10px solid white;
}
.picture-container img {
display: none;
margin-left: -3px;
margin-top: -3px;
height: 150px;
width: 150px;
border: 5px solid #00BFFF;
border-radius: 105px;
-webkit-box-shadow: 1px 1px 7px 0px rgba(67, 67, 69, 0.75);
-moz-box-shadow: 1px 1px 7px 0px rgba(67, 67, 69, 0.75);
box-shadow: 1px 1px 7px 0px rgba(67, 67, 69, 0.75);
}
.page-container {
position: absolute;
background-color: #1B95E0;
height: 410px;
width: 610px;
margin-left: calc(50% - 300px);
margin-top: 200px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 20px 0px rgba(67, 67, 69, 0.75);
-moz-box-shadow: 1px 1px 20px 0px rgba(67, 67, 69, 0.75);
box-shadow: 1px 1px 20px 0px rgba(67, 67, 69, 0.75);
}
.app-container {
position: relative;
padding 15px;
height: 400px;
width: 600px;
margin-left: calc(50% - 300px);
margin-top: 5px;
background-color: white;
-webkit-box-shadow: 1px 1px 7px 0px rgba(67, 67, 69, 0.75);
-moz-box-shadow: 1px 1px 7px 0px rgba(67, 67, 69, 0.75);
box-shadow: 1px 1px 7px 0px rgba(67, 67, 69, 0.75);
border-radius: 5px;
}
.quote-container {
margin-left: 5px;
padding: 20px;
font-size: 30px;
font-family: Helvetica;
}
.author-container {
width: 600px;
text-align: center;
margin-top: 90x;
font-size: 30px;
}
.button-container {
position: absolute;
width: 220px;
margin-left: calc(50% - 150px);
margin-top: -75px;
}
#button1 {
text-align: center;
color: #00BFFF;
font-family: Helvetica;
font-size: 40px;
background-color: white;
width: 300px;
border: 4px solid #00BFFF;
border-radius: 15px;
transition: color .5s;
transition: background-color .5s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment