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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource


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


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.


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.


  <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", `"${newQuote}" Look at this cool quote generator @kalenenc made at`);