A simple and intuitive web application for tracking personal expenses. Built with HTML, CSS, and JavaScript, this project allows users to add, view, and delete expense entries with real-time updates. It demonstrates basic DOM manipulation, event handling, and data storage.
- ➕ Add new expenses with amount, category, and notes
- 📋 View list of all recorded expenses
- 🗑️ Delete any expense entry
- 🔄 Dynamic updates without page reloads
- 🧠 Uses JavaScript for interactive UI
- HTML5
- CSS3
- JavaScript (ES6+)
- Browser Local Storage (optional)
Expense-Manager/
│
├── index.html # Main UI layout
├── styles.css # Styling for the app
├── script.js # JavaScript logic
├── README.md
└── assets/
✔ Add Expense Form
Users can input expense details and save entries instantly.
✔ Interactive List
Expenses are displayed dynamically as they are added.
✔ Delete Functionality
Remove individual expenses with a click.
✔ Real-Time UI Updates
JavaScript DOM updates reflect all user actions in real time.
-
Clone this repository
git clone https://github.com/Ayushi227/Expense-Manager.git cd Expense-Manager -
Open in Browser
- Double-click
index.html, or - Use a local server (e.g., VS Code Live Server)
npx http-server
- Double-click
- User enters an expense.
script.jscaptures the form data.- Expense entry is added to the list dynamically.
- Deleting an expense removes it from the view.
- (Optional) Expenses can be stored in browser local storage.
- 🗃️ Save data persistently using localStorage or backend API
- 📊 Display charts (e.g., monthly breakdown)
- ✏️ Add edit/update expense feature
- 📁 Categorize and filter expenses
- 🧾 Generate PDF reports
Ayushi Khare
GitHub: https://github.com/Ayushi227
LinkedIn: https://www.linkedin.com/in/ayushi-khare-083b5b205/
⭐ If you enjoyed this project or found it useful, please give it a star!