svelte todo

todo.svelte

<script>
  $: todos = [];
  var todo = "";
  function addTodoOnEnter(e) {
    if (e.key === "Enter") {
      addTodo();
    }
  }

  function addTodo() {
    if (todo.length > 1) {
      todos.push(todo);
      todo = "";
      todos = todos;
    }
  }

  function removeTodo() {
    var clickedTodo = this.parentElement;
    var clickedTodoIndex = [...document.querySelectorAll("li")].indexOf(
      clickedTodo
    );
    var filteredTodos = todos.filter(function(todoItem, todoIndex) {
      return todoIndex != clickedTodoIndex;
    });

    todos = filteredTodos;
  }
</script>

<style>

</style>

<main>
  <input type="text" bind:value={todo} on:keyup={addTodoOnEnter} />
  <button on:click={addTodo}>add todo</button>

  <ul>
    {#each todos as t}
      <li>
        {t}
        <small on:click={removeTodo}>remove</small>
      </li>
    {/each}
  </ul>
</main>