Skip to content

Commit

Permalink
Add todoApp
Browse files Browse the repository at this point in the history
  • Loading branch information
voltrevo committed Mar 1, 2024
1 parent f866fb1 commit 38ec6cc
Showing 1 changed file with 110 additions and 0 deletions.
110 changes: 110 additions & 0 deletions inputs/passing/todoApp/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
export default class TodosApp {
todos: Todo[] = [];

["GET /"]() {
return (
<html>
<head>
<title>Todos</title>
{this.renderScript()}
</head>
<body>
<h1>Todos</h1>
<table>
{this.renderTodos()}
<tr>
<td colSpan={2}>
<input
id="todo"
onKeyDown={`onTodoInputKeyDown(event);` as ExplicitAny}
/>
</td>
<td>
<button
onClick={`addTodo();` as ExplicitAny}
>
Add
</button>
</td>
</tr>
</table>
</body>
</html>
);
}

["POST /add"](todo: string) {
this.todos.push({ text: todo, done: false });

return this.todos.length - 1;
}

["POST /setDone"]({ index, done }: { index: number; done: boolean }) {
this.todos[index].done = done;
}

["POST /delete"](index: number) {
this.todos.splice(index, 1);
}

renderTodos() {
return this.todos.map((todo, i) => (
<tr>
<td>
<input
type="checkbox"
checked={todo.done}
onClick={`post('/setDone', { index: ${i}, done: ${!todo
.done}, }); return false;` as ExplicitAny}
/>
</td>
<td style={{ textDecoration: todo.done ? "line-through" : "" }}>
{todo.text}
</td>
<td
style={{ cursor: "pointer" }}
onClick={`post('/delete', ${i}); return false;` as ExplicitAny}
>
</td>
</tr>
));
}

renderScript() {
return (
<script>
{`
'use strict';
async function post(path, body) {
const res = await fetch(path, {
method: "POST",
body: JSON.stringify(body),
});
location.reload();
}
async function addTodo() {
await post('/add', document.getElementById('todo').value);
}
async function onTodoInputKeyDown(e) {
if (e.key === 'Enter') {
await addTodo();
}
}
`}
</script>
);
}
}

type Todo = {
text: string;
done: boolean;
};

// deno-lint-ignore no-explicit-any
type ExplicitAny = any;

0 comments on commit 38ec6cc

Please sign in to comment.