Scribd
Upload
35 views18 pages

21mic7101 Swe2004 Frontend Design and Testing Lab Assignment-1

The document provides details on developing the frontend of a retail banking application. It includes code snippets for modules like login/logout, beneficiary creation, funds transfer, and funds transfer status. Key modules covered include login and logout pages with HTML and CSS code, a registration page, a homepage, beneficiary creation form, funds transfer form, and a transactions status page to view fund transfer statuses.

Uploaded by

Ruthvik Reddy Anupati
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views18 pages

21mic7101 Swe2004 Frontend Design and Testing Lab Assignment-1

The document provides details on developing the frontend of a retail banking application. It includes code snippets for modules like login/logout, beneficiary creation, funds transfer, and funds transfer status. Key modules covered include login and logout pages with HTML and CSS code, a registration page, a homepage, beneficiary creation form, funds transfer form, and a transactions status page to view fund transfer statuses.

Uploaded by

Ruthvik Reddy Anupati
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

SWE2004

FRONTEND DESIGN AND TESTING

ASSIGNMENT - 01

RETAIL BANKING APPLICATION

PREPARED BY :

A.RUTHVIK REDDY

21MIC7101
Develop SPA Applications and Web Components of
Retail Banking Application
Modules are :
 Login and Logout
 Benefeciary Creation
 Funds Transfer
 Funds Transfer Status
 Login and Logout :
HTML :
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./page.css">
<title>mainpage1</title>
</head>
<body>
<h1>MALYA'S BANK</h1>
<div class="login1">
<h3> LOGIN</h3>
<form>
<label for="username">Username:</label>
<input type=" text" placeholder="User Id" required> <br><br>
<label for="password">Password:</label>
<input type="password" placeholder=" Password" required><br> <br>
<button> <a href="./page2.html" target="_blank">LOGIN</button></a>
<!-- <button a href="./page1.html">login</button>-->
<p>New User ?</p>
<button ><a href="register.html">REGISTER</button>
</form>
</div>
</html>
</body>
CSS :
h1{
text-align: center;
color:white;
}
.login1{
color: white;
}
body{
background-image: url("https://images.unsplash.com/photo-1584566442413-9234ee5ad754?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=2070&q=80");
}

 REGISTRATION :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<center>
<h2>New User-Registration</h2>
<label for="accountNumber">Account Number :</label>
<input type="text" name="accountNumber" id="accountNumber" required><br><br>
<label for="cifcode">CIF Code :</label>
<input type="text" name="cifcode" id="cifcode"><br><br>
<label for="branchcode">Branch Code :</label>
<input type="text" name="branchcode" id="branchcode"><br><br>
<label for="country">Country :</label>
<select name="country" id="country" >
<option value=""disabled selected hidden>Select Country</option>
<option value="Nepal">Nepal</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Australia">Australia</option>
<option value="Pakistan">Pakistan</option>
</select>
<br><br>
<form action="/action_page.php">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="1234-567-890" pattern="[0-9]{4}-[0-9]{3}-
[0-9]{3}" required><br><br>
</form>
</center>
</body>
</html>
 HOME :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./page2.css">
<title>home</title>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="home.html" target="_blank">HOME</a></li>
<li><a href="ben.html">BENEFICIARY</a></li>
<li><a href="fundtransfer.html">FUND TRANSFER</a></li>
<li><a href="./transactions.html"> FUND TRANSFER STATUS</a></li>
<li><a href="./contact.html">CONTACT</a></li>
<li><a href="./page1.html">
<button>LOGOUT</button></a></li>
</ul>
</div>
</body>
</html>
CSS :
.navbar {
background-color: #333333;
color: #fff;
padding: 15px;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar a {
text-decoration: none;
color: #fff;
font-weight: bold;
transition: color 0.3s ease;
}
.navbar a:hover {
color: blue;
}
body{
background-image: url("https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=2070&q=80");
}

 BENEFICIARY CREATION :
HTML:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./ben.css ">
<title>mainpage1</title>
<style>
</style>
</head>
<body>
<div><h1> ADD BENEFICIARY</h1>
<form action="">
<label for="NAME">NAME:</label>
<input type="text" placeholder="ENTER NAME AS YOU GIVEN TO BANK"><br><br>
<label for="acntnum">ACCOUNT NUMBER:</label>
<input type="text" name="" id="" placeholder="Enter account number"><br><br>

<label for="acntnum"> CONFIRM ACCOUNT NUMBER:</label>


<input type="text" name="" id="" placeholder="confirm account number"><br><br>
<label for="address">ADDRESS:</label>
<input type="" placeholder="Enter Address">
<label for="ifsc">IFSC</label>
<input type="text" placeholder="ENTER IFSC">
<p> SMS alert for the new beneficiary will be sent to your registred mobile number </p>
<label for="">MOBILE NUMBER:</label>
<input type="text" placeholder="ENTER MOBILE NUMBER">
<br><br>
<button>SUMBIT</button>
</form>
</div> <br>
<button onclick="history.back()">Go Back</button>
</body>
</html>
CSS :
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: grey;
width: 80%;
margin: 0 auto;
padding: 20px;
color: black;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #0e6bce;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
 FUNDS TRANSFER :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Beneficiary</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: grey;
width: 80%;
margin: 0 auto;
padding: 20px;
color: black;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-container {
max-width: 400px;
margin: 0 auto;
}
label {
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #0e6bce;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>FUND TRANSFER</h1>
<div class="form-container">
<form id="beneficiaryForm">
<label for="beneficiaryName">Beneficiary Name:</label>
<input type="text" id="beneficiaryName" name="beneficiaryName" required><br>
<label for="accountNumber">Account Number:</label>
<input type="text" id="accountNumber" name="accountNumber" required><br>
<label for="bankName">Bank Name:</label>
<input type="text" id="bankName" name="bankName" required><br>
<label for="BRANCHNAME">BRANCH NAME:</label>
<input type="text" id="BRANCHNAME" name="BRANCHNAME" required><br>
<label for="ifscCode">IFSC Code:</label>
<input type="text" id="ifscCode" name="ifscCode" required><br>
<br>
<button type="submit">TRANSFER</button>
<button onclick="history.back()">Go Back</button>
</form>
</div>
</div>
<script>
const beneficiaryForm = document.getElementById("beneficiaryForm");
beneficiaryForm.addEventListener("submit", function(event) {
event.preventDefault();
const beneficiaryName = document.getElementById("beneficiaryName").value;
const accountNumber = document.getElementById("accountNumber").value;
const bankName = document.getElementById("bankName").value;
const ifscCode = document.getElementById("ifscCode").value;
// You can perform further processing, such as sending data to a server
alert(`Beneficiary ${beneficiaryName} added successfully.`);
beneficiaryForm.reset();
});
</script>
</body>
</html>

 TRANSACTION STATUS :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bank Account Transactions</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: black ;
color: white;
padding: 10px 0;
text-align: center;
}
main {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #004080;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f5f5f5;
font-weight: bold;
}
.s{
color: green;
}
.f{
color: red;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-container {
max-width: 400px;
margin: 0 auto;
}

label {
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.back{
text-align: center;
}
</style>
<div class="container">
<h1>Fund Status</h1>
<div class="form-container">
<form id="fundStatusForm">
<label for="transactionId">Transaction ID:</label>
<input type="text" id="transactionId" name="transactionId" required><br>

<button type="submit" onclick="alert('Transaction Successful')">Check Status</button>


</form>
<p id="statusResult"></p>
</div>
</div>
<script>
const fundStatusForm = document.getElementById("fundStatusForm");
const statusResult = document.getElementById("statusResult");
fundStatusForm.addEventListener("submit", function(event) {
event.preventDefault();
const transactionId = document.getElementById("transactionId").value;
// You can perform further processing, such as retrieving status from a server
// For demonstration purposes, the status is hardcoded here
const status = "Successful";
statusResult.textContent = `Transaction ID ${transactionId}: ${status}`;
});
</script>
</head>
<body>
<header>
<h1>Bank Account Transactions</h1>
</header>
<main>
<h2>Transaction History</h2>
<table>
<thead>
<tr>
<th>Date</th>
<th>TransactionNumber</th>
<!--<th>Transaction Type</th>
<th>From Account</th>
<th>To Account</th>
<th>IFSC</th>
<th>Amount</th>
<th>Balance</th>-->
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-08-01</td>
<td>2347698547</td>
<td class="s">Successful</td>
</tr>
<tr>
<td>2023-08-05</td>
<td>5790352878</td>
<td class="s">Successful</td>
</tr>
<tr>
<td>2023-08-10</td>
<td>0986535284</td>
<td class="s">Successful</td>
</tr>
<tr>
<td>2023-08-11</td>
<td>3689753345</td>
<td class="s">Successful</td>
</tr>
<!-- Add more rows for additional transactions -->
</tbody>
</table>
</main>
<center> <button class=" back" onclick="history.back()">Go Back</button></center>
</body>
</html>

 CONTACT :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content Type" content="text/html; charset-utf=8"/>
<title>CONTACT</title>
<style>
.navbar {
background-color: #333333;
color: #fff;
padding: 15px;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar a {
text-decoration: none;
color: #fff;
font-weight: bold;
transition: color 0.3s ease;
}
.navbar a:hover {
color: blue;
}
button{
background-color: #0e6bce;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="home.html">HOME</a></li>
</ul>
</div>
<table width="100%" height="150" border="0" cellspacing="5" cellpadding"5" bgcolor="#F0F0F0">

<tr>
<td align="center'>
<table width="708" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="338" align="left"><font face="verdana, geneva, sans-serif" color="black" size "5">
<strong> Call Us Today!</strong>
<br />
1-800-000-0000</font></td>
<td width="291" align="right"><font face="verdana, geneva, sans-serif" color="black" size
"5"> <strong> Call Us Today!</strong><br />1-800-000-0000</font></td>\
</tr>
</table>
</td>
</tr>
</table>
<center> <button class=" back" onclick="history.back()">Go Back</button></center>
</body>

 LOGOUT :

THANK YOU

You might also like