A simple and lightweight web-based Expense Tracker that helps users record daily expenses and calculate the total amount instantly. Built using pure HTML, CSS, and JavaScript — no frameworks required.
This project allows users to:
-Add expense name and amount -View a list of added expenses -Automatically calculate total expenses -Delete individual expenses -Use the application on desktop and mobile devices -The application runs entirely in the browser.
➕ Add new expenses
🗑 Delete individual expenses
🧮 Automatic total calculation
📱 Responsive design for mobile devices
⚡ Instant UI updates (no page reload)
💡 Input validation for incorrect entries
1️⃣ Clone the Repository git clone https://github.com/your-username/expense-tracker.git
2️⃣ Open the Project
Navigate to the project folder and open:
You can:
-Double-click index.html OR
-Right click → Open with Live Server (Recommended)
No installation or dependencies required.
🛠 Tech Stack
*HTML5 – Structure
*CSS3 – Styling and responsiveness
*Vanilla JavaScript – Logic and DOM manipulation
📂 Project Structure ├── index.html # Main structure of the application ├── style.css # Styling and responsive design ├── script.js # Expense logic and UI updates └── README.md 📖 How to Use
1.Enter the expense name.
2.Enter the expense amount.
3.Click "Add Expense".
The expense will appear in the list, and the total will update automatically.
1.Click the "X" button next to any expense.
2.The expense will be removed.
3.The total amount updates instantly.
-Expense name cannot be empty.
-Amount must be a valid number.
-Amount must be greater than zero.
If invalid data is entered, an alert message will appear.
The application is optimized for:
*Desktop
*Tablets
*Mobile devices (≤ 480px width)
Contributions are welcome!
1.Fork the repository
2.Create a new branch
3.Make your changes
4.Submit a Pull Request
Please ensure your code follows the project structure and formatting guidelines.
This project is open-source and available for educational purposes.
Built with ❤️ using pure JavaScript.