Increment up / down with time line

Increment up / down with time line

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="process">
    <div class="process-row">
        <div class="process-step">
            <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-user fa-2x"></i>
            </button>
            <p>Register</p>
        </div>
        <div class="process-step">
            <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-comments-o fa-2x"></i>
            </button>
            <p>Confirm</p>
        </div>
        <div class="process-step">
            <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-thumbs-up fa-2x"></i>
            </button>
            <p>Youre in</p>
        </div>
        <div class="process-step">
            <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-eur fa-2x"></i>
            </button>
            <p>You Pay</p>
        </div>
    </div>
</div>
<br>

    <div class="container">
            <div class="row-centered">
 <i class="fa fa-minus-square fa-2x inline" data-type="minus" id="minus"></i> <h2 id="qty" class="inline">432</h2> <i class="fa fa-plus-square fa-2x inline" id="plus"></i> 
</div>
</div>

CSS

.stepwizard-step p {
    margin-top: 10px;
}
.process-row {
    display: table-row;
}
.process {
    display: table;
    width: 100%;
    position: relative;
}
.process-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
.process-row:before {
    top: 25px;
    bottom: 0;
    position: absolute;
    content:" ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
}
.process-step {
    display: table-cell;
    text-align: center;
    position: relative;
}
.process-step p {
    margin-top:10px;
}
.btn-circle {
    width: 50px;
    height:50px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 50%;
}

.inline{display:inline}
.row-centered{    text-align:center;
    margin: auto;}

JavaScript

$(function(){

    var valueElement = $('#qty');
    function incrementValue(e){
        valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment, 432));
         if (valueElement.text() >= parseInt(2592)) letsCallaDeal(); 
        if(valueElement.text()  >= parseInt(432) ){ $('.btn-circle:eq(0)').removeClass('btn-default').addClass("btn-success");}else{$('.btn-circle:eq(0)').removeClass('btn-success').addClass("btn-default");}
            //---
         if(valueElement.text()  >= parseInt(504) ){ $('.btn-circle:eq(1)').removeClass('btn-default').addClass("btn-success");}else{$('.btn-circle:eq(1)').removeClass('btn-success').addClass("btn-default");}
            //---
        if(valueElement.text()  >= parseInt(576) ){ $('.btn-circle:eq(2)').removeClass('btn-default').addClass("btn-success");}else{$('.btn-circle:eq(2)').removeClass('btn-success').addClass("btn-default");}
        //---
 if(valueElement.text()  >= parseInt(648) ){ $('.btn-circle:eq(3)').removeClass('btn-default').addClass("btn-success");}else{$('.btn-circle:eq(3)').removeClass('btn-success').addClass("btn-default");}
          
        
        

        return false;
    }

    $('#plus').bind('click', {increment: 72}, incrementValue);

    $('#minus').bind('click', {increment: -72}, incrementValue);

});

function letsCallaDeal(){
alert("whoa, we need to talk");
    return false;
}