🕰️ Reminder App

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

setNewReminder({...newReminder, description: e.target.value})}\n        />\n        <input \n          type=\"datetime-local\" \n          value={newReminder.date}\n          onChange={(e) => setNewReminder({...newReminder, date: e.target.value})}\n          required \n        />\n        <select\n          value={newReminder.category}\n          onChange={(e) => setNewReminder({...newReminder, category: e.target.value})}\n        >\n          {CATEGORIES.map(category => (\n            <option key={category} value={category}>{category}</option>\n          ))}\n        </select>\n        <select\n          value={newReminder.recurrence}\n          onChange={(e) => setNewReminder({...newReminder, recurrence: e.target.value})}\n        >\n          {RECURRENCE_OPTIONS.map(option => (\n            <option key={option} value={option}>\n              {option === 'none' ? 'No Repeat' : `Repeat ${option}`}\n            </option>\n          ))}\n        </select>\n        <button type=\"submit\">Add Reminder</button>\n      </form>\n      \n      <div className=\"reminder-sections\">\n        <div className=\"active-reminders\">\n          <h2>Active Reminders</h2>\n          {reminders.filter(r => !r.completed).map((reminder) => (\n            <div key={reminder.id} className=\"reminder-item\">\n              <div className=\"reminder-header\">\n                <h3>{reminder.title}</h3>\n                <span className=\"category-badge\">{reminder.category}</span>\n              </div>\n              <p>{reminder.description}</p>\n              <small>{new Date(reminder.date).toLocaleString()}</small>\n              {reminder.recurrence !== 'none' && (\n                <small>🔁 {reminder.recurrence} recurrence</small>\n              )}\n              <div className=\"reminder-actions\">\n                <button onClick={() => toggleCompletion(reminder.id, reminder.completed)}>\n                  ✅ Mark Complete\n                </button>\n                <button onClick={() => deleteReminder(reminder.id)}>❌ Delete</button>\n              </div>\n            </div>\n          ))}\n        </div>\n        \n        <div className=\"completed-reminders\">\n          <h2>Completed Reminders</h2>\n          {reminders.filter(r => r.completed).map((reminder) => (\n            <div key={reminder.id} className=\"reminder-item completed\">\n              <div className=\"reminder-header\">\n                <h3>{reminder.title}</h3>\n                <span className=\"category-badge\">{reminder.category}</span>\n              </div>\n              <p>{reminder.description}</p>\n              <small>{new Date(reminder.date).toLocaleString()}</small>\n              <button onClick={() => toggleCompletion(reminder.id, reminder.completed)}>\n                ↩️ Reactivate\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n      \n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\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 = \"ReminderApp\";\n  const SCHEMA_VERSION = 2; // Increment schema version due to new fields\n\n  // Updated reminders table with new fields\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_reminders_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      description TEXT,\n      date DATETIME NOT NULL,\n      category TEXT DEFAULT 'Personal',\n      recurrence TEXT DEFAULT 'none',\n      completed BOOLEAN DEFAULT 0\n    )\n  `);\n\n  // Handle different routes\n  if (request.method === 'GET' && new URL(request.url).pathname === '/reminders') {\n    const reminders = await sqlite.execute(`\n      SELECT * FROM ${KEY}_reminders_${SCHEMA_VERSION} \n      ORDER BY completed, date\n    `);\n    return new Response(JSON.stringify(reminders.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/reminders') {\n    const { title, description, date, category, recurrence, completed } = await request.json();\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_reminders_${SCHEMA_VERSION} \n      (title, description, date, category, recurrence, completed) \n      VALUES (?, ?, ?, ?, ?, ?)`,\n      [title, description, date, category, recurrence, completed ? 1 : 0]\n    );\n    return new Response(JSON.stringify({ success: true }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  if (request.method === 'PATCH' && /^\\/reminders\\/\\d+\\/toggle$/.test(new URL(request.url).pathname)) {\n    const id = new URL(request.url).pathname.split('/')[2];\n    const { completed } = await request.json();\n    await sqlite.execute(\n      `UPDATE ${KEY}_reminders_${SCHEMA_VERSION} SET completed = ? WHERE id = ?`,\n      [completed ? 1 : 0, id]\n    );\n    return new Response(JSON.stringify({ success: true }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  if (request.method === 'DELETE' && /^\\/reminders\\/\\d+$/.test(new URL(request.url).pathname)) {\n    const id = new URL(request.url).pathname.split('/').pop();\n    await sqlite.execute(\n      `DELETE FROM ${KEY}_reminders_${SCHEMA_VERSION} WHERE id = ?`,\n      [id]\n    );\n    return new Response(JSON.stringify({ success: true }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Reminder App</title>\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: Arial, sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f4f4f4;\n}\n\n.reminder-app {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\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\nbutton {\n  padding: 10px;\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  margin-right: 10px;\n}\n\n.reminder-sections {\n  display: flex;\n  gap: 20px;\n}\n\n.active-reminders, .completed-reminders {\n  flex: 1;\n}\n\n.reminder-item {\n  background-color: #f9f9f9;\n  padding: 15px;\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  margin-bottom: 10px;\n}\n\n.reminder-item.completed {\n  opacity: 0.6;\n}\n\n.reminder-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.category-badge {\n  background-color: #e0e0e0;\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 0.8em;\n}\n\n.reminder-actions {\n  display: flex;\n  gap: 10px;\n  margin-top: 10px;\n}\n\n.reminder-item button {\n  align-self: flex-start;\n  font-size: 0.9em;\n}\n\n.reminder-item button:last-child {\n  background-color: #f44336;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Azam123/ReminderApp/code/main.tsx","extension","actionData","errors"]
</article></body></html>