HTML/CSS/JS Example - NEED ASSISTANCE with explanation -

Review the updateDisplay function in the balance.js file. Note that it calls the getTransaction function of the library file twice. In the first call, no argument is passed and the total number of transactions is returned. In the second call, the value of the loops index is passed and a specific transaction is returned. Now, code the getTransaction function in the library file.

Note that the updateDisplay function also calls the calculateBalance function of the library file. This code passes the values it receives from the getTransaction function, and the current balance is returned. Now, code the calculateBalance function in the library file.

Review the add function in the balance.js file. Note that it calls the addTransaction function of the library file, passes it values entered by the user, and doesnt receive any value in return. Also note that this function can accept variable numbers of arguments, depending on whether the user entered a value for the date. Now, code the addTransaction function in the library file. Assume that it will use todays date if it isnt passed a date.

//HTML - index.html

Monthly Balance Calculator

Add Transaction

Date:

Type: Deposit Withdrawal

Amount:

Transactions

//CSS - balance.css

body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 480px; border: 3px solid blue; padding: 10px 20px; } h1, h2 { color: blue; } h2 { border-bottom: 2px solid black; } label { float: left; width: 11em; text-align: right; padding-bottom: .5em; } input, select { margin-left: 1em; margin-bottom: 0.75em; } table { width: 95%; border: 1px solid black; border-collapse: collapse; margin: 1em auto; } th, td { text-align: left; } th { border-bottom: 1px solid black; width: 33%; }

//1st JS file - balance.js

"use strict";

var $ = function(id) { return document.getElementById(id); };

var updateDisplay = function () { var html = "DateAmountBalance"; var html = html.concat("0"); var count = getTransaction(); var total = 0; for (var i = 0; i < count; i++) { var trans = getTransaction(i); total = calculateBalance(trans["type"], trans["amount"], total); html = html.concat("", trans["dateDisplay"], "", trans["amountDisplay"], "", total, ""); } $("transactions").innerHTML = html;

};

var add = function() { if ($("date").value === "") { addTransaction($("type").value, $("amount").value); } else { addTransaction($("type").value, $("amount").value, $("date").value); } updateDisplay(); };

window.onload = function () { $("add").onclick = add; updateDisplay(); };

2nd JS file - library_balance.js

"use strict";

var transList = [];

var getTransaction = function(index) {

};

var addTransaction = function (type, amount, date) {

};

var calculateBalance = function (type, amount, total) {

};

//Please provide comments for each update, so I can get the best pratice from this example. Thank you.