Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link href="https://fonts.googleapis.com/css?family=Reenie+Beanie|Satisfy|Della+Respira" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<body background="https://www.dropbox.com/s/rpbqzhzfz2ov1hl/black-backgrounds-9.jpg?raw=1">
    <!-- Header -->
   <div class = "row text-center">
      <h1>Random Quote Generator</h1>
   </div>
  <!-- quote generator -->
  <div class = "square">
    <div class = "row text-center">
      <div id = "quoteDisplay">
      </div>
    </div>
    <div class = "row text-center">
      <div class =  "col-m-12">
        <button onclick="newQuote()">New Quote</button>
        <script src="javascript.js"></script>
      </div>
    </div>
    <div class = "row text-center">
      <div class = "col-m-12">
        <a class="twitter" onclick="shareTweet()">
  <i type="button" class="fa fa-twitter fa-3x"></i></a>
      </div>
    </div>
  </div>
  <!-- footer -->
  <div class =  "footer text-center">
    <p>Created by C. Melissa Epperson</p>
       <p>Quotes taken from: <a href: "http://www.quotery.com/lists/100-funny-quotes-worth-laughing-over">http://www.quotery.com/lists/100-funny-quotes-worth-laughing-over</a></p> 
  </div>
</body>
              
            
!

CSS

              
                h1 {
  color: white;
  font-family: 'Reenie Beanie', cursive;
  font-size: 4em;
  padding-top: 3%;
}
.square {
  background-color: #E5E5E5;
  opacity: 0.8;
  border-radius: 10px;
  width: 40%;
  margin: 0 auto;
  margin-top: 7%;
  padding-top: 3%;
  color: black;
}
#quoteDisplay {
  color: black;
  font-family: 'Della Respira', serif;
  font-size: 1.2em;
  padding-bottom: 3%;
  padding-left: 7%;
  padding-right: 7%
}
button {
  background-color: white;
  font-family: 'Della Respira', serif;
  font-size: 1.2em;
  margin-bottom: 3%;
  margin-top: 3%;
}
.footer {
  color: #E5E5E5;
  margin-top: 2%;
  font-size: 1em;
}
              
            
!

JS

              
                var quotes = ["When I die, I want to go peacefully like my grandfather did–in his sleep. Not yelling and screaming like the passengers in his car.  -Bob Monkhouse", "I have six locks on my door all in a row. When I go out, I lock every other one. I figure no matter how long somebody stands there picking the locks, they are always locking three.  -Elayne Boosler", "Always borrow money from a pessimist. He won\’t expect it back.  -Oscar Wilde", "The scientific theory I like best is that the rings of Saturn are composed entirely of lost airline luggage.  -Mark Russell", "Friendship is like peeing on yourself: everyone can see it, but only you get the warm feeling that it brings.  -Robert Bloch", "First the doctor told me the good news: I was going to have a disease named after me.  -Steve Martin", "A successful man is one who makes more money than his wife can spend. A successful woman is one who can find such a man.  -Lana Turner", "How do you get a sweet little 80-year-old lady to say the F word? Get another sweet little 80-year-old lady to yell “BINGO!”  -Anonymous", "My therapist told me the way to achieve true inner peace is to finish what I start. So far I’ve finished two bags of M&Ms and a chocolate cake. I feel better already.  -Dave Barry", "Dogs have masters. Cats have staff.  -Anonymous", "Knowledge is knowing a tomato is a fruit; wisdom is not putting it in a fruit salad.  -Miles Kington", "Why do people say “no offense” right before they’re about to offend you?  -Anonymous", "I love deadlines. I like the whooshing sound they make as they fly by.  -Douglas Adams", "By all means, marry. If you get a good wife, you\’ll become happy; if you get a bad one, you\’ll become a philosopher.  -Socrates", "I asked God for a bike, but I know God doesn\’t work that way. So I stole a bike and asked for forgiveness.  -Emo Phillips", "The best way to lie is to tell the truth . . . carefully edited truth.  -Anonymous", "Do not argue with an idiot. He will drag you down to his level and beat you with experience.  -Greg King ", "The only mystery in life is why the kamikaze pilots wore helmets.  -Al McGuire", "Going to church doesn\’t make you a Christian any more than standing in a garage makes you a car.  -Billy Sundy", "A bargain is something you don\’t need at a price you can\’t resist. - Franklin Jones", "If at first you don’t succeed . . . so much for skydiving.  -Henny Youngman", "Never, under any circumstances, take a sleeping pill and a laxative on the same night.  -Dave Barry", "If you steal from one author, it\’s plagiarism; if you steal from many, it\’s research.  -Wilson Mizner", "If you think nobody cares if you\’re alive, try missing a couple of car payments.  -Flip Wilson", "How is it one careless match can start a forest fire, but it takes a whole box to start a campfire?  -Anonymous", "God gave us our relatives; thank God we can choose our friends.  -Ethel Mumford", "A stockbroker urged me to buy a stock that would triple its value every year. I told him, 'At my age, I don’t even buy green bananas.'  -Claude Pepper", "Some cause happiness wherever they go; others, whenever they go.  -Oscar Wilde", "Patience is something you admire in the driver behind you, but not in one ahead.  -Bill McGlasgen", "I couldn\’t repair your brakes, so I made your horn louder.  -Steven Wright", "Children: You spend the first 2 years of their life teaching them to walk and talk. Then you spend the next 16 telling them to sit down and shut-up.  -Anonymous", "I intend to live forever. So far, so good.  -Steven Wright"]
var quote;
function newQuote() {
  var randomNumber = Math.floor(Math.random() * (quotes.length))
  
  document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
      quote = quotes[randomNumber];
}
newQuote();

function shareTweet(){
  var textToTweet = quote;
  textToTweet = encodeURI(textToTweet)
  window.open("https://twitter.com/intent/tweet?text=" + textToTweet);
}
              
            
!
999px

Console