Skip to content

Instantly share code, notes, and snippets.

@ispeakcomputer

ispeakcomputer/Random Quote Generator.markdown

Forked from anonymous/Random Quote Generator.markdown
Last active June 29, 2016 01:03
Show Gist options
  • Save ispeakcomputer/ffd7f6a8df01c06bfbd4bcf0fa6d4476 to your computer and use it in GitHub Desktop.
Save ispeakcomputer/ffd7f6a8df01c06bfbd4bcf0fa6d4476 to your computer and use it in GitHub Desktop.
Download ZIP
Random Quote Generator
Raw
index.html
<html>
<head>
<!-- remove this throwing 404's
<link rel="stylesheet" type="text/css" href="style.css">
-->
<!--font awesome-->
<!-- <script src="https://use.fontawesome.com/36c05acc2d.js"></script> -->
</head>
<body>
<div id="quotespace">
<p id='quote'> </p>
</div>
<center> <button id="mybutton" type="button" class="btn btn-info btn-lg">Magical Random Quote</button></center>
</body>
</html>
Raw
script.js
$(document).ready(function() {
var leftQuote = '<i class="fa fa-quote-left fa-4x" aria-hidden="true"></i>';
var rightQuote = '<i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>';
$( "#mybutton" ).click(function() {
$( ".btn-info" ).toggleClass(".btn-primary").animate({ top: '85%' }, "slow");
$( "#quotespace" ).animate( {top: '50px'}, "slow");
/*This is where we grab our JSON after button press
Make sure to load code pen as HTTP or this call doesn't work'*/
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(data) {
/*this is where we display the quote on the id = quoteapace div the p tag. font awesome quotes icons on HTML*/
$( "#quotespace>#quote" ).html( leftQuote + data.quoteText + rightQuote + "<br>" + "-" + data.quoteAuthor);
/*consolelog for testing the loading*/
console.log(data.quoteText + "-" + data.quoteAuthor );
});
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://use.fontawesome.com/36c05acc2d.js"></script>
Raw
style.css
body{
}
#quotespace{
position: absolute;
padding: 50px;
text-align: center;
/*this is how to center a div */
margin-left: auto ;
margin-right: auto ;
top: -120;
}
#mybutton {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
p{
display: inline;
}
#quote{
text-align: center;
/*display: inline;*/
font-size: 40px;
}
.fa-quote-left{
position: relative;
display: inline;
float: left;
color: #BFF2FF;
}
.fa-quote-right{
position: relative;
display: inline;
float: right;
color: #BFF2FF;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.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