Counter

How it works:

• increment #count's textContent - Adds 1 to the counter's value
• decrement #count's textContent - Subtracts 1 from the counter's value
• put 0 into #count - Resets the counter to zero

Advanced Increment/Decrement:

• increment #count's textContent by 5 - Add 5 instead of 1
• decrement #count's textContent by 10 - Subtract 10
• increment my value - Increment an element's value attribute
• increment @data-score - Increment a data attribute

Reactive Updates:

The count mirror below the buttons uses: on mutation of childList from #count to reactively update whenever the counter changes! This pattern watches for content changes in the #count element and automatically mirrors the value.

Try it yourself:

• Add a button that increments by 10
• Create a counter that only allows values 0-100
• Build a multi-counter with separate increment/decrement buttons