A program that takes a percentage amount of your total money as your “spending money” and allocate it to the items you want to use the money on.
Note: I am currently working on a version 2 that design of this web app, which you can see here. I am also planning to utilize React framework.
Project Version:
- v1: view source code
- Stack: Python, Flask, HTML5, CSS3, JavaScript, JQuery, PySQL, MySQL
Note: The instructions and images you will see below are currently based of v1
The program allows it users to list items that they want to save up for. The program takes in the users’ total money (ie the total money you have in your bank account), which then takes a percentage of it as your spending money. As the default, 30% of your total would be used but this can changed based on your preference.
Below is an example use of the program
As you can see, my spending money is $$$ which is 30% of the total ($$$). The spending money will then be allocated to the items listed, prioritising the items with higher priority. As you can see, it completes the first 3 items which has priority #5 then goes down the list if there are leftover spending money.
Users can simply add an item by inputting a valid priority number, from 0 to 9, (9 being the highest priority), a name, and the price of the item. If there’s no error, the program will notify the user that the item is successfully added to the list via the alert box and will be added on the item list.
Item can be removed by pressing the item’s corresponding delete button. By performing the deletion process, the program will redo the allocation to reflect the new item list.
User can press the Edit button to edit an item’s price, name, or priority. To do so, user must choose which attribute they want to edit and enter the correct value. If the inputted value is valid, it will be reflected in the program, reallocating the spending money if necessary.
Similar to editing each items, users can also edit their total money and the percentage by pressing the edit button below the Spending Budget text. User will be prompt a modal where user can edit the information. Similar to above, if there are no error, the change will be reflected by the program.
- Python: Backend Language
- HTML5, CSS3, JavaScript: Frontend Language
- Flask: Python Web Framework
- PySQL: Python Framework
- JQuery: Javascript Framework
- MySQL: Database
This project is licensed under the MIT License
For readability, I ensured that users can only see the first two decimal points. However, this result in some items having slightly more or less cents than it should have.
The program should just be connected to the users’ back account so it will automatically update the total amount instead of manually doing it.