-
-
Save anonymous/062fde32d7574538b0a72b72fbac4f27 to your computer and use it in GitHub Desktop.
Random Quote Generator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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 ); | |
| }); | |
| }); | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> | |
| <script src="https://use.fontawesome.com/36c05acc2d.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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