Progress Pies will serve to indicate paid/unpaid bills, or to visualize the percentage of spendings in each category (credit card, home, etc) or spenders (the family member, "owner" of the bill).

To-do

• [x] Function to create the SVG progress pie
• [x] Function to update the percentage in a specific pie
• [x] Function to get an Array of all pies in the DOM
• [x] Add pies to the overview section
• [x] Style the pies
• [x] Use a default value for the percentage — real values will be defined when the Overview calculations are done.

Description

• Navigation is not as important, so it could be hidden behind a "burger" menu.
• It's important to tell what day it is.
• Actions are most important: Add new bills + filter

Questions:

• Should Overview become a new "page" or a "tab" on mobile to mimic app behavior?
• Should "Add Bills" modal become full-page, kinda like a pwa-like app? With a "Back" button?

To-do:

• [ ] optional Design the responsive layout
• [x] Code the responsive design:

The project is currently re-rendering the transaction list when a new one is added, or when you update a bill to "paid".

This is because I wrote it based on some articles I found about handling data and the DOM with localStorage and vanilla JS.

There is a better way:

• Use an Array as a middleman to both: add/remove/update information in localStorage, and also to push, pop, or update information from the DOM.
• This requires a more functional code, broken into parts that will handle each specific task: DOM, and Storage.

Here's how I envision this working...

Adding bills:

billsList: The element which holds all the bill elements in the DOM
allBillsArray: An array with all the bills, as JSON Objects
allBillsDOM: An array of all the current bills present in the DOM, as elements (Object)

addBill(formData) -> adds bill to allBillsArray -> stores allBillsArray in localStorage -> checks allBillsDOM and adds new bill to the top of the list -> appends to the billsList element

removeBill(key) -> finds the bill with that key in the allBillsDOM -> pops that bill from the array -> syncs with allBillsArray -> updates localStorage -> removes element from billsList element

updateBill(key, data) -> finds the bill with that key in the allBillsDOM -> opens pop-up form with all the data filled from current bill -> checks what's been updated on submit -> updates that bill in allBillsArray -> syncs with allBillsDOM -> updates localStorage -> update specific information on the DOM

We probably have to grab identifiers for each child element (that has data) of the .tx elements to update the data individually.

Maybe this will require to break it down into small bits of functions, like: updateAmount(amount), which is called within the updateBill() function conditionally if the data has been updated.

If you've got a better idea on how to handle this, feel free to share.

PS:

Yes, I know this would all be easier if we used a library that can handle states, like React, or Vue... I am personally not willing to move into a library like that, mostly because I am not comfortable coding with these libraries.

It would slow me down, and I want the tool to work. I really want to be able to use it.

But you're free to fork it and do it! I would love that, and would use it to learn a new skill. ❤️

LMK if you do.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

In the latest updates made on PR #18, the expected data format for both spenders and categories is an Object with key and name attributes:

let categories = {
  creditcard: {
    name: 'Credit Card',
    key: 1651056654886
  },
  home: {
    name: 'Home',
    key: 1651056656009
  }
};

let spenders = [
  {
    name: 'Spender One',
    key: 1651056656974
  },
  {
    name: 'Spender Two',
    key: 1651056657897
  }
];

The app needs to initialize with the Spenders and Categories as an Object and then:

• [ ] Render the select options according to the data available.
• [ ] Have the option to Add/Update/Remove spenders and categories dynamically.
  • [ ] Update transactions(bills) when removing a spender or category
• [ ] Update the calculations accordingly
• [ ] Update the way transactions are rendered