app.html

<script>
	let currentFilter = 'all';
	let items = [];
	let editing = null;
	let numActive, numCompleted;

	try {
		items = JSON.parse(localStorage.getItem('todos-malina')) || [];
	} catch (err) {
		items = [];
	}

	const updateView = () => {
		currentFilter = 'all';
		if (window.location.hash === '#/active') {
			currentFilter = 'active';
		} else if (window.location.hash === '#/completed') {
			currentFilter = 'completed';
		}
	};

	window.addEventListener('hashchange', updateView);
	updateView();

	function clearCompleted() {
		items = items.filter(item => !item.completed);
	}

	function remove(index) {
		items.splice(index, 1);
	}

	function toggleAll(value) {
		items.forEach(item => item.completed = value)
	}

	function createNew(el) {
		items.push({
			description: el.value,
			completed: false
		});
		el.value = '';
	}

	function save(value) {
		editing.description = value;
		editing = null;
	}

	const filtered = () => {
		if(currentFilter == 'active') return items.filter(item => !item.completed);
		if(currentFilter == 'completed') return items.filter(item => item.completed);
		return items;
	}

	$: numActive = items.filter(item => !item.completed).length;
	$: numCompleted = items.filter(item => item.completed).length;

	$: JSON.stringify(items), (json) => localStorage.setItem('todos-malina', json);
</script>

<header class="header">
	<h1>todos</h1>
	<input
		class="new-todo"
		on:keydown|enter={createNew($element)}
		placeholder="What needs to be done?"
		use={$element.focus()}
	>
</header>

{#if items.length > 0}
	<section class="main">
		<input id="toggle-all" class="toggle-all" type="checkbox" on:change={toggleAll($element.checked)} checked={numCompleted == items.length}>
		<label for="toggle-all">Mark all as complete</label>

		<ul class="todo-list">
			{#each filtered() as item }
				<li class:completed={item.completed} class:editing={editing == item}>
					<div class="view">
						<input class="toggle" type="checkbox" bind:checked={item.completed}>
						<label on:dblclick={editing = item}>{item.description}</label>
						<button on:click={remove($index)} class="destroy"></button>
					</div>

					{#if editing == item }
						<input
							value={item.description}
							id="edit"
							class="edit"
							on:keydown|enter={$element.blur()}
							on:keydown|escape={editing=null}
							on:blur={save($element.value)}
							use={$element.focus()}
						>
					{/if}
				</li>
			{/each}
		</ul>

		<footer class="footer">
			<span class="todo-count">
				<strong>{numActive}</strong> {numActive === 1 ? 'item' : 'items'} left
			</span>

			<ul class="filters">
				<li><a class:selected={currentFilter == 'all'} href="#/">All</a></li>
				<li><a class:selected={currentFilter == 'active'} href="#/active">Active</a></li>
				<li><a class:selected={currentFilter == 'completed'} href="#/completed">Completed</a></li>
			</ul>

			{#if numCompleted}
				<button class="clear-completed" on:click={clearCompleted()}>
					Clear completed
				</button>
			{/if}
		</footer>
	</section>
{/if}