Todo example

App.xht

<script>
  let name = '';
  let todos = [{name: 'Linux'}, {name: 'Ubuntu', done: true}];
  let active;

  function add() {
    if(!name) return;
    todos.push({name});
    name = '';
  }

  const remove = i => {
    todos.splice(i, 1);
  }

  const reverse = todo => {
    todo.name = todo.name.split("").reverse().join("");
  }

  $: numDone = todos.filter(t => t.done).length;
</script>

{#if active}
  Edit: <input type="text" @keydown|enter={active=null} :value={active.name} />
{:else}
  <input type="text" @keydown|enter={add} :value={name} />
{/if}

<ul>
  {#each todos as todo, index (todo) }
  <li class:active={todo == active} class:inactive={todo.done}>
    <input type="checkbox" :checked={todo.done} />
    <span @click={active=todo}>{index}: {todo.name}</span>
    <a href @click|prevent={remove(index)}>remove</a>
    <a href @click|prevent={reverse(todo)}>reverse</a>
  </li>
  {/each}
</ul>

Total done: {numDone} of {todos.length}

<style>
  li {cursor: pointer;}
  .active {background-color: #cfc;}
  .inactive {text-decoration-line: line-through; color: gray;}
</style>