-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (113 loc) · 5.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shemuls Bank LTD</title>
<link rel="stylesheet" href="asset/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="asset/css/style.css">
</head>
<body>
<!-- Login area start -->
<section id="bank-login-area-id" class="bank-login-area">
<div class="container">
<h2 class="text-center">Welcome to Shemuls Bank LTD</h2>
<div class="login-form shadow-lg mt-5 border">
<h4>Login</h4>
<input class="form-control" placeholder="Email" type="text">
<br>
<input class="form-control" placeholder="Password" type="password">
<br>
<button id="loginFormHandler" class="btn btn-success">Enter</button>
</div>
</div>
</section>
<!-- Login Area End -->
<!-- Transaction area start -->
<section id="transaction-area">
<div class="container">
<div class="row pt-5 pb-2">
<div class="col-md-4">
<div class="deposit bg-primary p-4 text-light m-4 status">
<h5>Deposit</h5>
<h2>$<span id="currentDeposit">00</span></h2>
</div>
</div>
<div class="col-md-4">
<div class="withdraw bg-danger p-4 text-light m-4 status">
<h5>Withdraw</h5>
<h2>$<span id="currentWithdraw">00</span></h2>
</div>
</div>
<div class="col-md-4 ">
<div class="balance bg-warning p-4 text-light m-4 status">
<h5>Balance</h5>
<h2>$<span id="currentBalance">100</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="login-form shadow-lg mt-5 border">
<h4>Deposit</h4>
<input id="depositAmount" placeholder="$ amount you want deposit" type="text" class="form-control">
<br>
<button id="addDeposit" class="btn btn-success">Deposit</button>
</div>
</div>
<div class="col-md-6">
<div class="login-form shadow-lg mt-5 border">
<h4>Withdraw</h4>
<input id="withdrawAmount" placeholder="$ amount you want withdraw" type="text" class="form-control">
<br>
<button id="addWithdraw" class="btn btn-success">Withdraw</button>
</div>
</div>
</div>
</div>
</section>
<!-- Transaction area end -->
<script>
// Login button handler
const loginFormSubmit = document.getElementById("loginFormHandler");
loginFormSubmit.addEventListener("click", function(){
const BankLoginArea = document.getElementById("bank-login-area-id");
BankLoginArea.style.display = "none";
const TransactionArea = document.getElementById("transaction-area");
TransactionArea.style.display = "block";
})
// Deposit button handler
const addDeposit = document.getElementById("addDeposit");
addDeposit.addEventListener("click", function(){
const depositNumber = getInputNumber("depositAmount");
updateSpanText("currentDeposit", depositNumber);
updateSpanText("currentBalance", depositNumber);
document.getElementById("depositAmount").value ="";
})
// Withdraw button handler
const addWithdraw = document.getElementById("addWithdraw");
addWithdraw.addEventListener("click", function(){
const withdrawAmountNumber = getInputNumber("withdrawAmount");
updateSpanText("currentWithdraw", withdrawAmountNumber);
updateSpanText("currentBalance", -1 * withdrawAmountNumber);
document.getElementById("withdrawAmount").value ="";
})
// Get input value as a number function start here
function getInputNumber(id){
const amount = document.getElementById(id).value;
const AmountNumber = parseFloat(amount);
return AmountNumber;
}
// Update span text function Start Here
function updateSpanText(id, depositNumber){
const current = document.getElementById(id).innerText;
const currentNumber = parseFloat(current);
const totalAmount = depositNumber + currentNumber;
document.getElementById(id).innerText = totalAmount;
}
</script>
<script src="asset/bootstrap/jquery-3.4.1.slim.min.js"></script>
<script src="asset/bootstrap/bootstrap.min.js"></script>
</body>
</html>