Show results with output, progress, and meter

HTML has distinct elements for three interface results that are often flattened into styled div elements. output represents a calculation result, progress represents completion of a task, and 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 if CSS makes them visually similar.

<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>

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

Meter is not a generic progress bar. Its low, high, and optimum values describe how a measurement should be interpreted. Browser styling is not a complete 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.

Add, complete, and remove tasks while checking all three values. Inspect the accessibility tree and confirm each indicator 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 inconsistency with CSS.