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.

  <h1>Random Quote Generator</h1>
  <button>New Quote</button>
  <h2 class="quote-container">"<span class="quote"></span>"</h2>


  <a class="twitterShareButton" target="_blank">
      <div class="twitterText">Share!</div>
      <i class="fa fa-twitter " aria-hidden="true"></i>
              :root {
  --gutter: 20px;
  --orange: #FE5F55;
  --basicallyWhite: #F7F7FF;
  --lightBlue: #BDD5EA;
  --blue: #577399;
  --grey: #495867;

*:after {
  margin: 0;
  padding: 0;

body {
  background: var(--lightBlue);
  font-family: 'Open Sans', sans-serif;

main {
  border: 3px solid var(--orange);
  width: 50%;
  margin: 15% auto 0 auto;
  text-align: center;
  padding: var(--gutter);
  border-radius: 5px 50px;
  background-color: var(--basicallyWhite);

h1 {
  padding-bottom: var(--gutter);
  color: var(--blue);

button {
  margin-bottom: var(--gutter);
  padding: 15px;
  font-size: 15px;
  border-radius: 10px;
  background-color: var(--orange);
  border: none;
  color: white;
  font-weight: bold;

.quote {
  font-style: italic;
  color: var(--grey);

.quote-container {
  font-style: italic;
  color: var(--grey);

.twitterText {
  font-size: 0.5em;
  text-align: center;

.twitterShareButton {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: var(--gutter);
  font-size: 2em;
  text-align: center;
  text-decoration: none;
  color: var(--blue);
  font-weight: bold;

@media only screen and (max-width: 500px) {
  main {
    width: 88%;
    margin-top: 45%;
              var quotes = ["The best preparation for tomorrow is doing your best today",
  'We must let go of the life we have planned, so as to accept the one that is waiting for us',
  'Happiness is not something you postpone for the future, it is something you design for the present',
  'Put your heart, mind, and soul into even your smallest acts. This is the secret of success.', "If opportunity doesn't knock, build a door",
  "Believe you can and you're halfway there",
  "We know what we are, but known not what we may be",
  "A hero is someone who has given his or her life to something bigger than oneself",
  "Let us remember: One book, one pen, once child, and once teacher can change the world",
  "It is during our darkest moments that we must must focus to see the light",
  "We know that we are, but know not what we may be",
  "No act of kindness, no matter how small, is ever wasted",
  "Thinking: the talking of the soul with itself",
  "Love is a fruit in season at all times, and within reach of every hand",
  "Keep all special thoughts and memories for lifetime to come. Share these keepsakes with others to inspire hope and build from the past, which can bridge to the future",
  "From its brilliancy everything is illuminated",
  "Two roads diverged in a wood and I - took the one less traveled by, and that has made all the difference",
  "No matter what people tell you, words and ideas can change the world",
  "Whoever is happy will make others happy too",
  "Don't judge each day by the harvest you reap but by the seeds that you plant",
  "From a small seed a might trunk may grow",
  "The power of imagination us infinite",
  "Do your little bit of good where you are; it's those little bits of good put together that overwhelm the world",
  "Happiness is the natural flower of duty",
  "Grace is the beauty of form under the influence of freedom",
  "Hope is but the dream of those who wake",
  "Reading was very important to me as a kid. It was very inspirational to me. I went to a school where that wasn't encouraged so much, but my parents encouraged that, and it has made me part of who I am. ",
  "It is by acts and not ideas that people live",
  "Noble deed that are concealed are most esteemed",
  "Noble deeds that are concealed are most esteemed. ",
  "Most of us have far more courage than we ever dreamed we possessed", "Ideas shape the course of history",
  "A compliment is something like a kiss through a veil",
  "Of all things visible, the highest is the heaven of the fixed stars",
  "What we need is more people who specialize in the impossible"

var button = document.querySelector('button');
var quote = document.querySelector('.quote');

var firstRandomNum = Math.floor(Math.random() * (quotes.length - 1));
var newQuote = quotes[firstRandomNum];
quote.innerHTML = newQuote;

button.addEventListener('click', function() {
  var randomNum = Math.floor(Math.random() * (quotes.length - 1));
  var newQuote = quotes[randomNum];
  quote.innerHTML = newQuote;


var twitter = document.querySelector('.twitterShareButton');
twitter.setAttribute("href", `https://twitter.com/intent/tweet?text="${newQuote}" Look at this cool quote generator @kalenenc made at https://bit.ly/2ifx4mg`);
🕑 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.