1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Document</ title >
7+ < link href ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css "
rel ="
stylesheet "
integrity ="
sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH "
crossorigin ="
anonymous "
> 8+ < link rel ="stylesheet " href ="style.css ">
9+ </ head >
10+ < body >
11+ < div id ="login_area "> < h1 class ="text-center "> Welcome to Brac Bank</ h1 >
12+ < div class ="submit_area "> < h2 > Login</ h2 > < input type ="text " placeholder ="E-mai " class ="form-control "> < br >
13+ < input type ="password " placeholder ="Password " class ="form-control "> < br >
14+ < button class ="btn btn-success " id ="log ">
15+ Submit
16+ </ button >
17+
18+
19+ </ div >
20+ </ div >
21+ < div id ="transaction_area "> < h1 > Transaction Procedure</ h1 >
22+ < div class ="row ">
23+ < div class ="col-md-4 ">
24+ < div class ="diposite status "> < h5 >
25+ Deposit
26+
27+ </ h5 >
28+ < h2 >
29+ $< span id ="depp "> 0</ span >
30+
31+ </ h2 > </ div > </ div >
32+
33+
34+ < div class ="col-md-4 ">
35+ < div class ="Withdraw status "> < h5 >
36+ Withdraw
37+
38+ </ h5 >
39+ < h2 >
40+ $< span id ="withd "> 0</ span >
41+
42+ </ h2 > </ div > </ div >
43+
44+
45+
46+ < div class ="col-md-4 ">
47+ < div class ="Balance status "> < h5 >
48+ Balance
49+
50+ </ h5 >
51+ < h2 >
52+ $< span id ="balancc "> 0</ span >
53+
54+ </ h2 > </ div > </ div >
55+
56+
57+
58+
59+ </ div >
60+ < div class ="row ">
61+ < div class ="col-md-6 ">
62+ < div class ="submit_area ">
63+ < h1 > Deposit</ h1 >
64+ < input type ="text " id ="tk ">
65+ < button class ="btn btn-success " id ="deposite "> Deposit</ button >
66+
67+ </ div >
68+
69+ </ div >
70+
71+ < div class ="col-md-6 ">
72+ < div class ="submit_area ">
73+ < h1 > Withdraw</ h1 >
74+ < input type ="text " id ="with_tk ">
75+ < button class ="btn btn-success " id ="with "> Withdraw</ button >
76+
77+ </ div >
78+
79+ </ div >
80+ </ div >
81+
82+ </ div >
83+
84+ < script >
85+ const submit = document . getElementById ( "log" ) ;
86+ submit . addEventListener ( "click" , function ( ) {
87+ const logi = document . getElementById ( "login_area" ) ;
88+ logi . style . display = "none" ;
89+
90+ const trns = document . getElementById ( "transaction_area" ) ;
91+ trns . style . display = "Block" ;
92+
93+
94+ } )
95+
96+ const dep = document . getElementById ( "deposite" ) ;
97+ dep . addEventListener ( "click" , function ( ) {
98+ const dep_amount = document . getElementById ( "tk" ) . value ;
99+ const int_initial = parseFloat ( dep_amount ) ;
100+ update ( "depp" , int_initial ) ;
101+ document . getElementById ( "tk" ) . value = "" ;
102+ update ( "balancc" , int_initial ) ;
103+
104+ } )
105+ const wwithdrw = document . getElementById ( "with" ) ;
106+ wwithdrw . addEventListener ( "click" , function ( ) {
107+ const with_amount = document . getElementById ( "with_tk" ) . value ;
108+ const int_initial = parseFloat ( with_amount ) ;
109+ update ( "withd" , int_initial ) ;
110+ document . getElementById ( "with_tk" ) . value = "" ;
111+ update ( "balancc" , - int_initial ) ;
112+
113+ } )
114+
115+ function update ( id , amount ) {
116+ const inner_txt = document . getElementById ( id ) . innerText ;
117+ const int_initial = parseFloat ( inner_txt ) ;
118+ const updated_dep = int_initial + amount ;
119+ document . getElementById ( id ) . innerText = updated_dep ;
120+ }
121+ </ script >
122+ </ body >
123+ </ html >
0 commit comments