create a banking program with html and javascript

Your supervisor has asked you to create a simple bank transaction web page so that customers can do online banking. You remember you learn about the forms and arrays. So you decided to use forms and arrays. See the array discussion in Helpful Hints. The HTML page will use HTML controls to facilitate user input. The web page has three main sections. They are Account Info, Transactions and View Transactions. The Account Info section get user name and account type (saving or checking). The Transactions section allows user to deposit, withdraw, transfer or view the transactions. The View Transactions section displays user transactions. See the sample outputs for more info. The required user inputs are: Account Info o Name: User inputs their name in a textbox. o Account Type: User select either Saving or Checking radio button. Default to Saving. Transactions: o Amount: User enters amount value in a textbox. o Transfer From and Transfer To: Drop down menu. The list contains the following. The user must select either Saving or Checking. No default value. Saving Checking o There are four buttons in this section Deposit. Clicking this button adds the value in Amount textbox to the selected Account Type. If user did not enter proper data, a popup error message appears. Withdraw: Clicking this button subtract the value in Amount textbox to the Account Type. If user did not enter proper data, a popup error message appears. Transfer: Clicking this button transfer the value in Amount textbox from the Transfer From account to the Transfer To account. The Transfer From account must be different from Transfer To account, ie, either from saving to checking or checking to saving. If the Transfer From account is same as the Transfer To account, a popup error message appears. View Transaction: Clicking this button displays the transactions in table form in the View Transactions section of the web page. The View Transactions section displays the transactions in table form. See the sample outputs. Action Items/Programming Requirements The solution must use and deliver both an HTML and at least one JS file. The JS file(s) must be referenced in the

tag of the HTML document using the

This is the util.js file in its entirety

"use strict";

/** * Reading input fields to find the element "elt" * @param {string} - id name used in text input */ function findElement(elt) { var element = elt; if (typeof elt === "string") { element = document.getElementById(elt); } if (typeof element === 'undefined' || element === null) { throw "Could not find element with ID ''" + elt +"'"; } return element; }

/** * Reading input value find textbox or textarea * Return the value if find. * @param {string} field - id name used in text input * @param {Object} converter - function converter */ function getValue(field, converter) { var element = findElement(field); var result = element.value; if (typeof converter === "function") { result = converter(result); } return result; }

/** * setValue set the value in textbox if the field name is found. * @param {string} field - id name used in text input * @param {string} value - new value * @return {string} return the old value */ function setValue(field, value) { var element = findElement(field); var oldValue = element.value; element.value = value; return oldValue; }

/** * getCheckedValues find the element by input name * It is used to find elements that are selected in * radio button or checkbox. For checkbox, it is possible * more than one box are checked. * @param {string} name - name used in radio/textbox input * @return {array} - list of selected checkbox(es) */ function getCheckedValues(name) { var result = []; var elements = document.getElementsByName(name); for (var i = 0; i

/** * getOptions returns the selected option(s) in drop down menu list. * @param {field} - id name used in select option * @return {array} - list of selected options */ function getOptions(field) { var result = []; var options = findElement(field).options; for (var i = 0; i

/** * getOptionsText returns the selected option text name in drop down menu list. * @param {field} - id name used in select option * @return {array} - list of selected optio text values */ function getOptionsText(field) { var result = []; var options = findElement(field).options; for (var i = 0; i

/** * setDiv set the output "div" id with the "html" value * @param {string} div - id used in div block * @param {string} html - HTML doc to be placed in div block */ function setDiv(div, html) { findElement(div).innerHTML = html; }

/** * getDiv returns the ouput div innerHTML property * @param {string} div- id used in div block */ function getDiv(div) { return findElement(div).innerHTML; }

/** * appendDiv appends html page to the div block * @param {string} div- id used in div block * @param {string} html - HTML doc to be appended in div block */ function appendDiv(div, html) { setDiv(div, getDiv(div) + html); }

/** * resetList resets the list to empty * @param {string} id - id used in select input */ function resetList(id) { var lst = document.getElementById(id); if (lst != null) { lst.selectedIndex = 0; } }

Also what it should look like

also the transfers should look like this.

Lab3-Bank 3 127.0.0.1 bank.html Welcome to Simple Bank where we make banking simple! Account Info Account Type: Name: testuser Saving Checking O Transactions Amount Transfer From: saving Transfer To Transfer Withdraw Chedcing View Transactions View Transactions Lab3-Bank 3 127.0.0.1 bank.html Search Welcome to Simple Bank where we make banking simple! Account Info Account Type: Name: testuser Saving Checking O -Transactions Amount Transfer From: saving Transfer To: Saving Checking View Transactions Withdraw Transfer -View Transactions