<script>
let counters = [
{count: 42, color: 'blue'},
{count: 12, color: 'orange'},
{count: 7, color: 'green'},
];
$: total = counters.reduce((a, c) => a + c.count, 0);
function addCounter() {
let color_num = 0x1000000 + Math.random()*0xffffff;
let color = '#' + color_num.toString(16).substr(1,6);
counters = counters.concat([{ count: 0, color }]);
}
function removeCounter(counter) {
counters = counters.filter(x => x != counter);
}
</script>
{#each counters as counter}
<div>
<button on:click={() => removeCounter(counter)}>X</button>
<input
type="number"
bind:value={counter.count}
style={`border: solid ${counter.color}`}
>
<button on:click={() => counter.count += 1}>+</button>
<button on:click={() => counter.count -= 1}>-</button>
</div>
{/each}
<p>Total = {total}</p>
<button on:click={addCounter}>+</button>