I received assistance from a friend in creating this progress bar. Everything seems to be working well, except for the fact that the progress bar is not extending to the full width of the parent div. The new width after each input tag is entered using JavaScript and specified in pixels. Since I am new to JavaScript, I am seeking some guidance.
Here is the link to the fiddle - https://jsfiddle.net/greysniper/fnkpu5gc/
I tried converting it to percentage but have not been successful so far. The initial width is set at 11px, with subsequent widths for each input also being in pixels.
<div>
<span class='meter' style="display:inline-block;background:yellow;color:green;width:0;height:20px"></span>
<span class='perc'>0</span>%
</div>
<input class="track">
<input class="track">
...
<select class="track">
<option value="">Choose One</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
$('.track').change(function(e) {
update_progress();
});
function update_progress() {
var count = $('.track').length;
var length = $('.track').filter(function() {
return this.value;
}).length;
var done = Math.floor(length * (100 / count));
$('.perc').text(done);
$('.meter').width(done);
}