I'm currently attempting to modify the appearance of the bars in each area (a total of 12), so that a value of 1 equates to true (displayed as green) and a value of 0 equates to false (displayed as red). This will dynamically change the color of each bar based on the data received from the back-end.
I'm struggling to determine the most effective approach for achieving this.
Here's my current progress:
function createPeg(name, checkActive ){
const uiProgressBar = document.querySelector(`.${name}-bar-fill`);
}
const allPegs = [
createPeg('peg-1', pegActive["one"] == 0),
createPeg('peg-2', pegActive["two"] == 1),
createPeg('peg-3', pegActive["three"] == 1),
createPeg('peg-4', pegActive["four"] == 1),
createPeg('peg-5', pegActive["five"] == 1),
createPeg('peg-6', pegActive["six"] == 1),
createPeg('peg-7', pegActive["seven"] == 1),
createPeg('peg-8', pegActive["eight"] == 1),
createPeg('peg-9', pegActive["nine"] == 0),
createPeg('peg-10', pegActive["ten"] == 1),
createPeg('peg-11', pegActive["eleven"] == 1),
createPeg('peg-12', pegActive["twelve"] == 1),
];
for(let i=0; i<allPegs.length; i++){
if(allPegs[i] == 1){
uiProgressBar.style.background = "green";
} else if(allPegs[i] == 0){
uiProgressBar.style.background = "red";
}
//to test is working
else{
uiProgressBar.style.background = "blue";
}
}
CSS:
.peg-1-bar-fill {
border-radius: 50px;
height: 100%;
width: 100%;
max-width: 400px;
}
HTML:
<div class="peg-wrapper">
<div class="peg-name-1">
<h4>1</h4>
</div>
<div class="peg-1-start-time total-time">
<p class="label-2">Length:</p>
<span id="total-time-1">-</span>
</div>
<div class="peg-1-bar">
<div class="peg-1-bar-fill">
</div>
</div>
</div>