docs/example/assets/js/components/addTodoForm.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import h3 from "../h3.js"; export default function AddTodoForm() { const addTodo = () => { const newTodo = document.getElementById("new-todo"); if (!newTodo.value) { h3.dispatch("error/set"); h3.redraw() document.getElementById("new-todo").focus(); return; } h3.dispatch("error/clear"); h3.dispatch("todos/add", { key: `todo_${Date.now()}__${btoa(newTodo.value)}`, text: newTodo.value, }); newTodo.value = ""; h3.redraw() document.getElementById("new-todo").focus(); }; const addTodoOnEnter = (event) => { if (event.keyCode == 13) { addTodo(); event.preventDefault(); } }; return h3("form.add-todo-form", [ h3("input", { id: "new-todo", placeholder: "What do you want to do?", onkeydown: addTodoOnEnter, }), h3( "span.submit-todo", { title: "Add Todo", onclick: addTodo, }, "+" ), ]); } |