Plus Minus counter

by Hesam Yavari

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<br>
<div class='main'>
  <button class='down_count btn btn-info' title='Down'><i class='icon-minus'></i></button>
  <input class='counter' type="text" placeholder="value..." value='0' />    
  <button class='up_count btn btn-info' title='Up'><i class='icon-plus'></i></button>
</div>
<label class='muted'>(or type any numeric value)</label>

CSS

.main {
  margin-left: 5px;
}
.counter {
  width: 45px;  
  border-radius: 0px !important;
  text-align: center;
}
.up_count {
  margin-bottom: 10px;  
  margin-left: -4px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
} 
.down_count {
  margin-bottom: 10px;  
  margin-right: -4px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

JavaScript

$(document).ready(function(){
    $('button').click(function(e){
        var button_classes, value = +$('.counter').val();
        button_classes = $(e.currentTarget).prop('class');        
        if(button_classes.indexOf('up_count') !== -1){
            value = (value) + 1;            
        } else {
            value = (value) - 1;            
        }
        value = value < 0 ? 0 : value;
        $('.counter').val(value);
    });  
    $('.counter').click(function(){
        $(this).focus().select();
    });
});