Account Ledger Project

Design a ledger that keeps track of credits (money added) and debits (money subtracted) and balance (amount) in an account. On a line, have an input field for providing a description, an input for providing an amount (positive or negative), and a button to add the entry. Have a display area which shows all of the entries with columns for description, debit, credit, and balance, and have it show the totals on the bottom line. Below the display area have a button to clear the last entry, as well as a button to clear all entries.

- Make an Entry class that stores a description, money amount, and whether it is a credit or a debit

- Make a Ledger class that stores the balance amount, as well as a list of Entry classes.

- Make a method called addEntry that reads the input values and adds an entry to the ledger (debit if negative)

- Make a method called display, which will format the ledger text as a string and add it to the display area

- Have the display function show numbers with 2 decimals, spaced into even columns, and right-aligned to their column

- Make a method called clearLast, which will remove the last entry from the ledger

- Make a method called clearAll, which will remove all entries from the ledger

- Configure the buttons to run their corresponding functions

- Have the functions update the display area after they change the ledger

The display area should look like this:

Description Credit Debit Balance ============================================================= Start balance 1500.00 1500.00 Bought Supplies 100.00 1400.00 Transportation 40.00 1360.00 Payment 1 1000.00 2360.00 ============================================================= Total 2500.00 140.00 2360.00

Tips for the Display Area:

- Use the <pre> (preformatted text) tag for the display area in order to preserve formatting in the display string

- You can start with an empty string and add each line to it as a string with "\n" at the end of it, so it will display each on its own line

- Here is a helper function for formatting text and numbers for the display function:

function formatCol (value, colWidth) { if (typeof value == "string") { // Fills in unused spaces for fixed-width text section return value.padEnd(colWidth," "); } else if (typeof value == "number") { if (value == 0) { // Displays zeros as blank space return "".padStart(colWidth," "); } // Formats numbers to 2 decimals, right aligns in fixed-width section return ("" + parseFloat(value).toFixed(2)).padStart(colWidth," ") ; } }

- Use the padEnd function to align the next column consistently with various description sizes, for example "test".padEnd(10," ") would add 4 spaces after "test"

- Use the toFixed function to display a number to 2 decimal places, for example (123.4321).toFixed(2) would make it 123.43

- Use the padStart function to right-align the numbers with a constant column width, for example "123".padStart(10," ") would put 7 spaces before "123"

- Convert numbers to strings so that the padStart function will work (e.g. string3 = "" + 3)

- You can use the provided function multiple times in a line, like this:

myLine = formatCol("Test",30) + formatCol(1,12) + formatCol(2,12);
Hint: Code for one way to make the Entry class
class Entry { constructor (descrip, amount, isDebit) { this.description = descrip this.amount = amount this.isDebit = isDebit } }
Hint: Code for linking a button to call an object's method
<button type="button" onclick="myObj.myMethod()"> Go </button>
<script> var myObj = new MyClass(); </script>
Hint: Full display function
display () { let balance = 0; let totalDebits = 0; let totalCredits = 0; let output = "Description Credit Debit Balance\n"; output += "==================================================================\n"; for (let entry of this.entries) { let debit = 0; let credit = 0; if (entry.isDebit) { debit = entry.amount; totalDebits += debit; } else { credit = entry.amount; totalCredits += credit; } balance += credit - debit; output += formatCol(entry.description,30) + formatCol(credit,12) + formatCol(debit,12) + formatCol(balance,12) + "\n"; } output += "==================================================================\n"; output += formatCol("Total",30) + formatCol(totalCredits,12) + formatCol(totalDebits,12) + formatCol(this.balance,12) + "\n"; document.getElementById("displayArea").innerText = output; }