DOM Timer

Time remaining: 0s

Under the Hood: Dynamic Delegation

Instead of manually writing HTML for every button, this app generates the UI straight from a JavaScript array. Here is the flow:

• 1. Single Source of Truth: We start with a simple array: [15, 30, 45, 60]. If we ever want to add a "+90s" button, we just add 90 to this list, and the app updates itself.
• 2. Clean DOM Generation: The script loops through that data, creates the buttons on the fly, and injects them into the page. No hardcoded HTML required.
• 3. The "Parent" Listener: We don't attach click listeners to the buttons themselves. We attach one single listener to the parent container.
• 4. Catching the Bubble: When you click a button, the event "bubbles" up to the parent. We catch it there, check event.target to see exactly which button triggered it, and read its value.