Todo List

\n setNewTodo({...newTodo, title: e.target.value})}\n required \n />\n

setNewTodo({...newTodo, description: e.target.value})}\n        />\n        <select \n          value={newTodo.priority}\n          onChange={(e) => setNewTodo({...newTodo, priority: e.target.value})}\n        >\n          {Object.values(PRIORITIES).map(priority => (\n            <option key={priority} value={priority}>{priority}</option>\n          ))}\n        </select>\n        <select \n          value={newTodo.category}\n          onChange={(e) => setNewTodo({...newTodo, category: e.target.value})}\n        >\n          {Object.values(CATEGORIES).map(category => (\n            <option key={category} value={category}>{category}</option>\n          ))}\n        </select>\n        <input \n          type=\"date\" \n          value={newTodo.dueDate}\n          onChange={(e) => setNewTodo({...newTodo, dueDate: e.target.value})}\n        />\n        <button type=\"submit\">Add Todo</button>\n      </form>\n\n      <div className=\"todo-list\">\n        {todos.map(todo => (\n          <div \n            key={todo.id} \n            className={`todo-item ${todo.completed ? 'completed' : ''} ${todo.priority}`}\n          >\n            <h3>{todo.title}</h3>\n            <p>{todo.description}</p>\n            <div className=\"todo-meta\">\n              <span>Category: {todo.category}</span>\n              <span>Priority: {todo.priority}</span>\n              {todo.dueDate && <span>Due: {todo.dueDate}</span>}\n            </div>\n            <div className=\"todo-actions\">\n              <button onClick={() => handleToggleComplete(todo.id)}>\n                {todo.completed ? 'Undo' : 'Complete'}\n              </button>\n              <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<TodoApp />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"Organize_my_todo\";\n  const SCHEMA_VERSION = 1;\n\n  // Initialize todos table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_todos_${SCHEMA_VERSION} (\n      id TEXT PRIMARY KEY,\n      title TEXT NOT NULL,\n      description TEXT,\n      priority TEXT NOT NULL,\n      category TEXT NOT NULL,\n      due_date TEXT,\n      completed BOOLEAN DEFAULT 0,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle API routes\n  if (request.method === 'GET' && new URL(request.url).pathname === '/todos') {\n    const todos = await sqlite.execute(`\n      SELECT * FROM ${KEY}_todos_${SCHEMA_VERSION} ORDER BY created_at DESC\n    `);\n    return new Response(JSON.stringify(todos.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/todos') {\n    const todo = await request.json();\n    await sqlite.execute(`\n      INSERT INTO ${KEY}_todos_${SCHEMA_VERSION} \n      (id, title, description, priority, category, due_date, completed) \n      VALUES (?, ?, ?, ?, ?, ?, ?)\n    `, [\n      todo.id, \n      todo.title, \n      todo.description, \n      todo.priority, \n      todo.category, \n      todo.dueDate, \n      todo.completed ? 1 : 0\n    ]);\n    return new Response(JSON.stringify(todo), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  if (request.method === 'DELETE' && /^\\/todos\\//.test(new URL(request.url).pathname)) {\n    const id = new URL(request.url).pathname.split('/').pop();\n    await sqlite.execute(`\n      DELETE FROM ${KEY}_todos_${SCHEMA_VERSION} WHERE id = ?\n    `, [id]);\n    return new Response(null, { status: 204 });\n  }\n\n  if (request.method === 'PATCH' && /^\\/todos\\//.test(new URL(request.url).pathname)) {\n    const id = new URL(request.url).pathname.split('/').pop();\n    const updates = await request.json();\n    await sqlite.execute(`\n      UPDATE ${KEY}_todos_${SCHEMA_VERSION} \n      SET completed = ? \n      WHERE id = ?\n    `, [updates.completed ? 1 : 0, id]);\n    return new Response(null, { status: 204 });\n  }\n\n  // Serve HTML\n  return new Response(`\n    <html>\n      <head>\n        <title>Todo List</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  line-height: 1.6;\n}\n\n.todo-app {\n  background: #f4f4f4;\n  border-radius: 5px;\n  padding: 20px;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ninput, textarea, select {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.todo-list {\n  display: grid;\n  gap: 10px;\n}\n\n.todo-item {\n  background: white;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 15px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.todo-item.completed {\n  opacity: 0.6;\n  text-decoration: line-through;\n}\n\n.todo-item.high { border-left: 4px solid red; }\n.todo-item.medium { border-left: 4px solid orange; }\n.todo-item.low { border-left: 4px solid green; }\n\n.todo-meta {\n  display: flex;\n  gap: 10px;\n  font-size: 0.8em;\n  color: #666;\n}\n\n.todo-actions {\n  display: flex;\n  gap: 10px;\n}\n\nbutton {\n  padding: 8px 12px;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background: #0056b3;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/devkess/Organize_my_todo/code/main.tsx","extension","actionData","errors"]
</article></body></html>