eryc-cc / home-bills Goto Github PK
View Code? Open in Web Editor NEW🌋 [WIP] Minimalistic bill tracker ・ Keep track of your monthly spendings.
Home Page: https://homebills.app/
License: Apache License 2.0
🌋 [WIP] Minimalistic bill tracker ・ Keep track of your monthly spendings.
Home Page: https://homebills.app/
License: Apache License 2.0
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:
Array
as a middleman to both: add/remove/update information in localStorage, and also to push
, pop
, or update information from the DOM.Here's how I envision this working...
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.
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:
.innerText
to update the amount
One of the issues I have is not having clarity over the “total amount” I’ll be paying the following months.
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.
optional
Design the responsive layoutWhen clicking the button, it needs to:
Improvement
Maybe it needs to have a different UI to display: current data vs. new dataIn 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:
select
options according to the data available.spenders
and categories
dynamically.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.