💰 expense-tracker
Expense Tracker is a clean, responsive, and interactive web application that helps users manage their daily finances with ease. Whether you want to track your spending habits, monitor income, or simply gain more control over your money, this app provides a simple and elegant solution right in your browser.
🧾 Description
Expense Tracker is designed to make personal finance management effortless and accessible. With this tool, you can easily add your income and expenses, categorize them, and instantly see how they affect your total balance. Every transaction you make updates in real time, giving you a clear view of where your money goes.
Built using HTML, CSS, and JavaScript, this app runs entirely in your browser — no database or server required. Your financial data is safely stored using localStorage, which means your records remain available even after closing or refreshing the page.
The design is minimal yet modern, focusing on simplicity and functionality. Whether on desktop or mobile, the layout adjusts seamlessly for a smooth experience.
Expense Tracker isn’t just a personal finance tool — it’s also a great front-end project for beginners looking to strengthen their understanding of DOM manipulation, event handling, and data persistence in JavaScript.
✨ Features
💵 Add Transactions: Record your income or expenses with ease.
🔄 Real-Time Balance: Automatically updates total income, expenses, and balance.
🗑️ Delete Entries: Remove unwanted transactions instantly.
💾 Local Storage: Keeps your data safe even after closing the browser.
📱 Responsive Design: Works smoothly on both desktop and mobile devices.
⚡ Lightweight & Fast: Built with pure HTML, CSS, and JavaScript — no dependencies.
🚀 Live Demo
👉 Live Demo https://Abdulrahmanvisit.github.io/expense-tracker/
🛠️ Technologies Used
HTML5 – Structure and content
CSS3 – Styling and responsive layout
JavaScript (Vanilla) – Logic, interactivity, and localStorage
💡 How to Use
Open the app in your browser.
Enter a description and amount for your transaction.
Click Add to record it — income adds to your balance, expenses subtract from it.
Your list updates automatically, showing income, expenses, and total balance.
Click the Delete icon to remove any transaction.
Your data will stay saved in the browser, even after refreshing or closing the tab!
git clone https://github.com/Abdulrahmanvisit/expense-tracker.git
cd expense-tracker
Then open the index.html file in your preferred browser.
Learning Objectives
This project helps you learn:
How to use JavaScript for DOM manipulation and event handling.
How to store and manage data using localStorage.
How to create a responsive web layout with CSS.
How to design user-friendly and efficient web interfaces.
🤝 Contributing
Contributions are welcome! If you’d like to enhance the project:
Fork this repository.
Create a new branch (git checkout -b feature-name).
Make your changes and commit (git commit -m "Add new feature").
Push to your branch (git push origin feature-name).
Open a Pull Request.
👨💻 Author
Abdurrahman Bello
💼 Front-End Developer
🌐 GitHub Profile ✉️ abdurrahmanbello99@gmail.com