A simple, client-side expense tracking web app that uses the browser’s IndexedDB to store, list and remove expense records. Perfect for learning how to build offline-capable apps with pure HTML, CSS and vanilla JavaScript.

• Add Expense
  • Title, amount, date, category, optional notes
• List Expenses
  • Displays stored records in a searchable, responsive table
• Delete Expense
  • Remove any entry by clicking the “Remove” button
• Offline-Capable
  • All data persists in IndexedDB; works without a network connection
• Responsive Layout
  • Mobile-friendly table that transforms into cards on small screens
• RTL Support
  • Table direction set to right-to-left for Farsi/Arabic use cases

You can try it locally by simply opening index.html in your browser—no server setup required.

1. Clone or download this repository

   git clone https://github.com/yourusername/expense-manager.git
   cd expense-manager

2. Open index.html in your browser

3. Start adding your expenses!

├── index.html        ← Main HTML page
├── Styles/
│   └── style.css     ← Inline and external styling
├── Script/
│   └── script.js     ← IndexedDB logic & DOM manipulation
└── README.md         ← This file

• HTML5 – Semantic markup
• CSS3 – Modern layout, responsive breakpoints
• JavaScript (ES6+) –
  • Browser APIs (IndexedDB, DOM events)
  • No external frameworks or libraries

1. DB Initialization
   • On page load, opens (or creates) an IndexedDB database named expenses with version 1
   • Object store: expense (auto-increment id key) with date and category indexes
2. Add Expense
   • Form submission creates a read-write transaction, stores an object { title, amount, date, category, note }
   • Clears form and re-renders the list
3. List Expenses
   • Opens a read-only cursor over the expense store
   • Appends each record as a <tr> in the table body
4. Delete Expense
   • Event delegation listens for clicks on .remove buttons
   • Deletes by id, then re-fetches and re-renders all records

• Desktop: Table layout with header row
• Mobile (<768px):
  • Table converted into block cards
  • Each <td> shows its data-label before content for clarity

• Modern evergreen browsers (Chrome, Firefox, Edge, Safari)
• IndexedDB support required

MIT License ©