pixelsbyeryc / home-bills Goto Github PK

When clicking the button, it needs to:

1. Grab the bill details from localStorage
2. Open the "Add Bills" modal
3. Populate the input fields with the information
   1. Improvement Maybe it needs to have a different UI to display: current data vs. new data
4. On submit, update the item and store data in localStorage
5. Render updates to that specific bill

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.

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
• Code the responsive design:

To-do:

• Add transaction list empty state
• Add overview empty states

Transaction List empty state

• "No Bills Yet"
• UI Preview (image)
• Title: "Add your first bill"
• Description: "Forget micro-transactions! Add each credit card or home bill as a whole and save yourself some time."
• Button to Add Bills.

Overview Empty States

• "No Data Yet"
• UI Preview (image)
• Title: "Add a bill to start tracking"
• Description: "Once you start adding bills, you'll get an overview of your spendings. It's as simple as that."
• Button to Add Bills

UI Examples

TX List:

• #21
• #22
• #23
• #24

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

The Problem

One of the issues I have is not having clarity over the “total amount” I’ll be paying the following months.

• How do I decide if a purchase is feasible for the time being?
• How do I know whether I’m going over budget?

The Solution

A page where you add the purchase to simulate what the following months will look like.

It won’t add up to the transactions list. It just temporarily calculates it for you.

• Needs a specific page for that.
• Ability to preview “monthly installments”
• Overview for the current month (can have the details)
• Overview of the following months (just a total)
• Ability to add to a specific transaction (sum the current amount and add the amount)

Depends on:

• #5
• #7
• #9
• #10

To-do

• Calculate the total bills for a month
• Calculate the total of each spender
• Calculate the total of each category

Depends on #9

Display all the data calculated in the UI. Try to do it in a way that does not refresh the entire UI every time. Maybe targetting specific elements to update specific attributes or nodes, eg:

• Using .innerText to update the amount
• Update the pie progress via data-attrs.

• Cloning from GitHub
• Installing dependencies
• Running development
• Building