Deviopath › React

Budget Tracker

Hard · Forms

Build a budget tracker with <input className="desc">, <input className="amount">, <select className="type"> ("income" or "expense", starts at "income") and an "Add" button.

"Add" adds an entry only if the trimmed description is not empty and the amount is a positive whole number ("0", "abc" and "2.5" are invalid). Then both inputs are cleared (the type stays). Invalid entries are ignored.

List the entries oldest first as <li> items in <ul className="entries">, with the classes entry and income or expense and text like "Salary: +$1000" or "Rent: -$400" (trimmed description).

Summary of all entries:

- <p className="total-income">Income: $1000</p>

- <p className="total-expenses">Expenses: $405</p>

- <p className="balance">Balance: $595</p> (a negative balance looks like "Balance: -$50")

Next: Tag Input