dimanche 30 avril 2017

Tracking average of two progress bar with checkboxes

I'm developing a very important project where the user can change the values of "pressure" of two elements via checkboxes. These checkboxes has two different values, one for bar-one and the second for bar-two. All this system has a "status panel" that says if it's all ok, or if there's a problem.

Please note that I don't have to use echoes or alert messages, because I need to show different div's depending on the current status of both bars.

I did the best I can in the snippet, I'm new to JavaScript so please don't be mean with my errors.

var 
    even = $('.even'),
    high = $('.high'),
    low = $('.low');

$('input').on('click', function() {
    var emptyValue = 0;
    $('input:checked').each(function() {
        emptyValue += parseInt($(this).val());
    });
    $('.bar-one').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
});

if (average === 5) {
    even.show();
  } else {
    even.hide();
  }
  
if (average >= 7) {
    high.show();
  } else {
    high.hide();
  }
  
if (average <= 3) {
    low.show();
  } else {
    low.hide();
  }
.progress {
  width: 100%;
  height: 30px;
  background-color: silver;
}

.bar-one {
  background-color: blue;
}

.bar-two {
  background-color: red;
}
<script src="http://ift.tt/1oMJErh"></script>
<div class="progress">
    <div class="bar-one" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>
<br>
<div class="progress">
    <div class="bar-two" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>
<br>
<div id="panel">
    <input type="checkbox" value1="20" value2="5">
    <input type="checkbox" value1="5" value2="20">
    <input type="checkbox" value1="10" value2="10">
    <input type="checkbox" value1="10" value2="-20">
    <input type="checkbox" value1="-20" value2="10">

</div>

<div class="even">
  Pressure is ok
</div>
<div class="high">
  Pressure is high
</div>
<div class="low">
  pressure is low
</div>

Your help is really appreciated!




Aucun commentaire:

Enregistrer un commentaire