Crime Form

by Dhanck

HTML

<div class="col-md-8">
<form>
<label class="form-control">Adress</label>
<input type="text" name="address" class="form-control">  
<br/>
<label class="form-control">Age</label>
<select id="age" class="form-control"><option>Select Your Age</option>
<option>20</option></select>  
<br/>
<label class="form-control">Race</label>
<select id="race" class="form-control"><option>Select Your Race</option>
<option>white</option>
</select>  
<br/>
<label class="form-control">Sex</label>
<select id="sex" class="form-control"><option>Select Your Sex</option>
<option value="female">Female</option>
<option>Male</option>
</select>  
</form>
</div>
<div class="col-md-4">
<div class="number-cont">
<p><span id="lines">0</span> %</p>
</div>
<span class="number-txt">Of been Arrested</span>
<button id="lines-run" style="margin-bottom: 50px;">Run example</button>
</div>

CSS

.number-cont{
  display:block;
  font-size:50px;
  font-family:century gothic;
}
.number-txt{
  
}

JavaScript

$('input[name=address]').change(function() {
 $('#lines').animateNumber({ number: 10 });
            return false;
});
$('#age').on('change', function() {
  $('#lines').animateNumber({ number: 20 });
            return false;
});
$('#race').on('change', function() {
  $('#lines').animateNumber({ number: 30 });
            return false;
});
$('#sex').on('change', function() {
alert( $(this).find(":selected").val() );
  $('#lines').animateNumber({ number: 40 });
            return false;
});
          /** @preserve jQuery animateNumber plugin v0.0.13
 * (c) 2013, Alexandr Borisov.
 * https://github.com/aishek/jquery-animateNumber
 */

// ['...'] notation using to avoid names minification by Google Closure Compiler
(function($) {
  var reverse = function(value) {
    return value.split('').reverse().join('');
  };

  var defaults = {
    numberStep: function(now, tween) {
      var floored_number = Math.floor(now),
          target = $(tween.elem);

      target.text(floored_number);
    }
  };

  var handle = function( tween ) {
    var elem = tween.elem;
    if ( elem.nodeType && elem.parentNode ) {
      var handler = elem._animateNumberSetter;
      if (!handler) {
        handler = defaults.numberStep;
      }
      handler(tween.now, tween);
    }
  };

  if (!$.Tween || !$.Tween.propHooks) {
    $.fx.step.number = handle;
  } else {
    $.Tween.propHooks.number = {
      set: handle
    };
  }

  var extract_number_parts = function(separated_number, group_length) {
    var numbers = separated_number.split('').reverse(),
        number_parts = [],
        current_number_part,
        current_index,
        q;

    for(var i = 0, l = Math.ceil(separated_number.length / group_length); i < l; i++) {
      current_number_part = '';
      for(q = 0; q < group_length; q++) {
        current_index = i * group_length + q;
        if (current_index === separated_number.length) {
          break;
        }

        current_number_part = current_number_part +...