💰 Expense Tracker

\n Total Expenses: ${totalExpenses.toFixed(2)}\n

\n\n

Expense History

\n {expenses.map((expense) => (\n

\n {expense.description}\n ${expense.amount.toFixed(2)}\n {expense.category}\n \n {new Date(expense.date).toLocaleDateString()}\n \n

\n ))}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n // Dynamic import of SQLite to avoid browser-side errors\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n const SCHEMA_VERSION = 1;\n\n // Create expenses table if not exists\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_expenses_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n description TEXT NOT NULL,\n amount REAL NOT NULL,\n category TEXT NOT NULL,\n date DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle different routes\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/expenses\") {\n const expenses = await sqlite.execute(`\n SELECT * FROM ${KEY}_expenses_${SCHEMA_VERSION} \n ORDER BY date DESC \n LIMIT 50\n `);\n return new Response(JSON.stringify(expenses.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/add-expense\") {\n const expense = await request.json();\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_expenses_${SCHEMA_VERSION} \n (description, amount, category, date) \n VALUES (?, ?, ?, ?)\n `,\n [\n expense.description,\n expense.amount,\n expense.category,\n expense.date,\n ],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Serve HTML\n return new Response(\n `\n \n \n Expense Tracker\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.expense-tracker {\n background: white;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nheader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 2px solid #e0e0e0;\n padding-bottom: 15px;\n}\n\n.total-expenses {\n font-weight: bold;\n color: #2ecc71;\n}\n\n.expense-form {\n margin: 20px 0;\n}\n\n.expense-form form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.expense-form input, \n.expense-form select, \n.expense-form button {\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.expense-form button {\n background-color: #3498db;\n color: white;\n border: none;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.expense-form button:hover {\n background-color: #2980b9;\n}\n\n.expense-list {\n margin-top: 20px;\n}\n\n.expense-item {\n display: flex;\n justify-content: space-between;\n padding: 10px;\n border-bottom: 1px solid #f1f1f1;\n}\n\n.expense-category {\n color: #7f8c8d;\n font-size: 0.9em;\n}\n\n.expense-amount {\n font-weight: bold;\n color: #e74c3c;\n}\n`;","deleted","label","children",[],[154],"files",[152],"counts",{"_175":32,"_176":177,"_178":32,"_179":180},"pulls","branches",1,"forks","envVars",{"_181":32,"_182":32},"count","emptyCount","contents",[185],{"_103":153,"_96":154,"_155":115,"_156":-5,"_157":140,"_158":139,"_159":117,"_105":186,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_99":187},["D",1742808552876],[154],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_94":95,"_96":97,"_98":-7,"_100":-7,"_101":197,"_183":202,"_205":-7,"_206":-5,"_207":-5,"_171":208,"_212":209,"_213":-5,"_214":-5,"_215":22,"_216":22},{"_103":104,"_96":97,"_105":198,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":-5,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":199,"_134":200,"_137":201,"_149":22},["D",1742808428957],{"_94":95,"_132":133},{"_94":95,"_136":133,"_14":113},{"_100":139,"_96":44,"_103":140,"_141":104,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":97,"_148":95},[203],{"_103":153,"_96":154,"_155":115,"_156":-5,"_157":140,"_158":139,"_159":117,"_105":186,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_99":204},[154],"readme","upstream","pull",[209],{"_103":153,"_96":154,"_155":115,"_156":-5,"_157":140,"_158":139,"_159":117,"_105":160,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_168":210,"_99":211},[],[154],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

AryanChau0310

ExpenseTracker