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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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="main">
  <h2>Random Jokes</h2>
  <p class="text"></p>
  <div id="container" class="buttons">
    <button class="btn btn-primary">
      New Joke
    </button>
    <a id="tweet" class="btn btn-secondary" target="_blank">
      Tweet This
    </a>
  </div>
</div>
            
          
!
            
              .main
  margin: 2rem;
  text-align: center;
  max-width: 480px;
  margin: auto
  h2
    font-family: Arial;
    border-bottom: 2px solid black;
  .buttons
    margin-top: 2em;
    button
      background: #327d97;
  p
    padding: 1em;
    background: #efefef;    
    margin-top: 3em;
    font-size: 2em;
    box-shadow: 4px 4px 15px #667;
    
            
          
!
            
              var $button = $('.btn'),
    $text = $('.text'),
    $tweet = $('#tweet');

var getQuote = function () {
  var random = Math.floor((Math.random() * jokes.length-1));
  return jokes[random];
};

var updateJoke = function () {
  var joke = getQuote().joke;
  var url = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(joke);
  $tweet.attr('href', url);
  $text.html(joke);
  
};

$button.on('click', updateJoke);
$(document).on('ready', updateJoke);



// taken from https://github.com/KiaFathi/tambalAPI
var jokes = [
  {joke: 'Did you hear about the guy whose whole left side was cut off? He\'s all right now.'},
  {joke: "I'm reading a book about anti-gravity. It's impossible to put down."},
  {joke: "I wondered why the baseball was getting bigger. Then it hit me."},
  {joke: "It's not that the man did not know how to juggle, he just didn't have the balls to do it."},
  {joke: "I'm glad I know sign language, it's pretty handy."},
  {joke: "My friend's bakery burned down last night. Now his business is toast."},
  {joke: "Why did the cookie cry? It was feeling crumby."},
  {joke: "I used to be a banker, but I lost interest."},
  {joke: "A drum and a symbol fall off a cliff"},
  {joke: "Why do seagulls fly over the sea? Because they aren't bay-gulls!"},
  {joke: "Why did the fireman wear red, white, and blue suspenders? To hold his pants up."},
  {joke: "Why didn't the crab share his food? Because crabs are territorial animals, that don't share anything."},
  {joke: "Why was the javascript developer sad? Because he didn't Node how to Express himself."},
  {joke: "What do I look like? A JOKE MACHINE!?"},
  {joke: "How did the hipster burn the roof of his mouth? He ate the pizza before it was cool."},
  {joke: "Why is it hard to make puns for kleptomaniacs? They are always taking things literally."},
  {joke: "Why do mermaid wear sea-shells? Because b-shells are too small."},
  {joke: "I'm a humorless, cold hearted, machine."},
  {joke: "Two fish in a tank. One looks to the other and says 'Can you even drive this thing???'"},
  {joke: "Two fish swim down a river, and hit a wall. One says: 'Dam!'"},
  {joke: "What's funnier than a monkey dancing with an elephant? Two monkeys dancing with an elephant."},
  {joke: "How did Darth Vader know what Luke was getting for Christmas? He felt his presents."},
  {joke: "What's red and bad for your teeth? A Brick."},
  {joke: "What's orange and sounds like a parrot? A Carrot."},
  {joke: "What do you call a cow with no legs? Ground beef"},
  {joke: "Two guys walk into a bar. You'd think the second one would have noticed."},
  {joke: "What is a centipedes's favorite Beatle song?  I want to hold your hand, hand, hand, hand..."},
  {joke: "What do you call a chicken crossing the road? Poultry in moton. "},
  {joke: "Did you hear about the Mexican train killer?  He had locomotives"},
  {joke: "What do you call a fake noodle?  An impasta"},
  {joke: "How many tickles does it take to tickle an octupus? Ten-tickles!"}, 
  {joke: "At the rate law schools are turning them out, by 2050 there will be more lawyers than humans."}
];
            
          
!
999px
Loading ..................

Console