Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alvarofelipe12/budget-planner
Budget Planner
https://github.com/alvarofelipe12/budget-planner
budget html ionic javascript
Last synced: 8 days ago
JSON representation
Budget Planner
- Host: GitHub
- URL: https://github.com/alvarofelipe12/budget-planner
- Owner: alvarofelipe12
- Created: 2025-01-18T18:46:49.000Z (9 days ago)
- Default Branch: main
- Last Pushed: 2025-01-18T19:12:20.000Z (9 days ago)
- Last Synced: 2025-01-18T20:21:58.175Z (9 days ago)
- Topics: budget, html, ionic, javascript
- Language: HTML
- Homepage: https://alvarofelipe12.github.io/budget-planner/
- Size: 151 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Budget Planner
## Overview
Budget Planner is a simple and user-friendly web application designed to help users effectively manage their finances. With this app, users can log income and expenses, visualize their budgets, and make informed financial decisions.
This project was developed as part of the **"Ionic 2 - Practical App Guide"** Udemy course. It demonstrates how to use the Ionic framework in a framework-agnostic way, utilizing JavaScript and HTML.
## Features
- **Add Income and Expenses**: Easily log income sources and track expenses.
- **Budget Overview**: View summaries of your income, expenses, and remaining budget.
- **Dynamic Updates**: Automatically updates budget calculations as new entries are added or removed.
- **Interactive UI**: Provides a clean, responsive, and intuitive interface.
- **Web Hosting**: Deployed online for convenient access.
## Technologies Used
- **Ionic Framework**: For building hybrid, mobile-friendly applications.
- **HTML & CSS**: For structuring and styling the application.
- **JavaScript**: For adding interactivity and functionality.
## Installation Instructions
1. Clone the repository:
```bash
git clone https://github.com/alvarofelipe12/budget-planner.git
```
2. Open the project folder and launch the ```index.html``` file in your browser to start using the app.
## How to Use
1. Open the app in your browser.
2. Add income details by clicking the Add Income button.
3. Log expenses by clicking the Add Expense button.
4. Review the budget overview displayed on the main screen.
5. Adjust or modify entries as needed to maintain an accurate budget.
## Live Demo
Try the app live by visiting [Budget Planner](https://github.com/alvarofelipe12/budget-planner).
## Learning Outcomes
Through this project, the following skills were developed:
- Understanding and applying the Ionic framework in a framework-agnostic manner using JavaScript and HTML.
- Creating responsive user interfaces with a focus on simplicity and usability.
- Deploying web applications through GitHub Pages.
- Gaining insights into financial management concepts for practical application design.
## License
This project is licensed under the MIT License.
## Acknowledgements
- Special thanks to **Maximilian Schwarzmüller**, the Udemy course instructor, for his guidance.
- Thanks to the developers behind the Ionic framework for making such a versatile tool available.
- Hosted via **GitHub Pages**.
---
Feel free to explore, customize, and share feedback on this project!