I have a unique system with 5 checkboxes that act as a To-Do list. When I click on each checkbox, the circle's diameter should progressively fill up in increments of 1/5 until all 5 checkboxes are completed. The order in which the checkboxes are clicked should not affect the progress. For example, if I click on the "first ToDo" and "third ToDo" without selecting the "second ToDo", the circle should show 2/5 completion.
Currently, I have successfully made the circle interact with the checkbox inputs, but I am facing challenges in visually representing the progress accurately. When clicking on a ToDo item, the circle marks the progress but does not reflect the correct order or proportions. My goal is to make the visual progress move forward towards completion whenever a ToDo item is checked off.
In my search for solutions online, I have come across mentions of using <circle path>. However, this has been confusing for me as some configurations involve CSS while others use JavaScript. In my opinion, it would be best to utilize JavaScript to display the progress, as it needs to respond based on the status of the checkboxes.
function update() {
var myBar = document.getElementById("myCircle");
//Reference the Form.
var toDo = document.getElementById("toDo");
//Reference all the CheckBoxes in Table.
boxes = toDo.querySelectorAll("input[type='checkbox']:checked");
checked = boxes.length
myBar.style.strokeDasharray = ((checked) * 100) + "%";
if (checked === 0) {
alert("Please select CheckBox(s).");
}
return true;
}
checks = document.querySelectorAll("input[type='checkbox']");
checks.forEach(function(box) {
box.addEventListener("change", function() {
update()
});
});#myCircle {
width: 0;
height: 30px;
stroke: #A3BBAD;
stroke-width: 3px;
}
#myProgress {
margin: auto;
width: 50%;
stroke: #357266;
stroke-width: 3px;
}<svg height="100" width="100">
<circle id="myProgress" cx="50" cy="50" r="40" fill="transparent"/>
<circle id="myCircle" cx="50" cy="50" r="40" fill="transparent"/>
</svg>
<br>
<form id="toDo">
<input id="FirstToDo" type="checkbox" value="1" /><label for="FirstToDo">First</label>
<input id="SecondToDo" type="checkbox" value="2" /><label for="SecondToDo">Second</label>
<input id="ThirdToDo" type="checkbox" value="3" /><label for="ThirdToDo">Third</label>
<input id="FourthToDo" type="checkbox" value="4" /><label for="FourthToDo">Fourth</label>
<input id="FifthToDo" type="checkbox" value="5" /><label for="FifthToDo">Fifth</label>
</form>
<script src="Circle.js"></script>