A minimal todo list

This page puts together several pieces from earlier chapters:

• data - to store the current text and the list,
• *input - to bind the text field,
• *for - to render each item,
• @click - to add and toggle items.

Code

<serc-rod data='{"text":"","items":[]}'>
	<h2>Todo (minimal)</h2>

	<p>
		<label>
			New item:
			<input type="text" *input="text" placeholder="Write a task...">
		</label>
		<button
			type="button"
			@click="text && items.push({label:text,done:false}) && (text='')">
			Add
		</button>
	</p>

	<ul>
		<li *for="i, item of items">
			<button type="button" @click="item.done = !item.done">
				<span *if="item.done">Undo</span>
				<span *else>Done</span>
			</button>

			<span *if="item.done">[?]</span>
			<span *else>[ ]</span>

			%item.label%
		</li>
	</ul>

	<p *if="items.length === 0">
		No items yet.
	</p>
	<p *else>
		%items.length% item(s) total.
	</p>
	<p>
		<button type="button" *save>Save</button>
		<button type="button" *load>Load</button>
	</p>
</serc-rod>

Sample

When you type a task and click Add, a new item is pushed into items. Each row has its own @click handler to toggle item.done.

What to try next

• add a button to remove an item,
• separate completed and active items,
• combine this with *save and *load from the lifecycle chapters.

For more patterns, return to Binding & events (advanced).