Expense Tracker

A sleek, responsive web application for tracking income and expenses. Built with vanilla JavaScript, this tool helps you manage your finances in real-time with an intuitive and user-friendly interface.

🌟 Features

• Balance Overview – Displays your current balance, total income, and total expenses at a glance
• Transaction Management – Easily add transactions with descriptions and amounts
• Income vs. Expenses – Automatically categorizes entries (positive amounts = income, negative amounts = expenses)
• Visual Indicators – Color-coded transactions for quick identification (green for income, red for expenses)
• Responsive Design – Fully optimized for desktop, tablet, and mobile devices
• Lightweight – No dependencies or frameworks—pure HTML, CSS, and JavaScript
• Real-time Updates – Instant balance calculations as you add transactions

🛠 Tech Stack

• HTML5 – Semantic markup structure
• CSS3 – Modern styling with Flexbox and Grid layouts
• Vanilla JavaScript – No frameworks, pure ES6+
• Google Fonts – Open Sans font family
• Responsive Design – Mobile-first CSS media queries

📋 How to Use

1. Clone or Download this repository to your device
2. Open index.html in your web browser
3. Add a Transaction:
   • Enter a description (e.g., "Salary", "Groceries")
   • Enter an amount
   • Use positive numbers for income (e.g., 500)
   • Use negative numbers for expenses (e.g., -50)
4. View Your Balance – The balance updates automatically as you add transactions
5. Track Over Time – Transactions persist during your session

📂 Project Structure

expense-tracker/
├── index.html              # Main HTML file
├── README.md              # Project documentation
├── assets/                # Images and icons
├── css/
│   ├── styles.css         # Main styling
│   └── responsive.css     # Mobile-responsive styles
└── js/
    └── app.js             # Core JavaScript logic

🎨 Design

The application features:

• Clean, modern UI with a gradient background
• Intuitive card-based layout for transactions
• Interactive form with validation
• Smooth hover effects and transitions
• Fully responsive interface that scales gracefully across all screen sizes

🌐 Browser Support

Works on all modern browsers including:

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)

📝 Getting Started

Simply open index.html in your browser—no installation or setup required!

# No installation needed
open index.html

💡 Tips

• Clear your browser's local storage to reset the application
• Transactions are stored in memory during your session
• For persistent storage, consider adding localStorage functionality

📄 License

This project is open source and available for personal and educational use.

---

Happy Tracking! 💰