todo_app.svelte

<script>
  let todoDescription = "";
  let todosList = [];

  const onAddToList = () => {
    todosList = [
      ...todosList,
      {
        id: new Date().getTime(),
        description: todoDescription,
        done: false
      }
    ];
    todoDescription = "";
  };

  const onKeyPress = e => {
    if (e.charCode === 13) onAddToList();
  };

  const onToggle = (e, todo) => {
    let done = e.target.checked;
    todosList = todosList.map(td => {
      if (td.id !== todo.id) return td;
      return {
        ...td,
        done
      };
    });
  };
</script>

<div class="container">
  <div>
    {#each todosList as todo}
      <div class="list-item">
        {#if !todo.done}
          <p>{todo.description}</p>
        {:else}
          <strike>{todo.description}</strike>
        {/if}
        <input on:change={e => onToggle(e, todo)} type="checkbox" />
      </div>
    {/each}
    <input
      class="todoinput"
      on:keypress={onKeyPress}
      bind:value={todoDescription}
      type="text" />
    <button class="todobutton" on:click={onAddToList}>Add to list</button>
  </div>
</div>