Show results with output, progress, and meter

HTML has distinct elements for three result types people often flatten into styled div boxes. output represents a calculated result. progress represents completion of a task. meter represents a scalar measurement within a known range.

On the board, an output can show remaining tasks, progress can show completed work out of all tasks, and meter can show workload against a chosen capacity. Their meanings differ even when CSS makes them look alike.

<p>Remaining: <output id="remaining">4</output></p>
<label>Project progress <progress id="completion" value="2" max="6">2 of 6</progress></label>
<label>Weekly workload <meter id="workload" min="0" max="40" low="10" high="32" optimum="24" value="18">18 hours</meter></label>
<script>
  const remaining = document.querySelector('#remaining')
  const completion = document.querySelector('#completion')
  remaining.value = activeTasks.length
  completion.value = completedTasks.length
  completion.max = allTasks.length
</script>

Complete one task and all three values should move together: remaining drops, progress advances, and meter reflects the new workload number.

A progress element without value is indeterminate. Work is happening, but completion is unknown. Remove the attribute rather than inventing a percentage. Add a normal status message too when users need to know which operation is running.

Meter is not a generic progress bar. Its low, high, and optimum values describe how a measurement should be read. Browser styling is not a full explanation, so include surrounding text such as hours used out of weekly capacity.

Updating output.value changes the displayed result. If the result needs to be announced immediately after an action, consider whether a restrained role="status" around a concise message is warranted. Do not turn every counter change into an interruption.

Try this on your board: add, complete, and remove tasks while watching all three indicators. Inspect the accessibility tree and confirm each one has a useful name and current numeric value, not just a colored shape. Test a zero-task project: avoid max="0", hide or explain progress until work exists, and keep the remaining output at zero. If progress shows more than its maximum, fix the underlying totals instead of hiding the mismatch with CSS.