Todo List

\n setNewTodo(e.target.value)} \n placeholder=\"Add a new todo\" \n style={{ width: '300px', padding: '10px', marginRight: '8px', border: '1px solid #ccc', borderRadius: '4px' }}\n />\n \n

(e.currentTarget.querySelector('button').style.opacity = '1')}\n onMouseLeave={e => (e.currentTarget.querySelector('button').style.opacity = '0')}\n >\n {todo.text}\n \n

\n );\n}\n\nfunction client() {\n const fetchTodos = async () => {\n const response = await fetch('/todos');\n const todos = await response.json();\n return todos;\n };\n\n fetchTodos().then(initialTodos => {\n createRoot(document.getElementById(\"root\")).render();\n });\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request) {\n if (request.method === 'POST' && request.url.endsWith('/add-todo')) {\n const body = await request.json();\n const savedTodos = await blob.getJSON('todos') || [];\n const updatedTodos = [...savedTodos, { text: body.text }];\n await blob.setJSON('todos', updatedTodos);\n return new Response('Todo added', { status: 200 });\n }\n\n if (request.url.endsWith('/todos')) {\n const savedTodos = await blob.getJSON('todos') || [];\n return new Response(JSON.stringify(savedTodos), {\n headers: { 'Content-Type': 'application/json' },\n });\n }\n\n if (request.method === 'POST' && request.url.endsWith('/delete-todo')) {\n const body = await request.json();\n const savedTodos = await blob.getJSON('todos') || [];\n const updatedTodos = savedTodos.filter((_, i) => i !== body.index);\n await blob.setJSON('todos', updatedTodos);\n return new Response('Todo deleted', { status: 200 });\n }\n\n return new Response(`\n \n \n Todo List\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n```","deleted","label",[98],"permalink","https://www.val.town/x/johndevor/react_client_fork/code/main.tsx","extension","actionData","errors"]