Skip to content

Instantly share code, notes, and snippets.

@lseffer

lseffer/index.html

Last active June 11, 2017 13:34
Show Gist options
  • Save lseffer/3b9f0ea06194ea17586744433b66b845 to your computer and use it in GitHub Desktop.
Save lseffer/3b9f0ea06194ea17586744433b66b845 to your computer and use it in GitHub Desktop.
Download ZIP
zZgeJb
Raw
index.html
<body>
<div class="jumbotron text-center container-fluid" id="masterdiv">
<div class="important-text">
<p id="info">Push button to get a quote</p>
</div>
<div class="wrapper" align="center">
<div class="very-important-text" id="quote" align="left">
</div>
<div class="normaltext" id="title" align="left">
</div>
</div>
<button id="getquote" class="btn">
Get Quote
</button>
<a class="twitter-share-button" href="" data-size="large">
<button type="button" class="btn btn-primary tweeter">Tweet this!</button></a>
</div>
</body>
Raw
script.js
$("#getquote").on("click", function() {
$("#info").html("Here's a quote:")
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(json) {
var html = "";
var title = json[0].title;
var content = json[0].content;
$("#quote").html(content);
$("#title").html("... by " + title);
$("a").attr("href", "https://twitter.com/intent/tweet/?text=" + $("#quote").text());
$(".tweeter").show();
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Raw
style.css
.important-text {
font-size: 20px;
}
.very-important-text {
font-size: 30px;
height: 50px;
}
.normaltext {
padding-bottom: 20px;
}
.wrapper {
margin: auto;
}
.jumbotron {
width: 600px;
margin: 0 auto;
}
.tweeter {
display: none;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment