Source code
Revision control
Copy as Markdown
Other Tools
<script>
import { onMount } from 'svelte';
import { router } from './router.js';
import { uuid } from './utils.js';
import Header from './Header.svelte';
import Footer from './Footer.svelte';
import Item from './Item.svelte';
import "./app.css";
import "todomvc-app-css/index.css";
import "todomvc-common/base.css";
let currentFilter = "all";
let items = [];
function addItem(event) {
items.push({
id: uuid(),
description: event.detail.text,
completed: false,
});
items = items;
}
function removeItem(index) {
items.splice(index, 1);
items = items;
}
function toggleAllItems(event) {
const checked = event.target.checked;
items = items.map((item) => ({
...item,
completed: checked,
}));
}
function removeCompletedItems() {
items = items.filter((item) => !item.completed);
}
onMount(() => {
router(route => currentFilter = route).init();
});
$: filtered = currentFilter === "all" ? items : currentFilter === "completed" ? items.filter((item) => item.completed) : items.filter((item) => !item.completed);
$: numActive = items.filter((item) => !item.completed).length;
$: numCompleted = items.filter((item) => item.completed).length;
</script>
<Header on:addItem={addItem} />
{#if items.length > 0}
<main class="main">
<div class="toggle-all-container">
<input id="toggle-all" class="toggle-all" type="checkbox" on:change={toggleAllItems} checked={numCompleted === items.length} />
<label for="toggle-all">Mark all as complete</label>
</div>
<ul class="todo-list show-priority">
{#each filtered as item, index (item.id)}
<Item bind:item index={index} on:removeItem={() => removeItem(index)} />
{/each}
</ul>
<Footer {numActive} {currentFilter} {numCompleted} on:removeCompletedItems={removeCompletedItems} />
</main>
{/if}