Created
November 28, 2018 19:21
-
-
Save Liight/c8c24f413acd60983d506484bc107e70 to your computer and use it in GitHub Desktop.
Dr Seuss Quote Generator (JQuery /JavaScript, BootStrap, API)[FCC]
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-12 text-center" id="title"> | |
| <h1>Dr Seuss Quote Generator</h1> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-3"></div> | |
| <div class="col-sm-6 text-center"> | |
| <h4 id="intro-paragraph">Here are some random quotes from Dr. Seuss</h4> | |
| <div id="quote-box"> | |
| <p id="quote-holder"></p> | |
| <p id="quote-author-holder"></p> | |
| </div> | |
| </div> | |
| <div class="col-sm-3"></div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 text-center" id="button-holder"> | |
| <button class="btn" id="new-quote-button" onclick="generateQuote()">Generate Quote</button> | |
| <button class="btn" id="tweet-button"> | |
| <a href="https://codepen.io/Liight/pen/jPjXoG" class="tweet" target="_blank"><span class="icon-twitter"></span>Tweet This</a> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </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
| var catalog = [{ | |
| 'quote': 'Today you are you! That is truer than true! There is no one alive who is you-er than you!', | |
| 'author': 'Dr. Seuss' | |
| }, { | |
| 'quote': 'Don\'t cry because it\'s over. Smile because it happened.', | |
| 'author': 'Dr. Seuss' | |
| }, | |
| { | |
| 'quote': 'You have brains in your head. You have feet in your shoes. You can steer yourself in any direction you choose. You\'re on your own, and you know what you know. And you are the guy who\'ll decide where to go.', | |
| 'author': 'Dr. Seuss' | |
| }, { | |
| 'quote': 'I like nonsense, it wakes up the brain cells. Fantasy is a necessary ingredient in living, it\'s a way of looking at life through the wrong end of a telescope. Which is what I do, and that enables you to laugh at life\'s realities.', | |
| 'author': 'Dr. Seuss' | |
| }, { | |
| 'quote': 'The more that you read, the more things you will know. The more that you learn, the more places you\'ll go.', | |
| 'author': 'Dr. Seuss' | |
| }, { | |
| 'quote': 'Step with care and great tact, and remember that Life\'s a Great Balancing Act.', | |
| 'author': 'Dr. Seuss' | |
| }, { | |
| 'quote': 'Think left and think right and think low and think high. Oh, the thinks you can think up if only you try!', | |
| 'author': 'Dr. Seuss' | |
| }, { | |
| 'quote': 'How did it get so late so soon? Its night before its afternoon. December is here before its June. My goodness how the time has flewn. How did it get so late so soon?', | |
| 'author': 'Dr. Seuss' | |
| }, { | |
| 'quote': 'Only you can control your future.', | |
| 'author': 'Dr. Seuss' | |
| } | |
| ]; | |
| // initializes variables | |
| var min = 0; | |
| var max = catalog.length; | |
| var quote, author; | |
| // sets variables | |
| function selectRandomQuoteFromArray() { | |
| var q = Math.floor(Math.random() * (max - min)); | |
| quote = catalog[q]['quote'].toString(); | |
| author = catalog[q]['author']; | |
| } | |
| // displays array data on page | |
| function displayQuote() { | |
| $('#quote-holder').html(quote); | |
| $('#quote-author-holder').text(author); | |
| } | |
| // make onclick function | |
| function generateQuote() { | |
| selectRandomQuoteFromArray(); | |
| displayQuote(); | |
| } | |
| $(document).ready(function() { | |
| generateQuote(); | |
| }); | |
| // Tweet The Quote | |
| // We bind a new event to our link | |
| $('a.tweet').click(function(e) { | |
| //We tell our browser not to follow that link | |
| e.preventDefault(); | |
| //We get the URL of the link | |
| var loc = $(this).attr('href'); | |
| //We get the title of the link | |
| var title = escape($(this).attr('title')); | |
| // Get the quote text | |
| var quoteText = $('#quote-holder').text(); | |
| // Get the author text | |
| var authorText = $('#quote-author-holder').text(); | |
| // Convert to string | |
| var quoteStr = quoteText.toString(); | |
| // Convert to string | |
| var authorStr = authorText.toString(); | |
| // Concat string | |
| var fullStr = quoteStr + " - " + authorStr; | |
| // Fact length | |
| var quoteLen = fullStr.length; | |
| // Formats "facts" that are too long... remove if not needed | |
| if (quoteLen > 103) { // max chacters allowed | |
| // trim, and allow space for '...'" | |
| var quoteF = fullStr.substring(0, 100); | |
| var quoteF = quoteF.trim(); //<-- ensures the last character isnt ' ' | |
| fullStr = quoteF + "..."; | |
| } | |
| //We trigger a new window with the Twitter dialog, in the middle of the page | |
| window.open('https://twitter.com/share?url=' + loc + '&text=' + fullStr + '&', 'twitterwindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 225) + ', left=' + $(window).width() / 2 + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'); | |
| }); |
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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/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
| #title h1 { | |
| text-shadow: 4px 4px 4px #aaa; | |
| margin: 10px auto; | |
| font-size: 3.5em; | |
| color: #333; | |
| font-family: 'Tahoma', serif; | |
| } | |
| #intro-paragraph {} | |
| #quote-box { | |
| border: solid 1px black; | |
| border-radius: 10px; | |
| box-shadow: 10px 10px 5px #888888; | |
| min-height: 14em; | |
| width: 80%; | |
| margin: auto; | |
| } | |
| #quote-holder { | |
| background: transparent; | |
| min-height: 11em; | |
| width: 80%; | |
| margin: auto; | |
| padding: 20px 10px 20px 10px; | |
| font-family: 'Cardo', serif; | |
| font-size: 1.5em; | |
| } | |
| #quote-author-holder { | |
| background: transparent; | |
| min-height: 3em; | |
| width: 80%; | |
| margin: auto; | |
| padding: 10px; | |
| font-family: 'Cardo', serif; | |
| font-size: 1.5em; | |
| font-style: italic; | |
| } | |
| #button-holder { | |
| margin: 20px 0 0 0; | |
| } | |
| button { | |
| background: linear-gradient(#FDFDFD, #DEDCDF); | |
| border: 1px solid #C3C7C8; | |
| border-radius: 2px; | |
| height: 3em; | |
| width: 200px; | |
| text-shadow: 1px 1px white; | |
| font-weight: bold; | |
| } | |
| #new-quote-button { | |
| color: black; | |
| text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); | |
| background: linear-gradient(#eee #fff); | |
| box-shadow: inset 0 0 1px 1px #54AED0; | |
| } | |
| #tweet-button { | |
| color: white; | |
| text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); | |
| background: linear-gradient(#30CCFC, #2CC5EF); | |
| box-shadow: inset 0 0 1px 1px #54AED0; | |
| } | |
| #tweet-button a { | |
| 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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet" /> | |
| <link href="//fonts.googleapis.com/css?family=Cardo:400,400italic|Radley|Tangerine" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment