123

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.

            
              <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">

<div class="container-fluid">

  <div class="row text-center">
    <h2>How I Met Your Mother Quotes</h2>
  </div>

  <div class="row">
    <div class="col-xs-6 quoteBox well">
      <div id="quote" class="quote">
        Click "Suit Up!" to get a random quote.
      </div>

      <div id="char" class="character">
      </div>
    </div>

  </div>

  <div class="row text-center">
    <div class="col-xs-12">
      <button id="getQuote" class="btn btn-info">
        Suit Up!
      </button>
      <button id="tweet" class="btn btn-primary"> <i class="fa fa-twitter"></i> Tweet
      </button>
    </div>
  </div>

  <i class="wi wi-umbrella"></i>
  
</div>
            
          
!
            
              body {
  margin-top: 50px;
  background: #474747;
}

h2 {
  color: #ffff00;
}

.quote {
  text-align: center;
}

.character {
  text-align: right;
}

.quoteBox {
  text-align: center;
  background-color: gray;
  color: #191919;
  margin-left: 25%;
}

.wi {
  color:  #ffff00;
  font-size:  150px;
  margin-top:  50px;
}

.container-fluid {
  text-align: center;
}
            
          
!
            
              $(document).ready(function() {
  var quoArr = [
    ['"I peed in an alley which happened to have a church which I did not see because I was drunk!"', "-Barney"],
    ['"The best I can give you is a fake smile and dead eyes."', "-Robin"],
    ['"Your package has always been big enough. You may not realize this Marshall Eriksen, but you’ve got a huge package!"', "-Lily"],
    ['"We struggle so hard to hold on to these things that we know are gonna disappear eventually. And that’s really noble."', "-Lily"],
    ['"Whenever I’m sad, I stop being sad and be awesome instead."', "-Barney"],
    ['"Because sometimes even if you know how something’s gonna end that doesn’t mean you can’t enjoy the ride."', "-Ted"],
    ['"The littlest thing can cause a ripple effect that changes your life. "', "-Ted"]
    ['"That’s life, you know, we never end up where you thought you wanted to be."', "-Marshall"],
    ['"Aw, man!"', "-The Blitz"],
    ['"Sometimes we search for one thing but discover another."', "-Barney"], ['"Dude, lots of chicks think that architects are hot. Think about that, you create something out of nothing. You’re like God. There is no one hotter than God."', "-Barney"], ['"OK, here’s my thing – if gay guys start getting married, then suddenly the whole world’s gonna be doing it. That’s how it works: they start something, then six months later, everyone follows. Like… now everyone gets manicures."', "-Barney"], ['"We’re going to get older whether we like it or not, so the only question is whether we get on with our lives, or desperately cling to the past."', "-Ted"], ['"God, it’s me, Barney. What up? I know we don’t talk much, but I know a lot of girls call out your name because of me. Awesome."', "-Barney"], ['"Everyone has an opinion on how long it takes to recover from a breakup. "', "-Ted"], ['"I wound up shame-eating the whole pizza. I woke up all greasy and sweaty. My sheets looked like what they wrap Deli sandwiches in. Maybe I should join a gym. Do you go to a gym?"', "-Ted"], ['"There are a lot of little reasons why the big things in our lives happen."', "-Ted"], ['"Look, you can’t design your life like a building. It doesn’t work that way. You just have to live it… and it’ll design itself."', "-Lily"], ['"You can’t just skip ahead to where you think your life should be."', "-Lily"], ['"It’s just, eventually we’re all gonna move on. It’s called growing up."', "-Lily"], ['"There are two big days in any love story: the day you meet the girl of your dreams and the day you marry her."', "-Lily"], ['"It’s time to let go of the fantasies. It’s time to grow up."', "-Barney"], ['"The future is scary but you can’t just run back to the past because it’s familiar."', "-Robin"], ['"We gotta wait for the real thing, no matter how tough it gets."', "-Ted"], ['"In marriage, being right is less important than being supportive. Remember: Happy wife equals happy life."', "-Lily"], ['"I’ve never asked Lily to do anything “no questions asked” because I never wanted to. She’s the love of my life. I never keep anything from her."', "-Marshall"]
  ];
  var theQuote = "";
  var theChar = "";
  var theTweet = theQuote + " " + theChar;

  $("#getQuote").on("click", function() {
    var i = Math.floor(Math.random() * (quoArr.length));
    theQuote = quoArr[i][0];
    theChar = quoArr[i][1];
    $(".quote").html(theQuote);
    $(".character").html(theChar);
    theTweet = theQuote + " " + theChar;
  });

  $("#tweet").on("click", function() {
   tweetIt();

  });
  function tweetIt() {
    if (theQuote.length > 124) {
      theQuote = theQuote.slice(0, 124) + '...';
      
    }
    window.open("https://twitter.com/home/?status=" + theTweet);
  };
});
            
          
!
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