Overview
The Personal Budget Calculator is a complete, responsive, and client-side web application designed to help users manage their personal finances. The solution offers an intuitive interface for tracking income and expenses, visual feedback through dynamic charts, and the ability to export a summary to PDF, all running directly in the browser without needing a backend.
Objective
The primary objective was to develop a tool that demystifies personal finance management. The goal was to empower users with a clear and immediate understanding of their financial standing, moving beyond simple data entry to provide actionable insights through the following key principles:
Instant Feedback
Providing real-time calculations of expenses and balance.
High Customization
Allowing users to add, edit, and categorize their own expenses.
Visual Experience
Offering a clean UI with a dynamic chart and dark/light themes.
Independence
Creating a 100% client-side tool, ensuring user privacy and offline functionality.
Portability
Enabling users to export their budget summary to a shareable PDF file.
Full Responsiveness
Ensuring a seamless and consistent experience on all devices, from desktops to mobile phones.
Challenges
Real-time Calculations
Ensuring all values (totals, balance, percentages) update instantly and accurately as the user types.
Dynamic UI
Programming the dynamic addition, removal, and editing of expense items without reloading the page.
Chart Visualization
Integrating and dynamically updating a chart to reflect expense distribution correctly.
Client-Side PDF Generation
Creating a professional-looking PDF report using only JavaScript libraries.
State Management
Persisting user data (income, expenses, theme) using `localStorage` so information isn't lost on refresh.
Main Features
Income & Expenses
Input monthly income and a dynamic list of expenses.
Full Customization
Users can set custom names, values, colors, and frequencies.
Live Pie Chart
Expense distribution is shown in a pie chart that updates in real-time.
PDF Export
Generate a clean, printable PDF summary of the budget.
Dark/Light Mode
A theme toggle for user comfort and preference.
Data Persistence
The application saves your data locally in your browser.
Category Modal
An advanced modal with suggestions and a form to create new categories.
Smart Insights
The app provides contextual messages based on the user's balance.
Project Screenshots
Technologies Used
| Technology | Usage |
|---|---|
| HTML5 | Semantic structure for the application. |
| CSS3 (Flex/Grid) | Responsive layout, modern styling, and theming (dark/light mode). |
| JavaScript (ES6+) | Core application logic, DOM manipulation, and interactivity. |
| Chart.js | To create and update the dynamic pie chart for expense visualization. |
| jsPDF | Client-side generation of the final budget report in PDF format. |
| localStorage API | To persist user data (income, expenses, theme) in the browser. |
| Font Awesome | Thematic and intuitive icons for the user interface. |
| Google Fonts | Clean and modern typography for better readability. |
Results
Complete Tool
A fully functional and navigable application from start to finish.
Fully Responsive
A seamless experience on desktops, tablets, and mobile devices.
Intuitive UX
An easy-to-use interface that provides immediate and clear feedback.
PDF System
A robust system for generating PDF reports directly from the browser.
Privacy-Focused
All data is processed and stored on the client-side, ensuring user privacy.
Modular Code
Organized and well-commented code that is easy to maintain and expand.
My Role in the Project
I was responsible for the entire design and development lifecycle:
Design & UI/UX
Creation of the visual identity, layout, and user experience.
Frontend Development
Implementation of the responsive layout with HTML and CSS.
Programming & Logic
Complete JavaScript programming for all features and interactivity.
Testing & QA
Cross-browser and multi-device testing to ensure functionality.
Code Privacy
🔒 This project is a key part of my personal portfolio and was developed from scratch.
As it is an original and complete application, the source code is kept private to maintain its uniqueness.
If you have technical interest, I would be happy to explain its architecture and workings in detail during a call or interview.