Basis TODO list using NES.css and Svelte

NESTodo.svelte

<script>
	import { fade, fly } from 'svelte/transition';
	
	let uid = 1;
	let newTodo = "";
	
	let todos = [
		{ id: uid++, done: true, task: 'Test Svelte' },
		{ id: uid++, done: true, task: 'Uset NES.css' },
		{ id: uid++, done: true,  task: 'Implement TODO list layout' },
		{ id: uid++, done: true, task: 'Add interaction' },
		{ id: uid++, done: true, task: 'Add animation' },
		{ id: uid++, done: false, task: 'Store list on LocalStorage' },
	];

	function add() {
		if(newTodo.length > 0) {
			const todo = {
			id: uid++,
			done: false,
			task: newTodo
		};
			
		todos = [todo, ...todos];
		newTodo = '';
		}
	}

	function remove(todo) {
		todos = todos.filter(t => t !== todo);
	}
	
	function mark(todo, done) {
		todo.done = done;
		remove(todo);
		todos = todos.concat(todo);
	}
</script>

<svelte:head>
	<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/nes.min.css">
</svelte:head>

<style>
	.new-task {
		display: flex;
		flex-direction: column;
		margin-top: 64px;
		align-self: flex-end
	}
	
	.list-item-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.completed {
		color: gray;
	}
	
	button {
		margin-top: 10px;		
	}
</style>

<div class="nes-container with-title is-rounded">
	<p class="title">TODO</p>
	
	<span class="nes-text is-primary">On going tasks:</span>
	<div class="lists">
  <ul class="nes-list is-circle">
		{#if (todos.filter(t => !t.done).length > 0) }
		{#each todos.filter(t => !t.done) as todo (todo.id)}
			<div in:fly="{{ y: -20, duration: 800 }}" out:fade class="list-item-container">
				<li on:click={() => mark(todo, true)}>
					{todo.task} 
				</li>
				<i on:click="{() => remove(todo)}" class="nes-icon close nes-pointer is-small"></i>
		</div>
		{/each}
		{:else}
			<p>No tasks for the moment</p>
		{/if}
  </ul>
</div>

	
	<span class="nes-text is-success">Completed tasks:</span>
<div class="lists">
  <ul class="nes-list is-disc">
		{#if (todos.filter(t => t.done).length > 0) }
			{#each todos.filter(t => t.done) as todo (todo.id)}
				<li in:fly="{{ y: 200, duration: 800 }}" out:fade class="completed" on:click={() => mark(todo, false)}>
					{todo.task}
				</li>
			{/each}
		{:else}
			<p>You didn't comple any task yet</p>
		{/if}
  </ul>
</div>


 <div class="new-task">
	 <div class="nes-field">
  	<label for="name_field">New Task</label>
  		<input bind:value={newTodo} type="text" id="name_field" class="nes-input">
	</div>
	 <button on:click|preventDefault={() => add()} type="button" class="nes-btn is-primary">ADD</button>
	</div> 
		
</div>