Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">





<div class="container-fluid">
    <h2 class=text-center>Random Quote Machine</h2>
  
  <h3> Below are some of my favorite quotes from Brian Tracy's book, <i>Maximum Achievement: Strategy and Skills that Will Unlock Your Hidden Powers to Succeed</i>. Generate a random quote that may inspire your life!
  <div class = "block text-center">
    
    
  
 
    <div class = "col-xs-12 well randomQuote">
      The quote will go here
    </div>
    <div class="col-xs-12 well authorName">
     --author name here  
    </div>

  <div class = "row">
    <div class="col-md-6">
      <div class="well">
      <button id = "quotebutton" class = "btn btn-primary text-right">
        Get Quote
      </button>
      </div>
  </div>
    
     <div class="col-md-6">
       <div class="well">
    <button id = "tweetButton" class = "btn btn-primary text-right"> <i class="fa fa-twitter fa-lg" id="twittericon" aria-hidden="true"></i>
        Tweet
      </button>
      
       </div>
    </div>
    </div>
  </div>
  
</div>

            
          
!
            
              h2{
 margin-top: 50px;
 font-family: 'Anton', sans-serif;

  
}

h3{
  margin-top: 40px;
  padding:20px;
  font-size: 1em;

}
.block{
  background-color: #00CED1;
  width: 1000px;
  height: 350px;
  padding-top: 50px;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 80px;
  text-align:center;
  font-family: 'El Messiri', sans-serif;
  
}

#quotebutton{
  margin-left: 50px;
  background-color: #FFA07A;
  border: none;
  margin-top: 50px;
}

#tweetButton{
  margin-left: 50px;
  border: none;
  margin-top: 50px;
}



.randomQuote{
  padding-top: 30px;
  font-size: 1.5em;
}

.authorName{
  padding-top: 10px;
  text-align: right;
}


            
          
!
            
              

$(document).ready(function() {
  
  function getQuote() {
  var quotes = ["Whatever you can hold in your mind on a continuing basis, you can have", "Take every opportunity to say and do things that make people feel more valuable.", "The most most successful and happy men and women are those who make other people feel good about themselves when they are with them.", "When you go through life raising the self-esteem of others, opportunities will open up before you, and people will help you in ways you cannot now imagine.", "You can learn to overcome the fear of failure by being absolutely clear about your goals, and by accepting that temporary setbacks and obstacles are the inevitable price you pay to achieve any great success in life.", "If you see yourself new as you wish to be, and you walk, talk, and behave as the very best person you can imagine yourself being, your dominant thoughts and goals will materialize as your reality.", "You will become what you think about most of the time."];
    var author = ["--Brian Tracy"];
    
    var randomNum = Math.floor((Math.random()*quotes.length));
    var quoteText = quotes[randomNum];
    var randomAuthor = author;
    $(".randomQuote").text(quoteText);
    $(".authorName").text(randomAuthor);
  }
  
     $("#quotebutton").on("click", function() {
   getQuote();
}); 
                                               
  });

 

    
    



            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console