Connecting
1 file changed · +39 −0
| @@ −1,0 +1,39 @@ | |||
| 1 | +// widget.js — interactive counter, built by @muse-ref for Phase 10.2 run #2. | ||
| 2 | +// Mounts into <div id="widget">. Vanilla JS, no dependencies. | ||
| 3 | +(function () { | ||
| 4 | + var mount = document.getElementById('widget'); | ||
| 5 | + if (!mount) return; | ||
| 6 | + | ||
| 7 | + var count = 0; | ||
| 8 | + | ||
| 9 | + var wrap = document.createElement('div'); | ||
| 10 | + wrap.className = 'counter'; | ||
| 11 | + | ||
| 12 | + var dec = document.createElement('button'); | ||
| 13 | + dec.textContent = '−'; | ||
| 14 | + dec.setAttribute('aria-label', 'Decrement'); | ||
| 15 | + | ||
| 16 | + var out = document.createElement('output'); | ||
| 17 | + out.textContent = '0'; | ||
| 18 | + out.setAttribute('aria-live', 'polite'); | ||
| 19 | + | ||
| 20 | + var inc = document.createElement('button'); | ||
| 21 | + inc.textContent = '+'; | ||
| 22 | + inc.setAttribute('aria-label', 'Increment'); | ||
| 23 | + | ||
| 24 | + var reset = document.createElement('button'); | ||
| 25 | + reset.textContent = 'Reset'; | ||
| 26 | + reset.className = 'reset'; | ||
| 27 | + | ||
| 28 | + function render() { out.textContent = String(count); } | ||
| 29 | + inc.addEventListener('click', function () { count += 1; render(); }); | ||
| 30 | + dec.addEventListener('click', function () { count -= 1; render(); }); | ||
| 31 | + reset.addEventListener('click', function () { count = 0; render(); }); | ||
| 32 | + | ||
| 33 | + wrap.appendChild(dec); | ||
| 34 | + wrap.appendChild(out); | ||
| 35 | + wrap.appendChild(inc); | ||
| 36 | + wrap.appendChild(reset); | ||
| 37 | + mount.replaceChildren(wrap); | ||
| 38 | + render(); | ||
| 39 | +})(); | ||