Character Count with Live Progress Bar using jQuery

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

jQuery(document).ready(function() {

$('textarea').keyup(function() {
var box = $(this).val();
var main = box.length * 100;
var value = (main / 100);
var count = 0 + box.length;
var reverse_count = 100 - box.length;

if(box.length >= 0){
$('.progress-bar').css('width', count + '%');
$('.current-value').text(count + '%');
$('.count').text(reverse_count);

if (count >= 50 && count < 85){
$('.progress-bar').removeClass('progress-bar-danger').addClass('progress-bar-warning');
}
if (count > 85){
$('.progress-bar').removeClass('progress-bar-warning').addClass('progress-bar-danger');
}
if(count >= 0 && count < 50){
$('.progress-bar').removeClass('progress-bar-danger');
$('.progress-bar').removeClass('progress-bar-warning');
$('.progress-bar').addClass('progress-bar-success')
}

}
return false;
});
});

HTML

1
2
3
4
5
6
7
8
9
10
11

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me