Food Progress bar with Js

Asked

Viewed 877 times

1

I did a job that takes the number of Ids filled and returns a number that turns into the percentage of width that makes the bar move, however, I have a character counter that should send a value to the bar also, but as I am not a good connoisseur of I’m afraid I’ve done something wrong.

<div class="progress">
          <div id="progressTerm" class="progress-bar" role="progressbar" 
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" 
          style="width:0%; min-width:0%; max-width:100%;  background-color: 
                       #B22222;">TERMOMETRO</div>
        </div>








$(document).on("input", "#TxtDesc", function () {
    var limite = 0;
    var caracteresDigitados = $(this).val().length;
    var caracteresRestantes = limite + caracteresDigitados;

    $(".caracteres").text(caracteresRestantes);
});





$(function() {



function progress(percent, $element, velocity) {
   percent = percent >= 100 ? 100 : percent;
   var progressBarWidth = percent * $element.width() / 100;
   $element.find('div').stop().animate({ width: progressBarWidth }, velocity, "linear").html("Nivel de relevância");
   var validA = 0;
}

$('#TxtDesc').on('input', function(){
  var value = $(this).val();
  var progressValue = $('#progressText div');
  var color, percent = 0;
if(value.length <= 100){
    color = "red";
    percent = 15;
}else if(value.length <= 199){
    color = "yellow";
    percent = 50;
}else{
    color = "#32CD32";
    percent = 100;
    validA = 30;
}

var Valor = value.length;



progress(percent, $('#progressText'), 300);
progressValue.css("background", color);
$('#progressText').css("border", "1px solid " + color);








  var $progressBar         = $('[id=progressTerm]'), // Barra de Progresso.
      $progressElements = $('[id=progressValorInteiro]'), // Elementos que devem ser checados // para modificar o valor da barra.
      $progressElements2 = $('[id=progressValorMeio]'),                                
      TOTAL             = $progressElements.length; // Total de elementos.





$progressElements.on('change, blur', function() {

    // Faz um filtro com o total elementos válidos.
    // Nesse caso, campos que não estejam "em branco" e que não estejam marcados
    // como ':invalid'.
    var valid = $progressElements.filter(function() {
      return ($(this).val() || $(this).prop('checked')) && !$(this).is(':invalid');
    }).length;


    var ResultF = (valid + validA);

    // Calcula a porcentagem e altera o valor da width da barra.
    var percent = (ResultF * 100) / TOTAL;


    $progressBar.width(percent);

})

  }); 




});
</script>
javascript progress-bar

1 answer

0


Guys, whoever has the same doubt, in this question I put the code working.

add an id with Jquery

Personal hug.

Browser other questions tagged javascript progress-bar

You are not signed in. Login or sign up in order to post.