An Assignment for the free Code Camp Certification.
Tasks:
- click button - show random quotes
- press button to tweet quote
A Pen by Nadine Tatto on CodePen.
Last active
March 29, 2018 15:41
-
-
Save Rhinogradentia/b95f769fc910e1a679d25adcdd791577 to your computer and use it in GitHub Desktop.
Build a Random Quote Machine
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
| <header> | |
| <div class="container-fluid"> | |
| <div class = "row text-center"> | |
| <h1 style="padding: 20px 10px 10px 1opx;">Random Quotes:</h1> | |
| <!-- idea - let the user choose quote api --> | |
| <!-- idea - let the user preselect a category --> | |
| </div> | |
| </div> | |
| </header> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row"><div class="col-xs-12" style="height:75px;"></div></div> | |
| <div class = "row text-center"> | |
| <div class="col-xs-3"></div> | |
| <div id='citation-block' class="col-xs-6 quote"> | |
| The quote will go here | |
| </div> | |
| <div class="col-xs-3"></div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-xs-3"></div> | |
| <div class = "col-xs-6"> | |
| <!--<div class="text-left">--> | |
| <button id="goTweet" class="btn btn-light pull-left"><i class="fab fa-twitter" style="font-size:1.5em;"></i></button> | |
| <!--</div> | |
| <div class="text-right">--> | |
| <button id="getQuote" class="btn btn-light pull-right">Get next quote!</button> | |
| <!--</div>--> | |
| </div> | |
| <div class="col-xs-3"></div> | |
| </div> | |
| </div> | |
| </body> | |
| <footer> | |
| <div class="container-fluid"> | |
| <div id="quotesSource" class="row text-center footer"> | |
| <div class="col-xs-4">by Nadine</div> | |
| <div class="col-xs-4"><p>© Copyright 2018. All Rights Reserved</p></div> | |
| <div class="col-xs-4"> | |
| <p>The source of the quotes is: <a href="https://talaikis.com/random_quotes_api/">here</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> |
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
| function fetchQuote() { | |
| var html = ""; | |
| $.getJSON("https://talaikis.com/api/quotes/random/", function(json) { | |
| html += "<blockquote id='quoteText' class='blockquote' style='font-size:1.5em;'><strong>"</strong>" + json.quote + "<strong>"</strong><footer class='blockquote-footer text-right'>" + json.author + " (<cite title='Category'>"+json.cat+"</cite>)</footer></blockquote>"; | |
| $(".quote").html(html); | |
| //$(".quote").html(JSON.stringify(json)); | |
| }); | |
| } | |
| $(document).ready(function() { | |
| fetchQuote(); // initially display already a quote | |
| $("#getQuote").on("click", function(){ | |
| fetchQuote(); | |
| }); | |
| $("#goTweet").on("click", function(){ | |
| var tweetText = document.getElementById("quoteText").textContent; | |
| var url = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + tweetText; | |
| window.open(url, "_blank"); | |
| }); | |
| }); |
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.3.1/jquery.min.js"></script> | |
| <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.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
| header { | |
| height:70px; | |
| background-color: #66CDAA; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #ecf9f4; | |
| height: 500px; | |
| } | |
| #citation-block { | |
| font-family: 'Caveat', cursive; | |
| font-size: 1.5em; | |
| margin: 0 auto; | |
| background-color: white; | |
| padding: 20px 40px 20px 40px; | |
| } | |
| #goTweet { | |
| margin-top: 20px; | |
| } | |
| #getQuote { | |
| margin-top: 20px; | |
| } | |
| .footer { | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| /* Set the fixed height of the footer here */ | |
| height: 60px; | |
| padding: 20px 10px 10px 10px; | |
| background-color: #66CDAA; | |
| color: white; | |
| } |
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" /> | |
| <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment