Average tracking of two progress bars with checkboxes
I am developing a very important project in which the user can change the "pressure" values of two elements using checkboxes. These flags have two different meanings, one for bar-one
and one for bar-two
. This whole system has a "status bar" that says everything is fine or if there is a problem.
Note that I don't need to use echoes or warning messages because I need to show different divs depending on the current state of both bars.
I've done my best in snippet, I'm new to JavaScript, so please don't be stingy with my mistakes.
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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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!
+3
source to share
2 answers
Not sure exactly how you want it. But I will. Perhaps by looking at what I have done you can figure out what you want to do.
var
even = $('.even'),
high = $('.high'),
low = $('.low');
var averageCount = $("#panel").find("input").length;
var average = 0; // not sure how you are calculating average so i just added this.
updateStatus(average); // just to start message boxes as default;
$('input').on('click', function() {
var emptyValue1 = 0;
var emptyValue2 = 0;
$('input:checked').each(function() {
emptyValue1 += parseInt($(this).attr("data-value1"));
emptyValue2 += parseInt($(this).attr("data-value2"));
});
average = (emptyValue1+emptyValue2)/averageCount;
$('.bar-one').css('width', emptyValue1 + '%').attr('aria-valuenow', emptyValue1);
$('.bar-two').css('width', emptyValue2 + '%').attr('aria-valuenow', emptyValue2);
updateStatus(average); // update the message box
});
function updateStatus(average){
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 !important;
}
.bar-one {
background-color: blue !important;
}
.bar-two {
background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="progress">
<div class="bar-one progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
</div>
</div>
<br>
<div class="progress">
<div class="bar-two progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
</div>
</div>
<br>
<div id="panel">
<input type="checkbox" data-value1="20" data-value2="5">
<input type="checkbox" data-value1="5" data-value2="20">
<input type="checkbox" data-value1="10" data-value2="10">
<input type="checkbox" data-value1="10" data-value2="-20">
<input type="checkbox" data-value1="-20" data-value2="10">
</div>
<div class="even">
Pressure is ok
</div>
<div class="high">
Pressure is high
</div>
<div class="low">
pressure is low
</div>
+2
source to share
You are not initializing the mean variable. I put it at three and the rest of the code seemed to work.
var
even = $('.even'),
high = $('.high'),
low = $('.low'),
average = 3;
$('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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>
-1
source to share