create a banking program with html and javascript must have javascript and html

ID: 3865071 • Letter: C

Question

create a banking program with html and javascript

must have javascript and html in the code

an xml is allowed

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 <head> tag of the HTML document using the
<script> tag to load your function so it can be called later on.
The solution should not use a <script> in the <body> of the HTML. The HTML page
should use HTML controls, and call functions in the JS file(s) via event handlers.
The prompt() function should not be used to gather information from the user.
The JS file must not contain any prompt() functions, and must not contain
any document.write, document.writeln or any other code that puts text to the
HTML page. The JS file(s) is to place dynamic HTML in a div on the HTML
page.
Use the attached util.js JavaScript form utilities to help with the form manipulation.
See the util.js discussion in Helpful Hint section.
Put the HTML and JS files in the same folder.
Try to make your solution look similar to the screen shots.
Put identifying information in your files: your name, assignment name/number
term/class.
Example for HTML:

Example for JS:
/**
* @author YourName
* Lab 3 - 2016-FA-ITEC 136
*/

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 < elements.length; ++i) {
if (elements[i].checked) {
result.push(elements[i].value);
}
}
return result;
}

/**
* 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 < options.length; ++i) {
if (options[i].selected) {
result.push(options[i].value);
}
}
return result;
}

/**
* 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 < options.length; ++i) {
if (options[i].selected) {
result.push(options[i].text);
}
}
return result;
}

/**
* 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

Lab 3 Bank c a Search 1270.0.1. 8020/Lab/lab3 bank html Welcome to Simple Bank where we make banking simple! Account Info Account Type: Name: testuser Saving Checking Amount Transfer From: Transfer To Withdraw Transfer Deposit View Transactions Name: testuser Account: Saving Initial Balance: S1000.00 Amount Description Transfer To Checking S-500.00 $500.00 S476.67 S-23.33 Withdraw Deposit S102.20 S578.87 ransfer From Checking S234.00 $812.87 View Transactions Balance

Explanation / Answer

<html>
<head>
<script language="JavaScript">
<!-- hide this script from old browsers
var bank = 0;
var bank_name = "The Bank of Pacycephalosaurus";
var bank_interestPolicy = 0;
var bank_interestPolicy_interestAmount = 2;
var bank_ineterestPolicy_interest = function (amount) {
var interestGain = bank_contents_money / bank_interestPolicy_interestAmount;
var bank_contents_money = bank_contents_money + interestGain;
};

var wallet = 0;
var wallet_name = "Wallet of You!";
var wallet_money = 0;
bank_opening();
</script>
</head>
<body>
<form>
<h2>Bamk</h2>
Enter a number to withdraw or deposit:
<INPUT NAME="deposit" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>
<INPUT NAME="depos" VALUE="Deposit" TYPE=BUTTON
> <p>
<p>
<INPUT NAME="withd" VALUE="Withdraw" TYPE=BUTTON
> <p>
The amount in a bank is:
<INPUT NAME="bank_contents_money" READONLY SIZE=15>
</form>
</body>
</html>

Navigate

create a banking program with html and javascript must have javascript and html

create a base class Device that contains one data member: ID are a pointer to ch

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

create a banking program with html and javascript must have javascript and html

Question

Explanation / Answer

Related Questions

Navigate