A random quote generator, using quotesondesign.com API. Users can tweet quotes that they like.
Last active
February 7, 2017 13:34
-
-
Save emygeek/0ded0cfda9bd159d0f6b067498d9353e to your computer and use it in GitHub Desktop.
Random QUote Generator (FCC)
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
| <section id="home"> | |
| <div class="container"> | |
| <div class="col-md-8 col-md-offset-2"> | |
| <div class="content"> | |
| <h1> Quotes for Positivity </h1> | |
| <div class="quote-area"> | |
| <p id="quote-title"class="quote"></p> | |
| <span id="quote-author" class="author"></span> | |
| </div> | |
| <button id="get-quote" class="btn btn-light">New Quote</button> | |
| <button id="tweet" class="btn btn-light">Tweet quote</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> |
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(){ | |
| $('#tweet').addClass("disabled"); | |
| //Get new quote | |
| $('#get-quote').click(function(){ | |
| $('#tweet').removeClass("disabled"); | |
| $.ajax({ | |
| url:'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1', | |
| success: function(data){ | |
| var quote = data.shift(); | |
| $('#quote-author').text(quote.title); | |
| $('#quote-title').html(quote.content); //The content is retrieved with p tags | |
| }, | |
| cache: false | |
| }); | |
| }); | |
| //Tweet content | |
| $('#tweet').click(function(){ | |
| var text = $("#quote-title").text() + " - by " + $("#quote-author").text(); | |
| var tweet = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text); | |
| window.open(tweet, '_blank'); | |
| }); | |
| }); |
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://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.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
| @import url('https://fonts.googleapis.com/css?family=Raleway'); | |
| body{ | |
| font-size: 16px; | |
| font-family:'Raleway', sans-serif; | |
| } | |
| .btn-light{ | |
| border-radius: 0px; | |
| width:250px; | |
| background:#cdcdcd; | |
| } | |
| .btn-light:hover{ | |
| } | |
| button{ | |
| margin:10px; | |
| } | |
| #home{ | |
| height: 100vh; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| background: #62ceaa; | |
| } | |
| .content{ | |
| background:rgb(63, 133, 110); | |
| color:#fff; | |
| box-shadow:0px 0px 5px; | |
| padding:50px; | |
| text-align:center; | |
| } |
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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment