# Demo apps || 7 ## Simple to do app
```js import { LitElement, html, css } from "lit-element"; import { LitAtom, atom, selector } from "@klaxon/atom"; const [todos, setTodos] = atom({ key: 'todos', default: [{id: Date.now(), text: 'todo', isComplete: false}] }); const [filter, setFilter] = atom({ key: 'filter', default: 'all' }); const filteredTodos = selector({ key: 'filteredTodos', get: ({getAtom}) => { const todoList = getAtom(todos); const todoFilter = getAtom(filter); switch(todoFilter) { case 'active': return todoList.filter(todo => !todo.isComplete); case 'completed': return todoList.filter(todo => todo.isComplete); case 'all': return todoList; } } }); const addTodo = e => { e.preventDefault(); setTodos(old => [ ...old, { id: Date.now(), text: e.target.elements.todo.value, isComplete: false } ]) } export class TodoApp extends LitAtom(LitElement) { static atoms = [todos, filter]; static selectors = [filteredTodos]; render() { return html`
todos
submit
${this.filteredTodos?.map(({text, isComplete, id}) => html`
setTodos(old => old.map(todo => todo.id === id ? {...todo, isComplete: true} : todo))} />
${text}
setTodos(old => old.filter(todo => todo.id !== id))}>❌
`)}
${this.filteredTodos?.length} items
setFilter('all')}>all
setFilter('active')}>active
setFilter('completed')}>completed
`; } } customElements.define("todo-app", TodoApp); ```
## Advanced to do app
```js import { LitElement, html, css} from 'lit-element'; import './todo-debug.js'; import './todo-list.js'; import './todo-detail.js'; class TodoApp extends LitElement { render() { return html`
` } } customElements.define('todo-app', TodoApp); ```