I'm attempting to create an input box with a bottom div that acts as a progress bar, indicating when enough characters have been typed.
I've been struggling to get the animation working, even though I initially thought it would be a simple task for this project.
If you could review my code and point out any errors, I would greatly appreciate it. Thank you!
<div id='cntnr'>
<div id='inptDiv'>
<input id='inpt1'>
<div id='prgInd'></div>
</div>
</div>
var main = function() {
var inptAmnt = document.getElementById('inpt1').value;
if(inptAmnt.length === 1) {
$('#prgInd').css('width', 25);
}
}
$(document).ready(main);
I attempted the following code first, but it didn't work as expected:
var main = function() {
var inptAmnt = document.getElementById('inpt1').value;
if(inptAmnt.length === 1) {
$('#prgInd').animate({
width:25
},200 )
}
}
$(document).ready(main);
JSFiddle: https://jsfiddle.net/qcsb53ha/