cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <section>
  <div id="bodyContainer">
    <div id="introCont">
      <h1>Random Funny Quotes</h1>
    </div>
    <div id="quoteCont">
      <button class="btn green" type="button">Get a Quote!</button>
      <div id="textCont">
      <p id="quote"></p>
      <p id="author"></p>
      </div>
    </div>
  </div>
</section>
            
          
!
            
              body {
  text-align: center;
  margin:0;
  background-color:#eee;
}
section{
  width:100%;
  height:auto;
  padding:1% 0 1% 0;
}
#bodyContainer{
 
}
#introCont, #quoteCont{
  width:80%;
  margin:0.4% auto;
  background-color:#FFF;
  border-radius:6px;
  box-shadow: 5px 5px 10px #CCC;
  border:1px solid;
  border-color:#eee;
}
h1{
font-family: "Lucida Bright",Georgia,serif
 font-weight:bold;
 font-size:250%; 
 text-align:center;
 font-weight:bold;
}

p{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:normal;
  text-align:center;
}

#introCont h1{
  margin:2%;
  color:#666;
}

#quoteContainer p{
  height:150px;
}

.btn {
  border-radius: 5px;
  padding: 5px 15px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}
#textCont{
  width:70%;
  margin:3% auto;
  min-height:50px;
  vertical-align:middle;
  border-color:#eee;
}

#textCont p{
  margin:2%;
}
.btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}

.green {
  background-color: #2ecc71;
  box-shadow: 0px 5px 0px 0px #15B358;
}

.green:hover {
  background-color: #48E68B;
  color:#FFF;
}

#author{
 text-transform:capitalize;
}


            
          
!
            
              $(document).ready(function(){
function allTitleCase(inStr) { 
  return inStr.replace(/\w\S*/g,function(tStr) { 
    return tStr.charAt(0).toUpperCase() + tStr.substr(1).toLowerCase(); }); }
  
  var getQuote = function(){
    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",
  "Always borrow money from a pessimist. He won’t expect it back.@Oscar Wilde",
  "First the doctor told me the good news: I was going to have a disease named after me. @Steve Martin",
  "Dogs have masters. Cats have staff. @Anonymous",
  "If you steal from one author, it’s plagiarism; if you steal from many, it’s research. @ WILSON MIZNER",
  "Some cause happiness wherever they go; others, whenever they go. @Oscar Wilde",
  "When you go into court you are putting your fate into the hands of twelve people who weren’t smart enough to get out of jury duty. @NORM CROSBY",
  "Those people who think they know everything are a great annoyance to those of us who do. @ISAAC ASIMOV",
  "The trouble with being punctual is that nobody’s there to appreciate it. @ FRANKLIN P. JONES",
  "According to most studies, people’s number one fear is public speaking. Number two is death. Death is number two! Does that sound right? That means to the average person, if you go to a funeral, you’re better off in the casket than doing the eulogy. @JERRY SEINFELD",
  "An archaeologist is the best husband a woman can have; the older she gets the more interested he is in her. @AGATHA CHRISTIE"
];
var numOfQuotes = quotes.length;
var randomQuote = quotes[Math.floor((Math.random() * numOfQuotes) + 0)];
var splitQuote = randomQuote.split("@");

var quote = splitQuote[0];
var author = allTitleCase(splitQuote[1]);

$("#quote").text('\"'+quote+'\"');
$("#author").text("~ "+author+" ~");
};
  
$(".btn").ready(getQuote);  
$(".btn").on("click",getQuote);
});
            
          
!
999px
Loading ..................

Console