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.

            
              <!--
The Reset Button resets everything to the original position
The Asthetic Button changes the color
The Quote Button generates the next quote
.col-xs-2 helps center .col-xs-8
.col-xs-8 contains the quote
.col-xs-4 holds a picture of the person
-->

<body class="bodyColor">
  
<!--If you want to test these features just uncomment them.-->
  <!--This is the Reset button-->
  <!-- <button id="reset">
    <span>
      Reset
    </span>
  </button> -->
  
  <!--This is the Asteic button-->
  <!-- <button id="asthetic">
    <span>
      Asthetic
    </span>
  </button> -->
  
  <!--This is the Quote button-->
  <!-- <button id="triggerQ">
    <span>
      Quote
    </span>
  </button> -->
  
  <!--  -->
  <div class="container">
    
    <!--col-xs-2 is generated before col-xs-8 so it give the appearence that col-xs-8 is centered-->
    <div class="col-xs-2">
    </div>
    
    <!--col-xs-8 contains the quote and title card-->
    <div class="col-xs-8">
      <br>
      <div class="jumbotron backjubo">
        
        <!--This is the title card-->
        <div class="container" id="title">
          <div class="col-xs-12">
            <h1 style="text-align:center;">
              Random Quote Generator
            </h1>
            <p style="text-align:center;">(Click here to get a quote)</p>
          </div>
        </div>

        <!--This is where the quotes are generated-->
        <div class="container" id="quote"></div>
        
        <!--This is the Tweet button-->
        <a id="tweet" target="_new"><button class="col-xs-4 btn btn-primary">Tweet</button></a>
        
        <!--This is for right aligning the Next button-->
        <div class="col-xs-4"></div>
        
        <!--This is the Next button-->
        <button class="col-xs-4 btn btn-warning" id="next">Next</button>
      </div>
    </div>
    
    <!--col-xs-4 contains an image-->
    <div class="col-xs-4">
      <br>
      <div class="jumbotron backjubo">
        <div class="container">
          <div class="col-xs-12 jubo" id="picWidth" style="padding:0px;margin:0px;border:0px;"></div>
          <img id="picture" src="" alt=""></img>
        </div>
      </div>
    </div>
  </div>
</body>
            
          
!
            
              .bodyColor {background-color:red;}
.backjubo {background-color:white;}
            
          
!
            
              //This gets everything ready for the Quote Machine to work
$(document).ready(function() {
  $("#quote").hide();
  $(".col-xs-4").hide();
  $(".backjubo").css("background-color","yellow");
});

//This loads everything for the quote to work properly
$("#title").click(function() {
  $(".col-xs-2").hide();
  $("#quote").show();
  $(".col-xs-4").show();
  $("#picWidth").show();
  $("#picture").outerHeight(
    $("#quote").outerHeight());
  $("#picture").outerWidth(
    $("#picWidth").outerWidth());
  $("#title").hide();
  $("#picture").show();
  $(".backjubo").css("background-color","white");
});

//This is a Reset button for test purposes
$("#reset").click(function() {
  $("#quote").hide();
  $("#title").show();
  $(".col-xs-4").hide();
  $(".col-xs-2").show();
  $("#picWidth").show();
  $(".bodyColor").css("background-color","red");
  backItter = 1;
  $(".backjubo").css("background-color","yellow");
  juboItter = 1;
});
                  
//This is the quote generator
$("#title, #quote, #next, #triggerQ").click(function() {
 //these are generated each time
  var quote;
  var rand;
  
  //this comes from the SWITCH
  var randomizedQuote;
  var quotedFrom;
  var picLink;

  //rand generates a random number which goes into the SWITCH and selects a quote
  rand = Math.floor(Math.random() * (20 - 1 + 1)) + 1;
  
  //depending on the output from rand SWITCH selects values for 3 varibles
  switch (rand) {
    case 1:
      randomizedQuote = "Be yourself; everyone else is already taken.";
      quotedFrom = "Oscar Wilde";
      picLink = "http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NTU2MzE2NDA1MjcwMDI3.jpg";
      break;
    case 2:
      randomizedQuote = "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.";
      quotedFrom = "Albert Einstein";
      picLink = "https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg";
      break;
    case 3:
      randomizedQuote = "You know you're in love when you can't fall asleep because reality is finally better than your dreams.";
      quotedFrom = "Dr. Seuss";
      picLink = "https://images-na.ssl-images-amazon.com/images/I/51Rmbpdgh3L._UX250_.gif";
      break;
    case 4:
      randomizedQuote = "Be the change that you wish to see in the world.";
      quotedFrom = "Mahatma Gandhi";
      picLink = "http://a1.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTIwNjA4NjMzODE4MjIwMDQ0.jpg";
      break;
    case 5:
      randomizedQuote = "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.";
      quotedFrom = "Maya Angelou";
      picLink = "https://www.poets.org/sites/default/files/styles/286x289/public/images/biographies/mangelou.jpg?itok=i7zceaOs";
      break;
    case 6:
      randomizedQuote = "Always forgive your enemies; nothing annoys them so much.";
      quotedFrom = "Oscar Wilde";
      picLink = "http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NTU2MzE2NDA1MjcwMDI3.jpg";
      break;
    case 7:
      randomizedQuote = "Live as if you were to die tomorrow. Learn as if you were to live forever.";
      quotedFrom = "Mahatma Gandhi";
      picLink = "http://a1.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTIwNjA4NjMzODE4MjIwMDQ0.jpg";
      break;
    case 8:
      randomizedQuote = "To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.";
      quotedFrom = "Ralph Waldo Emerson";
      picLink = "https://upload.wikimedia.org/wikipedia/commons/d/d5/Ralph_Waldo_Emerson_ca1857_retouched.jpg";
      break;
    case 9:
      randomizedQuote = "It is better to be hated for what you are than to be loved for what you are not.";
      quotedFrom = "André Gide";
      picLink = "http://www.scottedelman.com/wordpress/wp-content/uploads/2015/01/AndreGide.jpg";
      break;
    case 10:
      randomizedQuote = "There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.";
      quotedFrom = "Albert Einstein";
      picLink = "https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg";
      break;
    case 11:
      randomizedQuote = "Whenever you find yourself on the side of the majority, it is time to reform.";
      quotedFrom = "Mark Twain";
      picLink = "http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU1MTUzNTA5OTAz.jpg";
      break;
    case 12:
      randomizedQuote = "The man who does not read has no advantage over the man who cannot read.";
      quotedFrom = "Mark Twain";
      picLink = "http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU1MTUzNTA5OTAz.jpg";
      break;
    case 13:
      randomizedQuote = "I have not failed. I've just found 10,000 ways that won't work.";
      quotedFrom = "Thomas A. Edison";
      picLink = "http://a1.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE4MDAzNDEwNTEzMDA0MDQ2.jpg";
      break;
    case 14:
      randomizedQuote = "Imagination encircles the world.";
      quotedFrom = "Albert Einstein";
      picLink = "https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg";
      break;
    case 15:
      randomizedQuote = "Never put off till tomorrow what may be done day after tomorrow just as well.";
      quotedFrom = "Mark Twain";
      picLink = "http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU1MTUzNTA5OTAz.jpg";
      break;
    case 16:
      randomizedQuote = "If you judge people, you have no time to love them.";
      quotedFrom = "Mother Teresa";
      picLink = "http://a2.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE1ODA0OTcxODAxNTQ0MjA1.jpg";
      break;
    case 17:
      randomizedQuote = "For every minute you are angry you lose sixty seconds of happiness.";
      quotedFrom = "Ralph Waldo Emerson";
      picLink = "https://upload.wikimedia.org/wikipedia/commons/d/d5/Ralph_Waldo_Emerson_ca1857_retouched.jpg";
      break;
    case 18:
      randomizedQuote = "If you can't explain it to a six year old, you don't understand it yourself.";
      quotedFrom = "Albert Einstein";
      picLink = "https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg";
      break;
    case 19:
      randomizedQuote = "Sometimes the questions are complicated and the answers are simple.";
      quotedFrom = "Dr. Seuss";
      picLink = "https://images-na.ssl-images-amazon.com/images/I/51Rmbpdgh3L._UX250_.gif";
      break;
    case 20:
      randomizedQuote = "I'm not upset that you lied to me, I'm upset that from now on I can't believe you.";
      quotedFrom = "Friedrich Nietzsche";
      picLink = "https://upload.wikimedia.org/wikipedia/commons/1/1b/Nietzsche187a.jpg";
      break;
  }

  //quote stitches everthing into HTML
  quote = "<div class='col-xs-12'><p class='quoteColor' style='font-size:30px; text-align:center;'><b>" + randomizedQuote + "</b><br> - " + quotedFrom + "</p></div>";
  $("#quote").html(quote);
  
  //this gives the picture its attributes
  $("#picture").attr("src", picLink);
  $("#picture").attr("alt", quotedFrom);

  //This is the Tweet button
  var spaceOut = randomizedQuote.replace(" ","%20");
  var spaceQuote = quotedFrom.replace(" ","%20");
  var stitchedTweet="https://twitter.com/intent/tweet?hashtags=quotes,RandomQuoteMachine,FreeCodeCamp&related=freecodecamp&text="+spaceOut+"%20-%20"+spaceQuote+"%20@FreeCodeCamp";
  $("#tweet").attr("href", stitchedTweet);
});

//This is the Asthetic's generator
var backItter = 1;
//var juboItter = 1; jubo items have become obsolete
$("#title, #quote, #next, #asthetic").click(function(){
  var backColour="";
  //var juboColour="";
    
  //This SWITCH selects values for backColour
  //The colour is chosen through a loop
  //each number coresponds to a different colour
  switch(backItter){
      /* case 1:
        backColour = "orange";//too bright
        break; */
      /* case 2:
        backColour = "yellow";//too bright
        break; */
      case 1:
        backColour = "green";
        break;
      /* case 4:
        backColour = "blue";//too bright
        break; */
      case 2:
        backColour = "indigo";
        break;
      /* case 6:
        backColour = "violet";//too bright
        break; */
      case 3:
        backColour = "red";
        backItter = 0;
        break;
    }
   
  //This changes the colour of the background
  $(".bodyColor").css("background-color",backColour);
  
  //This changes the colour of the text
  $(".quoteColor").css("color",backColour);
    backItter += 1;
  
  //This changes the colour of the Next button
  $(".btn-warning").css("background-color",backColour);
  $(".btn-warning").css("border-color",backColour);
  
  //This is used to determine the height and width of the picture
  $("#picture").show();
  $("#picture").outerHeight(
    $("#quote").outerHeight());
  $("#picture").outerWidth(
    $("#picWidth").outerWidth());
  
  //This has been excluded changing the color of the text looked better than changing the backColor
  //What this did was change the colour of the jubo
  //when the background and the jubo both changed it didnt look that great
  /* switch(juboItter){
      case 1:
        juboColour = "green";
        break;
      case 2:
        juboColour = "blue";
        break;
      case 3:
        juboColour = "indigo";
        break;
      case 4:
        juboColour = "violet";
        break;
      case 5:
        juboColour = "red";
        break;
      case 6:
        juboColour = "orange";
        break;
      case 7:
        juboColour = "yellow";
        juboItter = 0;
        break;
    }
    
    $(".backjubo").css("background-color",juboColour);
    juboItter += 1; */
});
            
          
!
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