viewof attribsCount = { selectedAttributes; function getNewAttr(allAttrs, currentAttribs) { const remainingAttrs = allAttrs.filter((a) => !currentAttribs.includes(a)); return remainingAttrs.at(Math.floor(Math.random() * remainingAttrs.length)); } const addAttrib = html``; const removeAttrib = html``; const spanCount = html`${ viewof selectedAttributes.value.length }`; const target = ReactiveWidget(html` ${removeAttrib}

${spanCount} attributes

${addAttrib} `); function update(stopAnimation = false) { spanCount.textContent = viewof selectedAttributes.value.length; viewof selectedAttributes.dispatchEvent(new Event("input")); if (stopAnimation) { viewof animate.value = false; viewof animate.dispatchEvent(new Event("input")); } } target.incr = (evt) => { evt && evt.preventDefault(); evt && evt.stopPropagation(); viewof selectedAttributes.value = [ ...viewof selectedAttributes.value, getNewAttr(attributes, viewof selectedAttributes.value) ]; update(!!evt); }; target.decr = (evt) => { evt && evt.preventDefault(); evt && evt.stopPropagation(); viewof selectedAttributes.value = viewof selectedAttributes.value.slice( 0, viewof selectedAttributes.value.length - 1 ); update(!!evt); }; addAttrib.addEventListener("click", target.incr); removeAttrib.addEventListener("click", target.decr); return target; }