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 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.

            
              <div class="container-fluid text-center">
  <div class="title-text"> <!--Page heading and sub-heading-->
    <div><!--Header text only-->
      <h1>
      Yearbook Quote Generator
      </h1>
      <p1>
      Wisdom from the Bishop Stang High School Class of '07
      </p1>
    </div>
  </div>
  <div class="inputoutput"> <!--buttons and well-->
    <button class="getQuote button">
      New Quote
    </button>
    <div class="well"><!--Text Well-->
        <span class="quote">You know who really has life figured out?</span><br/>
        <span class="author">18-year-olds.</span>
    </div>
  </div>
</div>
            
          
!
            
              body {
  background-color: #C0C0C0;
}

.container-fluid {
  padding:0;
  height: 100vh;
}

.title-text {
  height: 33vh;
  font-family: Serif;
  color: white;
  padding:5% 0;
  margin:0;
  background-color:#800000;
}

.button {
  margin: 32px;
  background-color: #800000;
  color: white;
  border: none;
  text-decoration: none;
  font-family: serif;
}

.quote {
  font-family: serif;
  color: #800000;
}

.author {
  font-family: serif;
  color: #800000;
}
            
          
!
            
              $(document).ready(function(){
  function getQuote(){
    var quotes = [
      "If you can\'t convince them, confuse them",
      "Live as if you were to die tomorrow, learn as if you were to live forever",
      "Courage is walking naked through a cannibal village",
      "Maybe the past is like an anchor holding us back. Maybe you have to let go of who you were to become who you will be",
      "The dictionary is the only place where success comes before work",
      "You can be anywhere when your life begins. You don\'t know it, but it\'s already happening",
      "He who has a why can bear almost any how",
      "To dance is to be out of yourself. Larger, more beautiful, more powerful. This is power, it is glory on earth and it is yours for the taking",
      "The future belongs to those who believe in the beauty of their dreams",
      "Don't gain the world and lose your soul, wisdom is better than silver or gold",
      "Talent wins games but teamwork and intelligence win championships",
      "How \'bout them Cowboys",
      "It is hard to fail, but it is worse never to have tried to succeed",
      "All is fair is love & basketball",
      "So let me say before we part: So much of me is made of what I learned from you. You\'ll be with me like a handprint on my heart. And now whatever way out stories end, I know you have rewritten mine by being my friend",
      "Every man\'s life ends the same way. It is only the details of how he lived and how he died that distinguish one man from another",
      "Wherever you go, go with all your heart",
      "A girl should be two things: classy and fabulous",
      "No guts no glory",
      "I wonder what mother would think of my becoming a pirate",
      "Clear eyes, full heart, can\'t lose",
      "To his dog, every man is Napoleon, hence the constant popularity of dogs",
      "Lana: \'So what are you, man or Superman?\' Clark: \'Haven't figured it out yet\'",
      "When we were little we dreamt of what we wanted to be when we grew up, now we have the chance to set out and accomplish those dreams",
      "Leadership is a potent combination of strategy and character. But if you must be without one, be without the strategy",
      "Stay out stay clear but stay close, friends, foes, God only knows, Let\'s be the thorn on the rose, Time flies, make a statement, strike a pose",
      "The hardest part isn\'t finding what we need to be, it\'s being content with who we are",
      "Do or do not, there is no try",
      "You don\'t want to get mixed up with a guy like me. I\'m a loner. A rebel",
      "Well, it\'s one louder, isn\'t it? It\'s not ten. You\'re on ten here, all the way up, all the way up, all the way up, you\'re on ten on your guitar. Where can you go from there? Where?",
      "Freedom consists not in doing what we like, but in having the right to do what we ought",
      "Have courage for the great sorrows of life and patience for the small ones; and when you have laboriously accomplished your task, go to sleep in peace. God is awake",
      "What? Wonky is a word. I read it on the internet",
      "Sorrow is knowledge, those that know the most must mourn the deepest, the tree of knowledge is not the tree of life",
      "Everything is relative: there is no right and wrong, just shades of gray which prevent progress. No matter how straight the road, if you zig-zag and back-track you never get anywhere",
      "Live well, laugh often, love much",
      "We all take different paths in life. But no matter where we go, we take pieces of each other with us everywhere",
      "There\'s no use in complaning. No one can really ever walk in your shoes",
      "He who takes his life for granted is a pencil without an eraser",
      "To learn to succeed, you must first learn to fail",
      "I speak my mind cuz bitin\' my tongue hurts",
      "When we are motivated by goals that have deep meaning, by dreams that need completion, by pure love that needs expressing, then we truly live life",
      "The bottom line is that at the end of the day your mother would rather have you marry a hockey player than any other athlete from any other sport",
      "Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment",
      "I feel that the period will sooner or later arrive when I must abandon life and reason together, in some struggle with the grim phantasm, fear",
      "You couldn\'t fool your own mother on the foolingest day of your life with an electrified fooling machine",
      "Mythic",
      "Expect nothing, live frugally on surprise",
      "Leaders aren\'t born, they are made. And they\'re made just like anything else, through hard work. And that\'s the price we\'ll have to pay to achieve that goal",
      "Life is not measured by the number of breaths we take, but by the moments that take our breath away",
      "Rule number 76: No excuses, play like a champion",
      "Every new beginning comes from some other beginning's end",
    ];
    
    var authors = [
      "- Harry Truman",
      "- Mahatma Gandhi",
      "- Sam Levenson",
      "- Candace Bushnell",
      "- Vince Lombardi",
      "- Crazy/Beautiful",
      "- Friedrich Nietzsche",
      "- Agnes De Mille",
      "- Eleanor Roosevelt",
      "- Bob Marley",
      "- Michael Jordan",
      "- Jimmy Johnson",
      "- Theodore Roosevelt",
      "- Love & Basketball",
      "- Wicked",
      "- Ernest Hemingway",
      "- Confucius",
      "- CoCo Chanel",
      "- Unknown",
      "- Unknown",
      "- Friday Night Lights",
      "- Aldous Huxley",
      "- Smallville",
      "- Unknown",
      "- Gen. H. Norman Schwartzkopf",
      "- Titiyo",
      "- Unknown",
      "- Yoda",
      "- Pee Wee Herman",
      "- Nigel Tufnel",
      "- Pope John Paul II",
      "- Victor Hugo",
      "- Andrew Sayles",
      "- Lord Byron",
      "- Unknown",
      "- Unknown",
      "- Tim McGraw",
      "- Unknown",
      "- C.S. Lewis",
      "- Michael Jordan",
      "- Unknown",
      "- Greg Anderson",
      "- Barry Melrose",
      "- Unknown",
      "- Edgar Allen Poe",
      "- Homer Simpson",
      "- Andrew Sayles-witch",
      "- Alice Walker",
      "- Vince Lombardi",
      "- Vicki Corona",
      "- Wedding Crashers",
      "- Semisonic",
    ];
    
    var randomNum = Math.floor((Math.random()*quotes.length));
    var randomQuote = quotes[randomNum];
    var randomAuthor = authors[randomNum];
    
    $(".quote").text(randomQuote);
    $(".author").text(randomAuthor);
  }
  
  $(".getQuote").on("click", function(){
    getQuote();
  });
});

//Coded with help from Dylan Israel's tutorial, found here: https://www.youtube.com/watch?v=xFW7ySq5aAc&t=2s
            
          
!
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.
Loading ..................

Console