使用Sveltekit构建完整的待办事项应用：将您的技能提升到一个新的水平

   npm create svelte@latest my-todo-app

cd my-app
npm install

npm run dev -- --open

<script>
    let tasks = [];
    let newTask = '';

    function addTask() {
      if (newTask) {
        tasks = [...tasks, newTask];
        newTask = '';
      }
    }

    function removeTask(index) {
      tasks.splice(index, 1);
      tasks = [...tasks]; // Update the tasks array to trigger reactivity
    }
  </script>

  <main>
    <h1>SvelteKit To-Do App</h1>
    <div class="add-task">
      <input class="task-input" bind:value={newTask} placeholder="Add a new task" />
      <button class="add-button" on:click={addTask}>Add</button>
    </div>

    <ul class="task-list">
      {#each tasks as task, index (task)}
        <li class="task-item">
          {task}
          <button class="remove-button" on:click={() => removeTask(index)}>Remove</button>
        </li>
      {/each}
    </ul>
  </main>

  <style>
    main {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }

    h1 {
      color: #333;
    }

    .add-task {
      margin-bottom: 20px;
    }

    .task-input {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .add-button {
      padding: 5px 10px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .task-list {
      list-style-type: none;
      padding: 0;
    }

    .task-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    .remove-button {
      background-color: #dc3545;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>

npm run dev