JQuery challenge - draw tally marks on click event [closed]

Answer 1

Given the requirements, I've decided to use an ol as the container:

HTML:

<button id="tally">add another</button>
<ol id="count">
</ol>

CSS:

li {
    display: inline-block;
    height: 20px;
    border: 2px solid #000;
    margin: 0 2px 0 0;
}

li:nth-child(5n) {
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    height: 30px;
    position: relative;
    left: -15px;
    top: 5px;
    margin-right: 10px;
}

With the following jQuery:

$('#tally').click(
    function(){
        $('<li />').prop('class','tally').appendTo('#count');
        return false;
    });

JS fiddle demo.

Answer 2

Working demo

$.fn.tallier = function () {
    var $this = this,
        bgUrl = 'http://i.stack.imgur.com/96hvp.png',
        bgHeight = 125,
        bgVals = [
            [45, 25], // width, background-position X
            [65, -35],
            [85, -115],
            [105, -215],
            [140, -360]
        ],
        count = 0;

    $this.click(function(e) {
        count++;

        // add new tally box every 5th
        if (count%5 == 1) {
            var $newTally = $('<div>').addClass('tally');
            $newTally.css({
                          background: 'url("' + bgUrl + '") ' +
                            bgVals[0][1] + 'px 0 no-repeat transparent',
                          float: 'left',
                          width: bgVals[0][0] + 'px',
                          height: bgHeight + 'px'
                      });
            $this.append($newTally);
        }

        // change background position and width for new tally
        var $lastTally = $this.find('.tally:last'),
            i = count%5 - 1;
        i = i < 0 ? 4 : i;
        $lastTally.css({
            'background-position': bgVals[i][1] + 'px 0',
            width: bgVals[i][0] + 'px'
        });
    });
};

// invoke
$('#tally').tallier();
$('#tally').click();

Demo