rodrigopedra/counter.html

## counter.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Counter</title>
</head>
<body>
    <!-- declarative markup -->
    <div class="my-counter">
        <h1>Counter: <span class="counter-output"></span></h1>
        <button type="button" data-increment="-1">subtract 1</button>
        <button type="button" data-increment="1">add 1</button>
    </div>

    <!-- with custom markup -->
    <p class="my-counter">
        <strong class="counter-output"></strong> counted!
        <a href="#" data-increment="-10">subtract 10</a>
        <a href="#" data-increment="5">add 5</a>
    </p>

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="js/components/counter.js"></script>
</body>
</html>

## counter.js
$(function () {
    'use strict';

    $('.my-counter').each(function ( index, element ) {
        var count = 0;
        var $component = $(element);
        var $output = $component.find('.counter-output');

        var updateCount = function( increment ) {
            count += increment;
            count = count < 0 ? 0 : count;

            $output.text(count);
        };

        $component.on('click', '[data-increment]', function ( event ) {
            var increment = $(event.target).data('increment');
            updateCount(+increment);
        });

        updateCount( count ); //initial state
    });
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>jQuery Counter</title>
	</head>
	<body>
	<!-- declarative markup -->
	<div class="my-counter">
	<h1>Counter: <span class="counter-output"></span></h1>
	<button type="button" data-increment="-1">subtract 1</button>
	<button type="button" data-increment="1">add 1</button>
	</div>

	<!-- with custom markup -->
	<p class="my-counter">
	<strong class="counter-output"></strong> counted!
	<a href="#" data-increment="-10">subtract 10</a>
	<a href="#" data-increment="5">add 5</a>
	</p>

	<script src="http://code.jquery.com/jquery.min.js"></script>
	<script src="js/components/counter.js"></script>
	</body>
	</html>
	$(function () {
	'use strict';

	$('.my-counter').each(function ( index, element ) {
	var count = 0;
	var $component = $(element);
	var $output = $component.find('.counter-output');

	var updateCount = function( increment ) {
	count += increment;
	count = count < 0 ? 0 : count;

	$output.text(count);
	};

	$component.on('click', '[data-increment]', function ( event ) {
	var increment = $(event.target).data('increment');
	updateCount(+increment);
	});

	updateCount( count ); //initial state
	});
	});