A Pen by Angela Johnson on CodePen.
Last active
May 21, 2016 00:13
-
-
Save amjohnson38/25cb86d793eb90618a4121fea33df239 to your computer and use it in GitHub Desktop.
Random Quote Machine Project
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
| <! DOCTYPE html> | |
| <head> | |
| <title>"Inspire Me With Your Quotes"</title> | |
| </head> | |
| <body> | |
| <div class="container-fluid text-center"> | |
| <h1 class="header">"Inspire Me With Your Random Quotes"</h1> | |
| <div class="core"> | |
| <p>Need a little motivation or an inspirational pick me up to lift your spirits? Let my random quote machine put a smile on your face.</p> | |
| </div> | |
| <div class="smileyFace"> | |
| <img src="http://clipartfreefor.com/cliparts/smiley-face-png/cliparti1_smiley-face-png_09.jpg" height="300" width="300" alt="smiley face" /> | |
| </div> | |
| <div class="quoteOutputContainer"> | |
| <span class="quote"></span> | |
| <br> | |
| <span class="author"></span> | |
| </div> | |
| <div id="buttonContainer"> | |
| <button class="btn btn-default getQuote" type="submit">Get Quote</button> | |
| <a class="btn btn-primary twitterShareButton" target='_blank' data-size="large"><i class="fa fa-twitter"></i>Tweet Quote</a> | |
| </div> | |
| </div> | |
| <div class="footer">© 2016 Angela Johnson All Rights Reserved. | |
| </div> | |
| </body> | |
| </html> |
A Pen by Angela Johnson on CodePen.
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
| //Allows the page to manipulate properly | |
| $(document).ready(function() { | |
| var insQuotes = ["If it doesn't challenge you, it doesn't change you", "Failure will never overtake me if my determination to succeed is strong enough", "Go confidently in the direction of your dreams. Live the life you have imagined", "You are never too old to set another goal or to dream a new dream", "You've got to be willing to lose everything to gain yourself", "Nothing can bring you peace but yourself", "Be the change you wish to see in the world", "Try to be a rainbow in someone's cloud", "Greatness is contagious...you'll catch it if you get around it", "Happiness is an inside job", "Don't cry because it's over, smile because it happened", "No one can make you feel inferior without your consent."]; | |
| var insQuotesAuthor = ["~Fred Devito", "~Og Madino", "~Henry David Thoreau", "~C.S. Lewis", "~Iyanla Vanzant", "~Ralph Waldo Emmerson", "~Ghandi", "~Maya Angelou", "~T.D. Jakes", "~Mandy Hale", "~Dr.Suess", "~Eleanor Roosevelt"]; | |
| //function needed to allow the quotes to display randomly | |
| function displayQuote() { | |
| var quotesLength = insQuotes.length; | |
| var randomNumber = Math.floor(Math.random() * quotesLength); | |
| var newQuote = insQuotes[randomNumber]; | |
| var newAuthor = insQuotesAuthor[randomNumber]; | |
| //.text()sets or returns the text content of the selected elements. | |
| $(".quote").text(newQuote); | |
| $(".author").text(newAuthor); | |
| //Allows the displayed quote to be shared on Twitter | |
| $(".twitterShareButton").attr("href", "https://twitter.com/intent/tweet?text=" + newQuote + " " + newAuthor); | |
| } | |
| //calls the function displayQuote to display when the GNQ button is clicked | |
| $("button").on("click", displayQuote); | |
| }); |
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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/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
| .header { | |
| background-color: black; | |
| color: white; | |
| text-align: center; | |
| padding: 5px; | |
| font-family: Times New Roman; | |
| border-radius: 5px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .core { | |
| font-family: Times New Roman; | |
| font-style: italic; | |
| text-align: center; | |
| font-size: 20px; | |
| padding-top: 70px; | |
| } | |
| #buttonContainer { | |
| text-align: center; | |
| padding-top: 30px; | |
| padding-bottom: 60px; | |
| } | |
| .smileyFace { | |
| text-align: center; | |
| padding-bottom: 80px; | |
| padding-top: 60px; | |
| } | |
| .quoteOutputContainer { | |
| background-color: white; | |
| width: 50%; | |
| margin-right: auto; | |
| margin-left: auto; | |
| border-color: black; | |
| border-style: solid; | |
| border-radius: 5px; | |
| padding: 40px; | |
| height: auto; | |
| color: black; | |
| } | |
| .quote { | |
| font-size: 30px; | |
| } | |
| .getQuote { | |
| background-color: yellow; | |
| } | |
| .footer { | |
| background-color: black; | |
| color: white; | |
| text-align: center; | |
| padding: 0px; | |
| font-family: Times New Roman; | |
| border-radius: 5px; | |
| } |
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/bootstrap-social/4.12.0/bootstrap-social.min.css" rel="stylesheet" /> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/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