A very very simple random quote generator made for the Free Code Camp project. Gets a random quote using a quote API and allows the user to tweet it.
A Pen by Tony Nyagah on CodePen.
Created
March 29, 2018 15:35
-
-
Save tony-nyagah/05b77287543bc685257b0036c62a0570 to your computer and use it in GitHub Desktop.
Random Quote Generator @freeCodeCamp
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
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <!-- bootstrap styling --> | |
| <div class="container-fluid"> | |
| <div class="row text-center"> | |
| <h2>Very Simple Random Quote Generator</h2> | |
| </div> | |
| <div class="row text-center"> | |
| <div class="col-xs-12 well message"> | |
| The quote will go here. | |
| </div> | |
| </div> | |
| <div class="row text-center"> | |
| <div class="col-xs-12"> | |
| <button id="getMessage" class="btn btn-primary"> | |
| Get Quote | |
| </button> | |
| <a href="http://google.com" class="btn btn-primary" id="tweetQuote" target="_blank">Tweet Quote</a> | |
| </div> | |
| </div> | |
| </div> |
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() { | |
| $("#getMessage").on("click", function() { | |
| /* | |
| // with getJSON | |
| $.getJSON("https://api.github.com/users/TonyNyagah", function(data) { | |
| $(".message").html(JSON.stringify(data)); | |
| }); | |
| */ | |
| /* | |
| // with $.ajax() | |
| $.ajax({ | |
| url: "https://api.github.com/users/TonyNyagah", | |
| dataType: "json", | |
| success: function(data){ | |
| $(".message").html(JSON.stringify(data)); | |
| } | |
| }); | |
| */ | |
| // now get a random quote from a site with HTTPS | |
| $.ajax({ | |
| url: "https://andruxnet-random-famous-quotes.p.mashape.com/", | |
| headers: { | |
| "X-Mashape-Key": "hoTnRMrQUkmshFojXahmqJXa7cl8p1OY1uBjsnwNtkRylnK9sh" | |
| }, | |
| method: "POST", | |
| contentType: "application/x-www-form-urlencoded", | |
| dataType: "json", | |
| success: function(data) { | |
| /* $(".message").html(JSON.stringify(data)); */ | |
| var html = ""; | |
| html += | |
| "<blockquote>" + | |
| data.quote + | |
| "<footer><cite>" + | |
| data.author + | |
| "</cite></footer></blockquote>"; | |
| $(".message").html(html); | |
| var encodedQuote = encodeURIComponent(data.quote); | |
| var tweetUrl = "https://twitter.com/intent/tweet?text=" + encodedQuote; | |
| $("a").attr("href", tweetUrl); | |
| /* | |
| console.log(data); | |
| console.log(encodedQuote); | |
| console.log(tweetUrl); | |
| */ | |
| } | |
| }); | |
| }); | |
| }); |
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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.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
| <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