Improve the rendering from localStorage: currently re-renders everything on the page

[pixelsbyeryc]

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.