cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console