Joke Button

by hslincoln

HTML

<div id="jokebutton" class="demo">
    <button>Press for joke</button>
    <div id="jokeoutput"></div>
</div>

CSS

#jokebutton {
    text-align:center;
}
#jokebutton button {
    border:0;
    border-radius:60px;
    background:#F00;
    box-shadow:0 5px 0 #000;
    color:#FFF;
    cursor:pointer;
    font-variant:small-caps;
    font-weight:bold;
    height:60px;
    padding:0;
    text-shadow:0 1px 0 #EEE;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
    transition:all .1s linear;
    width:60px;
}
#jokebutton button:active {
    box-shadow:0 2px 0 #666;
    -webkit-transform:translateY(3px);
    -moz-transform:translateY(3px);
    -o-transform:translateY(3px);
    transform:translateY(3px);
}

JavaScript

jQuery("#jokebutton").click(function () {
    var jokes = ["How did the OO programmer get rich?", "<i>Inheritance</i>", "Why do programmers always mix up Halloween and Christmas?", "<i>Because Oct 31 == Dec 25!</i>", "There are 10 kinds of people in the world:", "<i>Those that know binary & those that don't</i>", "How many C++ programmers does it take to change a light bulb?", "<i>None: It's a hardware problem.</i>"];
    var arrayLength = jokes.length;
    var currentIndex = $("#jokeoutput").data('index');
    if (!currentIndex || currentIndex > arrayLength) {
        fill(1);
    } else {
        fill(currentIndex);
    }

    function fill(i) {
        $("#jokeoutput").html(jokes[i - 1]).data('index', i + 1);
    }
});