Skip to content

Instantly share code, notes, and snippets.

@chemok78

chemok78/Random Quotes!.markdown

Created July 22, 2016 06:27
Show Gist options
  • Save chemok78/83071585a4d445bb186611f3f64cefe2 to your computer and use it in GitHub Desktop.
Save chemok78/83071585a4d445bb186611f3f64cefe2 to your computer and use it in GitHub Desktop.
Download ZIP
Random Quotes!
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Random Quotes, the awesome way!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<h1 class="text-center">Random Quotes!</h1>
<div class="jumbotron">
<h4 class="text-center" id="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</h4>
<h5 class="text-right" id="author"><a>-Author</a></h5>
<div class="text-center">
<button class="btn btn-warning " id="newQuote">New Quote</button></div>
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet>text=?">
Tweet this quote</a>
</div>
<h5 class="text-center"><a href="http://codepen.io/chemok78/">By Che Mug</a></h5>
</div>
</body>
</html>
Raw
script.js
$(document).ready(function() {
function changeQuote(){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) { //retrieve JSON from API
document.getElementById("quote").innerHTML = json.quoteText;
//or jQuery $("quote").html(json.quoteText)
document.getElementById("author").innerHTML = json.quoteAuthor;
//or jQuery $("author").html(json.quoteText)
document.title = (json.quoteText);
console.log(document.title);
});
};
function changeImage() {
$.getJSON("https://api.unsplash.com/photos/random?client_id=336b527b2e18d045045820b78062b95c825376311326b2a08f9b93eef7efc07b", function(result){
var randomPhoto = result.urls.full;
console.log(randomPhoto);
$('body').css('background-image', 'url(randomPhoto)');
});
};
changeQuote();
$("#newQuote").on("click", function() {
changeQuote();
changeImage();
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body {
padding-top: 60px;
background-image: url();
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fira Sans', sans-serif;
}
.jumbotron {
padding: 20px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment