💰 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",[99],"permalink","https://www.val.town/x/AryanChau0310/ExpenseTracker/code/Expense","extension","actionData","errors"]