Skip to content

Instantly share code, notes, and snippets.

@keks411

keks411/Random Quote Generator.markdown

Last active February 6, 2016 13:52
Show Gist options
  • Save keks411/94d49f86bf98fd8fe146 to your computer and use it in GitHub Desktop.
Save keks411/94d49f86bf98fd8fe146 to your computer and use it in GitHub Desktop.
Download ZIP
rQuote
Raw
index.html
<div id="preloader">
<img src="https://imageshack.com/i/p7aQidPJj" width="1" height="1"/>
</div>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<h2 id="topic" ><u>Random Quote Generator</u></h2></div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
<div class="jumbotron quote">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<button id="quotebtn" class="btn btn-primary">Next quote</button>
<button id="tweet" class="btn btn-primary twitter">Tweet this!</button>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
<!-- The actual quote comes in here-->
<div class="jumbotron quotebox">
<div class="container-fluid">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="well well-sm">
<h5 id="lol">You should see a quote here</h1>
</div></div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
Raw
script.js
$(document).ready(function(){
$.getJSON("http://api.icndb.com/jokes/random/?", function(data)
{
var joke = data.value.joke;
document.getElementById("lol").innerHTML=joke;
})
});
$(".twitter").hover(function(){
$(this).css("background-image", "url(https://imageshack.com/i/p7aQidPJj)");
$(this).html("");
}, function(){
$(this).css("background-image", "none")
$(this).css("background-color", "green");
$(this).html("Tweet this!");
});
// New quote
document.getElementById("quotebtn").addEventListener("click", function() {
$.getJSON("http://api.icndb.com/jokes/random/?", function(data)
{
var joke = data.value.joke;
document.getElementById("lol").innerHTML=joke;
})
});
//add a blank anchor to http to go around validation
$("#content a[href^='http://']").attr("target","_blank");
//tweet
document.getElementById("tweet").addEventListener("click", function() {
var tweet = document.getElementById("lol").innerHTML;
//var tweet2 = tweet.replace(/\W/, "");
window.open("http://twitter.com/intent/tweet?text=" + tweet);
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@media screen {
div#preloader {
position: absolute;
left: -9999px;
top: -9999px;
}
div#preloader img {
display: block;
}
}
@media print {
div#preloader,
div#preloader img {
visibility: hidden;
display: none;
}
}
body {
background-image:url("http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-71578.jpg");
}
.jumbotron {
background-color:transparent;
text-align:center;
}
#topic {
text-align:center;
color:green;
font-size:50px;
font-family:"Pacifico";
}
.quote {
margin-top:-90px;
width:auto;
}
.btn {
width: 110px;
height: 35px;
background-color:green;
border-color:black;
}
.well{
display: inline-block;
}
.quotebox {
margin-top:-70px;
}
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