css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <html lang="en">

<body>
  <div class="container-fluid">
    <div class="row text-center">
      <ul class="dropdownMenu">
        <h1> Random <span id = action> [sports] </span> Quotes</h1>
        <li>[football]</li>
        <li>[basketball]</li>
        <li>[golf]</li>
        <li>[baseball]</li>
        <li>[hockey]</li>
        <li>[soccer]</li>
        <li>[boxing]</li>
        <li>[fitness]</li>
        <li>[tennis]</li>
        <li>[fight]</li>
      </ul>
    </div>
    <div class="container">
      <div class="row text-center">
        <div id="quote" class="col-sm-6 well col-centered">
          Click below for a random quote
        </div>
        <a id="tweetIt" type="button" class="btn-floating btn-lg btn-tw pull-center" target="_blank"><i class = "fa fa-twitter"></i></a>
        <a id="fbIt" type="button" target="_blank" class="btn-floating btn-lg btn-fb pull-center"><i class = "fa fa-facebook"></i></a>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-sm-12">
        <button id="prevBtn" class="btn btn-primary">
        Previous Quote
        </button>
        <button id="quoteBtn" class="btn btn-primary">
        Click Me
      </button>
      </div>
    </div>
  </div>
  </div>
  </div>
</body>

</html>
            
          
!
            
              body
  font-family: 'Slabo 27px', serif
 
.dropdownMenu
  font-size: 30px
  padding: 0
  
li
  list-style: none
  margin: 0
  padding: 0

li 
  display: none 

h1:hover > #action
  text-transform: uppercase
  
h1:hover + li
  display: inline-block


.col-centered 
  float: none
  margin: 0 auto

#quoteBtn, 
#prevBtn, 
  margin-top: 10px
  
.well 
  margin-bottom: 10px


            
          
!
            
              var storedQuotes = [];
var footballQuotes = [ 
  '“I\’ve never known anybody to achieve anything without overcoming adversity.” -Lou Holtz',
  '“Today I will do what others won\’t, so tomorrow I can accomplish what others can\’t.” –Jerry Rice',
  '“The man who complains about the way the ball bounces is likely the one who dropped it.” –Lou Holtz',
  '“I never left the field saying I could have done more to get ready, and that gives me peace of mind.” –Peyton Manning',
  '“One man practicing sportsmanship is far better than 50 preaching it.” -Knute Rockne',
  '“To succeed, you need to find something to hold on to, something to motivate you, something to inspire you.” –Tony Dorsett',
  '“Difficulties in life are intended to make us better, not bitter.” –Dan Reeves',
 '"Perfection is not attainable, but if we chase perfection, we can catch excellence." -Vince Lombardi', 
  '“The difference between a successful person and others is not a lack of strength, not a lack of knowledge, but rather in a lack of will.” -Vince Lombardi',
  '“Without self-discipline, success is impossible, period.” -Lou Holtz',
  '“Ability is what you’re capable of doing. Motivation determines what you do. Attitude determines how well you do it.” -Lou Holtz',
  '“It\’s not the will to win that matters—everyone has that. It\’s the will to prepare to win that matters.” Paul \“Bear\” Bryant',
'“A good coach will make his players see what they can be rather than what they are” -Ara Parseghian',
  
]

var basketballQuotes = [
  '“Nobody roots for Goliath.” -Wilt Chamberlain',
  '“You can\’t get much done in life if you only work on the days when you feel good.” -Jerry West',
  '“Don\’t give up. Don\’t ever give up.” -Jim Valvano',
  '“I\’ve got a theory that if you give 100 percent all of the time, somehow things will work out in the end.” -Larry Bird',
  '“I\’ve missed more than 9,000 shots in my career. I\’ve lost almost 300 games. 26 times, I\’ve been trusted to take the game winning shot and missed. I\’ve failed over and over and over again in my life. And that is why I succeed.” -Michael Jordan',
  '“Never give up! Failure and rejection are only the first step to succeeding.” -Jim Valvano',
  '"Excellence is not a singular act but a habit. You are what you do repeatedly." -Shaquille O\'Neal',
  
]

var golfQuotes = [
  '“The more I practice, the luckier I get.” -Gary Player',
  '“Sometimes the biggest problem is in your head. You\’ve got to believe.” -Jack Nicklaus',
  '“If you can\’t outplay them, outwork them.” -Ben Hogan',
  '"I figure practice puts your brains in your muscles." -Sam Snead'
]

var baseballQuotes = [
  '“Every strike brings me closer to the next home run.” -Babe Ruth',
  '“There may be people that have more talent than you, but there\'s no excuse for anyone to work harder than you do.” -Derek Jeter',
  '“It ain\’t over till it\’s over.” -Yogi Berra',
  '“Show me a guy who\'s afraid to look bad, and I\'ll show you a guy you can beat every time.” -Lou Brock',
]

var hockeyQuotes = [
  '“Procrastination is one of the most common and deadliest of diseases and its toll on success and happiness is heavy.” -Wayne Gretzky',
  '“You miss 100 percent of the shots you don\’t take. – Wayne Gretzky" -Michael Scott',
]

var soccerQuotes = [
  '“I\’ve worked too hard and too long to let anything stand in the way of my goals. I will not let my teammates down, and I will not let myself down.” -Mia Hamm'
]

var boxingQuotes = [
  '"If you even dream of beating me you\'d better wake up and apologize." -Muhammad Ali',
  '“The more you sweat in practice, the less you bleed in battle.” -Unknown',
  '"Everybody has a plan until they get punched in the face." -Mike Tyson',
]

var fitnessQuotes = [
  '“If it doesn\’t challenge you, it won\’t change you.” -Fred Devito',
  '“You have to remember something: Everybody pities the weak; jealousy you have to earn.” -Arnold Schwarzenegger',
  '“Age is no barrier. It\’s a limitation you put on your mind.” -Jackie Joyner-Kersee',
  '“Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.” -Arnold Schwarzenegger',
  
]  

var tennisQuotes = [
  '“What makes something special is not just what you have to gain, but what you feel there is to lose.” -Andre Agassi',
  '“You are never really playing an opponent. You are playing yourself, your own highest standards, and when you reach your limits, that is real joy.” -Arthur Ashe',
]

var fightQuotes = [
  '"If you always put limits on everything you do, physical or anything else, it will spread into your work and into your life. There are no limits; there are only plateaus, and you must not stay there. You must go beyond them." -Bruce Lee',
  '“Going in one more round when you don\’t think you can – that\’s what makes all the difference in your life.” -Rocky Balboa',
  '“I hated every minute of training, but I said, \‘Don\’t quit. Suffer now, and live the rest of your life as a champion.\’” -Muhammad Ali',
  '“Only a man who knows what it is like to be defeated can reach down to the bottom of his soul and come up with the extra ounce of power it takes to win when the match is even." -Muhammad Ali',
  '“I fear not the man who has practiced 10,000 kicks once, but the man who has practiced one kick 10,000 times.” -Bruce Lee',
]
  
var quotesCombined = [footballQuotes, basketballQuotes, golfQuotes, baseballQuotes, hockeyQuotes, soccerQuotes, boxingQuotes, fitnessQuotes, tennisQuotes, fightQuotes]



$(document).ready (function () {
   $('#prevBtn').hide();
   });  

$("#quoteBtn").on("click", function() {
    var x = Math.floor(Math.random() * quotesCombined.length);
    var y = Math.floor(Math.random() * quotesCombined[x].length);
  $("#quote").html(quotesCombined[x][y]);
  var currentQuote = quotesCombined[x][y];
   storedQuotes.push(currentQuote);
  console.log(storedQuotes);
  
    var twitterLink = "https://twitter.com/intent/tweet/?text=" + currentQuote;
    if (storedQuotes.length >= 2) {
          $('#prevBtn').show();
    } 

    $("#tweetIt").attr("href", twitterLink);
    $("#quoteBtn").html("Next random quote");
   


});

$("#prevBtn").click(function() {
  var lastQuote = storedQuotes[storedQuotes.length-2];
  storedQuotes.pop();
  console.log("Prev---");
  console.log(lastQuote);
  $("#quote").html("Click below for a random quote");
  $("#quote").html(lastQuote);
});



            
          
!
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