random quote machine Free Code Camp Challenge
Created
October 6, 2016 16:40
-
-
Save 8parth/5a5391884126d63c65b8c39309c30b45 to your computer and use it in GitHub Desktop.
Random Quote Machine
This file contains 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> | |
| <div class="outer-block" style=""> | |
| <div class="inner-block text-center"> | |
| <blockquote class="font-weight-bold font-italic text-style"> | |
| <div class="row"> | |
| <div class="col-md-12 quote"> | |
| The quote will appear here. | |
| </div> | |
| <div class="col-md-12 text-center author font-italic text-muted text-style"> | |
| Author of quote | |
| </div> | |
| </div> | |
| </blockquote> | |
| <div class="row"> | |
| <div class="col-md-6 text-right"> | |
| <a href="https://twitter.com/intent/tweet" class="button tb" target="_blank"> | |
| <i class="fa fa-twitter fa-4x text-primary"></i> | |
| </a> | |
| </div> | |
| <div class="col-md-6 text-left get_quote"> | |
| <a class="button get_quote" title="Press to Get new random quote!" target="_blank"> | |
| <i class="fa fa-retweet fa-4x text-primary"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bootstrap core JavaScript | |
| ================================================== --> | |
| <!-- Placed at the end of the document so the pages load faster --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> | |
| <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script> | |
| </body> |
This file contains 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() { | |
| $.ajax({ | |
| url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous', | |
| type: 'post', | |
| data: { | |
| }, | |
| headers: { | |
| 'X-Mashape-Key': 'Se2VeL2UGzmshkBimsVtTuQEB0wfp1NTWhrjsn6XfbFuRnDrhJ', | |
| 'Content-Type' : 'application/x-www-form-urlencoded', | |
| 'Accept' : 'application/json' | |
| }, | |
| dataType: 'json', | |
| success: function (data) { | |
| var temp = data; | |
| $(".quote").html(temp['quote']); | |
| $(".author").html(temp['author']); | |
| $('.tb').prop('href', "https://twitter.com/intent/tweet?text=" + temp['quote'] +" - " +temp['author']); | |
| } | |
| }); | |
| $(".get_quote").on("click", function(){ | |
| console.log("json"); | |
| // $.getJSON("http://quotes.rest/quote.json", function(json){ | |
| // console.log("on"); | |
| // $(".quote").html(json); | |
| // }); | |
| $.ajax({ | |
| url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous', | |
| type: 'post', | |
| data: { | |
| }, | |
| headers: { | |
| 'X-Mashape-Key': 'Se2VeL2UGzmshkBimsVtTuQEB0wfp1NTWhrjsn6XfbFuRnDrhJ', | |
| 'Content-Type' : 'application/x-www-form-urlencoded', | |
| 'Accept' : 'application/json' | |
| }, | |
| dataType: 'json', | |
| success: function (data) { | |
| var temp = data; | |
| $(".quote").html(temp['quote']); | |
| $(".author").html(temp['author']); | |
| $('.tb').prop('href', "https://twitter.com/intent/tweet?text=" + temp['quote'] +" - " +temp['author']); | |
| } | |
| }); | |
| }); | |
| }); | |
This file contains 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> |
This file contains 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,body | |
| { | |
| font-family: 'Amatic SC', cursive; | |
| height: 100%; | |
| } | |
| body { | |
| background: #424649; | |
| display: table; | |
| margin: 0 auto; | |
| } | |
| .wrapper { | |
| position: relative; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .center-block { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .jumbotron { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .text-style{ | |
| color: white; | |
| } | |
| /* html, body{height:100%; width: 100%; margin:0;padding:0} */ | |
| .outer-block{ | |
| /* height: 100vh; | |
| display: table; | |
| width: 100%; */ | |
| display: table-cell; | |
| vertical-align: middle; | |
| text-align: center; | |
| } | |
| .inner-block { | |
| width: 125vh; | |
| height: 25vh; | |
| /* display: table-cell; | |
| vertical-align: middle; | |
| text-align: center; */ | |
| } | |
| .quote{ | |
| font-family: 'Amatic SC', cursive; | |
| font-weight: 400; | |
| font-size: 45px; | |
| } | |
| .author{ | |
| font-family: 'Amatic SC', cursive; | |
| font-weight: 300; | |
| font-size: 30px; | |
| } | |
| .pull-bottom { | |
| display: inline-block; | |
| vertical-align: bottom; | |
| float: none; | |
| } |
This file contains 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" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.0/flexboxgrid.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment