Micro-Project Report On

“Create a Small Banking system using javascript “

Submitted for partial fulfilment of course:Client Side Scripting using JavaScript

with Course Code: FC5471 of the Diploma Programme in Information Technology

Submitted by –

18IF009-DARSHAN BHANGE

18IF010-PRAJWAL BHUTKAR

18IF011-ABHISHEK BODKHE

18IF015-SAURABH CHOPADE

18IF025-PRAVIN GHULE

18IF039-VEDANG MHASKE

Under the Guidance of

Prof. R.J.Rangari

Department of Information Technology,

Government Polytechnic, Amravati.
(An Autonomous Institute of Government of Maharashtra)
2020-2021
 CERTIFICATE

This is to certify that the Micro-project entitled

“Create a small Banking management system

is a bonafide work and it is submitted to the Government Polytechnic, Amravati.

By,

18IF009-DARSHAN BHANGE
18IF010-PRAJWAL BHUTKAR
18IF011-ABHISHEK BODKHE
18IF015-SAURABH CHOPADE
18IF025-PRAVIN GHULE
18IF039-VEDANG MHASKE
in the partial fulfilment of the course:Client Side Scripting using JavaScript with
Course Code: FC5471 programming for the requirement of the Diploma in
Information Technology, during the academic year 2020-2021 under my guidance.

Prof. R.J.Rangari Prof. Dr. P.P. Karde

Guide & Subject Teacher Head of Department
Department of Information Department of Information
Technology Technology
Government Polytechnic Amravati. Government Polytechnic Amravati.

Department of Information Technology,

Government Polytechnic, Amravati.
(An Autonomous Institute of Government of Maharashtra)
2020-2021
ACKNOWLEDGEMENT

It gives me immense pleasure in submitting the micro-project report on topic

“Make a comparative chart to calculate total waiting and turnaround time of n
processesd with different cpu scheduling algorithm” to my guide
“Prof.R.J.Rangari” who was a constant source of guidance and inspiration for
devolving the micro project report and for preparation of project.

I am also thankful to all staff members of Information Technology department,

who have indirectly guided and helped us in preparation of this project.
I am extremely thankful to Dr. R. P. Mogre, Principal and Dr. P. P. Karde Head of
Department of Information Technology, for providing all the required sources for
the successful completion of our project.

At last, I am thankful to my friends whose encouragement and constant inspiration

helped me so for the preparation of the project.

Thanking you,
18IF009-DARSHAN BHANGE

18IF010-PRAJWAL BHUTKAR

18IF011-ABHISHEK BODKHE

18IF015-SAURABH CHOPADE

18IF025-PRAVIN GHULE

18IF039-VEDANG MHASKE
 (Third Year Information Technology)

Department of Information Technology,

Government Polytechnic, Amravati.
(An Autonomous Institute of Government of Maharashtra)
2020-2021

Vision

 To ensure excellent education environment with the technical capability in

the field of IT engineering to serve vibrant Industry & Society.

Mission

 Facilitate Students to learn the basics of IT Engineering entailing the

technical gain.
 Train Students with technical skills with rational capacity to meet the
requirements of industry with technological aspect.
 Motivate the students for an advance knowledge in IT engineering and other
value-added programs for their holistic development.
 Imparting Ethical values, leadership and Social value in Students which
transform them in to good human being.
 Provide an academic environment and consultancy services to the industry
and society in the area of IT & Computer engineering.
COURSE OUTCOMES (COs)

At the end of the course, students will be able to :-

1. Create interactive web pages using program flow control structure.

2. Implement Arrays and functions in JavaScript.
3. Create event based web forms using JavaScript.
4. Use JavaScript for handling cookies.
5. Create interactive web page using regular expression for validation.
6. Create menus and navigations in web pages

INDEX

Sr.no TOPIC
1. ABSTRACT
2. INTRODUCTION
3. REQUIREMENT
4. OBJECTIVE AND GOALS
5. GRAPHICAL INTERFACE
6. CODE
7. OUTPUT
8. CONCLUSION
 ABSTRACT

Attendance Reporting System is the software application which generates 

monthly attendance report. Attendance is the factor that is important in the
life of the students of the organization. It is the factor that matters a lot to
the people in their career. The higher authorities will screw the people a lot
if their attendance is not as they had expected. It may also result in the
removal of the student from his position. The attendance management
system will help in managing the attendance of the student of the
organization and the students of the institutions in a well organized way.
This will be a unique project idea that one can work on.

The attendance management system application will help in maintaining

the attendance of the students in a well organized way. Due to the shortage
of attendance, the students will not be given the hall ticket to write the
examination. This will be the normal situation that every student in the
institution faces. They need to pay some extra fine in order to get the hall
ticket to write the examination. Even in the organizations, the shortage of
the attendance might result in the withdrawal of the job. The user interface
must be simple and easy to understand. The employees and the students will
be having the having the separate login id to view the attendance status of
the particular month. The modules that are included in this application
 INTRODUCTION

Banking (Internet banking or E-banking ) allows customers of a financial

institution to conduct financial transactions on a secured website operated by the
institution, which can be are tail bank, virtual bank, credit union or building
society. Attendance Management System is a software developed for daily
student attendance in schools, collages and institutes. If facilitates to
access the attendance information of a particular student in a particular
class.The information is sorted by the operators, which will be provided by
the teacher for a particular class. This system will also help in evaluating
attendance eligibility criteria of a student.

Purpose:- The purpose of developing attendance management system is

to computerized the tradition way of taking attendance. Another purpose for
developing this software is to generate the report automatically at the end
of the session or in the between of the session

Scope:- The scope of the project is the system on which the software is
installed, i.e. the project is developed as a desktop application, and it will
work for a particular institute.But later on the project can be modified to
operate it online.Attendance Management System

SOFTWARE REQUIREMENTS:
Language: Microsoft Visual Studio 2015
Database: Microsoft SQL server 2008
Download Source code:
HARDWARE REQUIREMENTS:
The hardware requirements that map towards the software are as follows: RAM:
256MB
Processor: Intel
Mouse
Keyboard

REQUIREMENTS: It is the process of determining user expectations for a new

or modified product. These features are called requirements, must be quantifiable,
relevant and detailed.

1. FUNCTIONAL REQUIREMENTS:

Account Configuration:
Login registration: Admin has more authority than any other users. He can
choose any user to use the software and the modules he select, can only be
viewed and used by that particular employee. Admin provides username and
password to employee for login purpose.
Password change: The user can change the password by entering his first
password if necessary.
Login History: The software keeps track of the login history. This can be
viewed only by the admin. It provides the employees login time and logout
time. Through this the admin comes to who has worked how much.
Mark Attendance: Now the employee can login and need to go to his/her
profile where he/she can see the Mark Attendance. On click on that module,
the user gets to see a form. On a right click, another pop-up screen will
appear. It consists of his/her name and the date. He just needs to fill his/her
status. The status is a master. It includes Morning attended, day closed,
lunch etc

Report: At the end of the month report is generated to calculate the

payment of each customer who arrived and purchased the apartment in that
particular month.
Logout: This module allows the user to Logout the application. Further
operations cannot be performed after user exits.

OBJECTIVE & GOALS

The objective & goals of the proposed system are:-

 To allow only authorized user to access various functions and
processed available in the system.
 Locate any student wanted by the user.
 Reduced clerical work as most of the work done by computer.
 Provide greater speed & reduced time consumption
 This will reduced the manual workload and give information
instantly. The software will maintain the list of student and customer
record and balance status.
 The software will be user friendly so that even a beginner can
operate the package and thus maintain the status of student and
balance status easily.

Graphical interface:
The Graphical interface of the application is prepared by the usage of
ASP.NET.
Coding for the validation is provided through the use of VS2015 . The back
end of the application is maintained in Microsoft Access. Information Source is
Management Information System HARDWARE REQUIREMENT Hardware is
referred to as computing potential. In this project, three hardware categories have
been considered during software planning: DEVELOPMENT SYSTEM, which is
a computer and related peripherals that will be used during the software
development
phase.
The development system has been used because it can accommodate multiple
users, maintain large volumes of information and support a rich assortment of
software tools. TARGET MACHINE on which the software will eventual is
executed.

 Code:
1. Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Banking App</title>
</head>
<body>
<h1 id="bank_title">Banking App</h1>
<div id="balance_info">
<p>Please enter your starting balances below.</p>
<form id="balance_form">
Checking Balance:<br>
<input type="number" name="checking_balance"
id="checking_balance" class="enter_balance"><br>
Savings Balance:<br>
<input type="number" name="savings_balance"
id="savings_balance" class="enter_balance"><br><br>
<input type="button" value="Submit" id="submit_balance"
form="balance_form">
</form>
</div>
<div class="row">
<div class="bank" id="checking_info">
<h2>Checking Account</h2>
<p id="current_checking_balance">Current Balance: </p>
<div id="enter_transaction">
<form id="transaction_form">
Amount:<br>
<input type="number" name="transaction_amount"
id="transaction_amount" class="transaction"><br>
 <div id="desc">
Description:<br>
<input type="text" name="transaction_description"
id="transaction_description" class="transaction"><br>
</div>
<select name="transaction_type" id="transaction_type"
class="trans_type">
<option value="Debit">Debit</option>
<option value="Deposit">Deposit</option>
<option value="Withdraw">Withdraw</option>
<option value="Transfer">Transfer</option>
</select>
<input type="button" value="Submit"
id="submit_transaction" form="transaction_form"
class="submit_trans">
</form>
<br>
</div>
<table id="trans_table">
<tr class="top_of_table">
<th>Transaction Type</th>
<th>Descripton</th>
<th>Amount</th>
<th>Balance</th>
</tr>
</table>
</div>
<div class="bank" id="savings_info">
<h2>Savings Account</h2>
<p id="current_savings_balance">Current Balance: </p>
<div id="enter_transaction_savings">
<form id="transaction_form_savings">
Amount:<br>
<input type="number" name="transaction_amount"
id="transaction_amount_savings" class="transaction"><br>
 <select name="transaction_type"
id="transaction_type_savings" class="trans_type">
<option value="Deposit">Deposit</option>
<option value="Withdraw">Withdraw</option>
<option value="Transfer">Transfer</option>
</select>
<input type="button" value="Submit"
id="submit_transaction_savings" form="transaction_form"
class="submit_trans">
</form>
<br>
</div>
<table id="trans_table_savings">
<tr class="top_of_table">
<th>Transaction Type</th>
<th>Descripton</th>
<th>Amount</th>
<th>Balance</th>
</tr>
</table>
</div>
</div>

</body>
</html>
<script src="BankingApp.js"></script>

2. Stylesheet.css
.row {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
}

.bank {
 grid-column: span 1;
background-color: #DCDCDC;
border: solid;
margin: 5px;
padding: 100px;
border-radius:6px;
-moz-border-radius:6px;
border-color: #696969;
}

#bank_title {
color: #282828;
}

#balance_info {
display: grid;
background-color: #DCDCDC;
border: solid;
justify-content: center;
width: 280px;
padding: 5px;
border-radius:6px;
-moz-border-radius:6px;
border-color: #696969;
}

.enter_balance {
background: #F5F5F5;
border: 1px solid black;
border-radius: 5px;
padding: 2px;
margin: 5px;
}

#submit_balance {
background: #E4E1E1;
border: 1px solid black;
border-radius: 5px;
}

table {
border-collapse: separate;
border: solid black 1px;
border-radius: 6px;
-moz-border-radius: 6px;
}

td, th {
border-left:solid black 1px;
border-top:solid black 1px;
}

th {
background-color: #AEA7A7;
border-top: none;
}

td:first-child, th:first-child {
border-left: none;
}

.trans_type {
background: #E4E1E1;
border: 1px solid black;
 border-radius: 5px;
padding: 2px;
margin: 5px;
}

.submit_trans {
background: #E4E1E1;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
margin: 5px;
width: 67px;
}

.transaction {
background: #F5F5F5;
border: 1px solid black;
border-radius: 5px;
}

3. Bankingapp.js

const transactions = document.querySelector("#enter_transaction")

const transactionsSavings =
document.querySelector("enter_transaction_savings");
const transactionType = document.querySelector("#transaction_type")
const transactionTypeSavings =
document.querySelector("#transaction_type_savings");
const transAmount = document.querySelector("#transaction_amount");
const transAmountSavings =
document.querySelector("#transaction_amount_savings");
const transDescription =
document.querySelector("#transaction_description");
const table = document.querySelector("#trans_table");
const tableSavings = document.querySelector("#trans_table_savings");
const desc = document.querySelector("#desc");
const checkingStartingBalance =
document.querySelector("#checking_balance");
const savingsStartingBalance =
document.querySelector("#savings_balance");
const balanceInfo = document.querySelector("#balance_info");

let checkingAccount = {
// Checking account.
name: "checking",
balance: 0.00,
allTransactions: [],
deposit: function (amount) {
this.balance += amount;
this.allTransactions.push({
type: "deposit",
amount: amount,
})
},
withdraw: function (amount) {
this.balance -= amount;
this.allTransactions.push({
type: "withdrawal",
amount: amount,
})
},
debit: function (amount, purpose) {
this.balance -= amount;
this.allTransactions.push({
type: "debit",
amount: amount,
purpose: purpose,
});
},
transfer: function (amount, transferAccount) {
 this.balance -= amount;
transferAccount.balance += amount;
transferAccount.allTransactions.push({
type: "transfer",
amount: amount,
purpose: "transfer",
}),
this.allTransactions.push({
type: "transfer",
amount: amount,
purpose: "transfer",
})
}
}

let savingsAccount = {
// Savings account.
name: "savings",
balance: 0,
allTransactions: [],
deposit: function (amount) {
this.balance += amount;
this.allTransactions.push({
type: "deposit",
amount: amount,
})
},
withdraw: function (amount) {
this.balance -= amount;
this.allTransactions.push({
type: "withdrawal",
amount: amount,
})
},
debit: function (amount, purpose) {
this.balance -= amount;
 this.allTransactions.push({
type: "debit",
amount: amount,
purpose: purpose,
});
},
transfer: function (amount, transferAccount) {
this.balance -= amount;
transferAccount.balance += amount;
transferAccount.allTransactions.push({
type: "transfer",
amount: amount,
purpose: "transfer",
}),
this.allTransactions.push({
type: "transfer",
amount: amount,
purpose: "transfer",
})
}
}

hideStartingInfo(); // Call this at start to hide info until we need it.

function hideStartingInfo() {
// Hides savings/checking info and transaction info.
hideToggle(checking_info);
hideToggle(savings_info);
hideToggle(transactions);
}

function printTable(tableId, account, transferMessage) {

// Prints items to table as they are entered.
let newRow = tableId.insertRow(-1);5
let newCell1 = newRow.insertCell(0);
let newCell2 = newRow.insertCell(1);
 let newCell3 = newRow.insertCell(2);
let newCell4 = newRow.insertCell(3);
newCell1.innerHTML =
account.allTransactions[account.allTransactions.length - 1].type;
newCell3.innerHTML =
account.allTransactions[account.allTransactions.length - 1].amount;
newCell4.innerHTML = account.balance;
if (account.allTransactions[account.allTransactions.length - 1].purpose
!= undefined) {
if(account.allTransactions[account.allTransactions.length -
1].purpose === "transfer") {
newCell2.innerHTML = transferMessage;
} else {
newCell2.innerHTML =
account.allTransactions[account.allTransactions.length - 1].purpose;
}
} else {
newCell2.innerHTML = "";
}
}

function mainBankChecking() {
// Checks which transaction button is selected and executes correct
function.
if (transactionType.value === "Debit") {
runDebitChecking();
transDescription.value = "";
transAmount.value = "";
} else if (transactionType.value === "Deposit") {
runDepositChecking();
transAmount.value = "";
} else if (transactionType.value === "Withdraw") {
runWithdrawChecking();
transAmount.value = "";
} else if (transactionType.value === "Transfer") {
runTransferChecking();
 transAmount.value = "";
}
}

function mainBankSavings() {
// Checks which transaction button is selected and executes correct
function.
if (transactionTypeSavings.value === "Deposit") {
runDepositSavings();
transAmountSavings.value = "";
} else if (transactionTypeSavings.value === "Withdraw") {
runWithdrawSavings();
transAmountSavings.value = "";
} else if (transactionTypeSavings.value === "Transfer") {
runTransferSavings();
transAmountSavings.value = "";
}
}

function runDebitChecking() {
// Checking debit.
let howMuch = Number.parseFloat(transAmount.value);
let forWhat = transDescription.value;
if (isNaN(howMuch)) {
alert("Enter Amount");
} else if (howMuch <= 0) {
alert("Enter positive number.");
} else {
if (checkingAccount.balance >= howMuch) {
checkingAccount.debit(howMuch, forWhat);
displayAccountBalances();
printTable(table, checkingAccount);
} else {
alert("Not enough funds for transaction.")
}
}
}

function runDepositChecking() {
// Checking deposit.
let howMuch = Number.parseFloat(transAmount.value);
if (isNaN(howMuch)) {
alert("Enter Amount");
} else if (howMuch <= 0) {
alert("Enter positive number.")
} else {
checkingAccount.deposit(howMuch);
displayAccountBalances();
printTable(table, checkingAccount);
}
}

function runDepositSavings() {
// Savings deposit.
let howMuch = Number.parseFloat(transAmountSavings.value);
if (isNaN(howMuch)) {
alert("Enter Amount");
} else if (howMuch <= 0) {
alert("Enter positive number.")
} else {
savingsAccount.deposit(howMuch);
displayAccountBalances();
printTable(tableSavings, savingsAccount);
}
}

function runWithdrawChecking() {
// Checking withdrawal.
let howMuch = Number.parseFloat(transAmount.value);
if (isNaN(howMuch)) {
alert("Enter Amount");
} else if (howMuch <= 0) {
 alert("Enter positive number.");
} else {
if (checkingAccount.balance >= howMuch) {
checkingAccount.withdraw(howMuch);
displayAccountBalances();
printTable(table, checkingAccount);
} else {
alert("Not enough funds for transaction.")
}
}
}

function runWithdrawSavings() {
// Savings withdrawal.
let howMuch = Number.parseFloat(transAmountSavings.value);
if (isNaN(howMuch)) {
alert("Enter Amount");
} else if (howMuch <= 0) {
alert("Enter positive number.");
} else {
if (savingsAccount.balance >= howMuch) {
savingsAccount.withdraw(howMuch);
displayAccountBalances();
printTable(tableSavings, savingsAccount);
} else {
alert("Not enough funds for transaction.")
}
}
}

function runTransferChecking() {
// Transfer Checking to Savings.
let howMuch = Number.parseFloat(transAmount.value);
if (isNaN(howMuch)) {
alert("Enter Amount");
} else if (howMuch <= 0) {
 alert("Enter positive number.");
} else {
if (checkingAccount.balance >= howMuch) {
checkingAccount.transfer(howMuch, savingsAccount);
displayAccountBalances();
printTable(table, checkingAccount, "Transfer to Savings");
printTable(tableSavings, savingsAccount, "Transfer from
Checking");
} else {
alert("Not enough funds for transaction.")
}
}
}

function runTransferSavings() {
// Transfer Savings to Checking.
let howMuch = Number.parseFloat(transAmountSavings.value);
if (isNaN(howMuch)) {
alert("Enter Amount");
} else if (howMuch <= 0) {
alert("Enter positive number.");
} else {
if (savingsAccount.balance >= howMuch) {
savingsAccount.transfer(howMuch, checkingAccount);
displayAccountBalances();
printTable(tableSavings, savingsAccount, "Transfer to
Checking");
printTable(table, checkingAccount, "Transfer from Savings");
} else {
alert("Not enough funds for transaction.")
}
}
}

function displayAccountBalances () {
// Displays current balance of both accounts.
 document.querySelector("#current_checking_balance").textContent =
"Current Balance: $" + checkingAccount.balance;
document.querySelector("#current_savings_balance").textContent =
"Current Balance: $" + savingsAccount.balance;
}

function getStartingBalance() {
// Get starting balance of both accounts.
let checkStart = parseFloat(checkingStartingBalance.value);
let saveStart = parseFloat(savingsStartingBalance.value);
let checkFixed = parseFloat(checkStart.toFixed(2));
let saveFixed = parseFloat(saveStart.toFixed(2));
if (isNaN(checkStart) || isNaN(saveStart)) {
alert("Enter starting balance.")
} else {
checkingAccount.balance = checkFixed;
savingsAccount.balance = saveFixed;
clearBox("balance_info");
displayAccountBalances();
hideToggle(checking_info);
hideToggle(savings_info);
hideToggle(transactions);
hideToggle(balanceInfo);
}
}

function clearBox(elementID) {
// Clears element html.
document.getElementById(elementID).innerHTML = "";
}

function checkTransType() {
// Checks transaction type. If debit it then shows description box. If not
debit it hides box.
if (transactionType.value === "Debit") {
desc.style.display = "block";
 transDescription.value = "";
} else if (transactionType.value === "Deposit") {
desc.style.display = "none";
} else if (transactionType.value === "Withdraw") {
desc.style.display = "none";
} else if (transactionType.value === "Transfer") {
desc.style.display = "none";
}
}

function hideToggle(itemToHide) {
// Toggle to hide items.
if (itemToHide.style.display === "none") {
itemToHide.style.display = "block";
} else {
itemToHide.style.display = "none";
}
}

function validate(event) {
// Limits input boxes to .00 decimal places. Use this function oninput
for input boxess in html.
let x = this.value;
this.value = (x.indexOf(".") >= 0) ? (x.substr(0, x.indexOf(".")) +
x.substr(x.indexOf("."), 3)) : x;
}

checkingStartingBalance.addEventListener("input", validate);
savingsStartingBalance.addEventListener("input", validate);
transAmount.addEventListener("input", validate);
transAmountSavings.addEventListener("input", validate);
document.querySelector("#submit_balance").addEventListener("click",
getStartingBalance);
document.querySelector("#submit_transaction").addEventListener("click
", () => {
mainBankChecking();
 });
document.querySelector("#submit_transaction_savings").addEventListen
er("click", () => {
mainBankSavings();
});
transactionType.addEventListener("click", checkTransType);

output:
CONCLUSION:

Conclusion The Attendance Management System is developed using

ASP.NET with fully meets the objectives of the system which it has
been developed. The system has reached a steady state where all
bugs have been eliminated. The system is operated at a high level of
efficiency and all the teachers and user associated with the system
understands its advantage. The system solves the problem. It was
intended to solve as requirement specification.

References:
1. www.google.com