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 | +})(); | |