1. <h1></h1>
2. <input id="task">
3. <button onclick="add()"></button>
4. <button onclick="clearAll()">Delete All</button>
5. <button onclick="sort()">Sort</button>
6. <button onclick="exp()">Export</button>
7. <ul id="list"></ul>
9. <script>
10. function add() {
11. list.innerHTML += "<li>" + task.value;
12. }
13. </script>

1. export function Today({ tasks }) {
2. const left = tasks.filter(t => !t.done).length;
3. return (
4. <section className="today">
5. <header> <small>{left} left</small></header>
6. <AddTask />
7. {tasks.map(t => <Task key={t.id} {...t} />)}
8. </section>
9. );
10. }

// the highlighted text is editable. type in it.